If someone could, just completely explain how div’s and id’s work. I have taken a break from coding for a week or so, and I can’t remember. Pretend I am 5 please. I really appreciate it. I’m working on my Tribute page.
1 Like
Div stands “division” or “section”.
It is pretty much “made up” tag that does not do anything visible, it just divides document into sections so it is convenient for you to work with document by splitting it in different sections.
For example you can have a page with image and text under the image. You can just place them both inside <div></div> and give that div some ID just so it would be easier for you to work when you want to style\format that section.
As for “id” it stands for identification etc. It is unique identification name that you give to elements in any way you want, to help you select those elements in CSS\Javascript etc when you need them.
You can imagine id as an name tags on doors that you can place to remind you what is behind the door, or marks on the boxes etc. In general ID should be unique, meaning you 2 boxes should not have same ID.
To classify several elements into one thing you can use class. So for example ID can identify unique boxes like this, while all of them can be classed as “green-box”:
<div id="green-box-1" class="green-box"></div>
<div id="green-box-2" class="green-box"></div>
<div id="green-box-3" class="green-box"></div>
Edit: as for <div> the only visible thing it does is starts new line. Aside from that it is pretty much for your own convenience to help you divide document into sections that would make sense semantically. So you can imagine in your head that “here will be welcome section, here will be some videos” etc, and then use
to actually outline that in document in a way that will help you to not just imagine it in your head, but have page actually divided into different sections without user noticing it even.
3 Likes
So when HTML displays, there are two different types of elements (read things) on the page: inline elements and block elements.
Inline elements are things like an italic tag, or a bold tag. It stays contained in the line, doesn’t interrupt the flow of the page.
Block elements, on the other hand, are contained chunks of content, whether images or text or whatever. It’s a box. A <div> is an example of a block-level element, it keeps its inner workings contained as a discrete piece. <p> tags do much the same.
id’s, on the other hand, are unique names for page elements. While there are standards boards that set what HTML elements we can use, there are far fewer limits on id’s. You, the developer, create them. If you have a <div> and you want to name him Bob, you can: <div id="Bob" >...</div>.
id’s don’t just apply to divs, they can apply to any HTML element in the original document. The only real limitation is, they must be unique. There’s only one <div> with the id=“Bob”.
What if I want to be able to style more than one div similarly? Do I have to call them EACH by their ID? Nope. Suppose <div id="Bob">...</div> had a sibling, <div id="Barb">...</div>. Can I do one call to get to them both? I can, if I give them a class. While id’s are unique, classes can be shared between items! So we could change both of them a little:
<div id="Bob" class="farm-kid">...</div>
<div id="Barb" class="farm-kid">...</div>
They now share a class, so we can style them with a common style when we get to the CSS! Yaaay!
3 Likes
My tribute page should have an element with a corresponding id="main" , which contains all other elements.
This is the first thing it asks. Do i put
<div id="main>
instead of a
<main></main> tag?
sorry, missed the other " on the end of main
<div id="main">
</div>
Yeap, that is exactly how you do it. Just dont forget to close it.
So thats all it is? A tag inside of a div?
Yes. that is all it is. But it is not tag inside of a div. Div itself is a tag, and ID would be called “property” of a tag.
1 Like
Div’s and id’s for 5 year olds. 
I give it a try. I’ve seen other replies, but it may be still handy.
Div’s (<div></div>) are just boxes. You can put stuff in them, like headings <h1>, <h2>, etc. or paragraphs <p> or images, tables, whatever you need. And then you use css to tell this box what it looks like, how large it is, etc.
The id’s are needed to know which box is which. They all look the same without id’s or classes.
That makes it difficult use css to tell the right box what it looks like.
Id’s (id=“name”) are unique names given to an element. Like grantrogers22 is yours here on fcc.
You use them in css (#grantrogers22 {}) to tell that one box what it looks like.
Classes (class=“”) are also names, but not unique. Like camper is both yours and mine here on fcc.
You can use them to tell more elements to look the same in certain aspects. Like giving them all the same background-color.
2 Likes
something else it asks is
I should see a div element with a corresponding
id="img-div"
I put,
<div id="img-div"
</div>
and it says its wrong, whats wrong here?
Thank you for this 10/10 man 
1 Like
Don’t forget to close each part of the div. Yours is still wide open without > after ".
1 Like
I closed it and it still says it is incorrect
eh, I’m a woman. 
1 Like
wait no, it was right, something is wrong with my title
Lol i forgot to add text inside the title element, it wanted me to describe the page
You can totally do:
<main id="main">
</main>
<main> is a part of the Semantic tag set, brought to us by HTML5. It is a still a block-level element, it still presents and functions exactly like a div, but it actually has a meaningful name.
Personally, I would prefer folks start using the semantic tags a LOT more. 
1 Like
I think that not at starting level. At starting level people should understand concept of containers first, giving different tag names to basically same thing will just confuse newcomers.
As long as it is learned later, I do not think it is bad to start with just divs.
1 Like
As long as it is a habit that can be unlearned, I agree. Problem is, when we find something that works, it is all to often not something we revisit and change later.
I taught myself classical guitar about eight years back, sat under a tree with a guitar for hours, day after day. I think I play pretty well. So I decided I wanted more formal lessons, so that I could go to “the next level.”
First thing I learned? I have a LOT to unlearn. I had been playing on the wrong part of my finger, or making things more difficult than I had to.
After three months, I decided its just easier to stick with playing guitar at my level, the way I have for years.
And I worry that, when new developers start with div tags, they’ll stay with them. I agree, get comfortable with the “boxes” metaphor, but not all boxes need to be generic. It’s a real hard habit to unlearn.
2 Likes
It asks,
I should see an element with a corresponding `id="tribute-info",` which contains textual content describing the subject of the tribute page.
Does that mean just to add text where I did in the code?
<div id="img-div">
<img id="image">
<img id="img-caption">
Text Text Text Text
</div>