Div element with a corresponding id="img-div"

HTML-CSS
#1

Hi everyone. Very new to this.
My image is there however I totally don’t get the point of adding this particular user story #3 code.
Tell us what’s happening: My question is what the heck is an id=“img-div”?

Does this mean in the CodePen CSS area I need to code #img-div { attributes, etc}
and then refer back to it on the html page with with id=“image”?
Thanks for any advice! --ap

The Dr Borlaug example has

<figure id="img-div">
  <img id="image" src="https://c2.staticflickr.com/4/3689/10613180113_fdf7bcd316_b.jpg" alt="Dr. Norman Borlaug seen standing in Mexican wheat field with a group of biologists"/>

on this snippet of code what does the mean? Is that an html5 tag?

my code so far

<div> 
  <img id="image"src="https://miro.medium.com/max/4800/1*EoWxYuybCYSgNFI4j62IPQ.jpeg" width="250" alt="farmer and author David Mas Masumoto holding his Sun Crest peaches"/>
</div>

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/14.0.2 Safari/605.1.15.

Challenge: Build a Tribute Page

Link to the challenge:

#2

Sorry. So new that I didn’t realize the code I copied and pasted would add the actual images here.
Borlaug example (what is tag?

/*
<figure id="img-div">
  <img id="image" src="https://c2.staticflickr.com/4/3689/10613180113_fdf7bcd316_b.jpg" alt="Dr. Norman Borlaug seen standing in Mexican wheat field with a group of biologists"/>
*/

My code.

/* 
<div> 
  <img id="image" src="https://miro.medium.com/max/4800/1*EoWxYuybCYSgNFI4j62IPQ.jpeg" width="250" alt="farmer and author David Mas Masumoto holding his Sun Crest peaches"/>
</div>
*/
#3

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).

#4

I’m not sure if I’m answering your question but, user story 3 for the tribute page project says;
"I should see a div element with a corresponding id="img-div""

That means there should be a div element and it should have an id attribute set to "img-div"

Do you recall what an element is? And how to add an attribute (or attributes) to an element?

#5

I think I understand the div element but what would is an img-div attribute? That is what I’m stuck on. What does img-div do?

#6

I think the reason for the image div* is to wrap the image and the image’s caption together in their own section, separate from the title which came before and the information on the tribute subject which should go below. It provides organizational structure.

I do also have a question about this user story - is there a reason it specifies using a div ? Wouldn’t wrapping the image and caption together in a figure tag and and putting the caption inside figcaption tags be more in line with the unit on accessibility? Or is the figure tag considered a type of div?

mozilla documentation showing an example of an image and caption using figure and figcaption: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/figcaption

*just a standard div that we have given the id of ‘image-div’ in order to keep track of it