The use of "id" and "class" in HTML

Hey Dennis! It's good that you want to get a handle on divs, classes, and ids because they are used ALOT.

I'll give a tl;dr version and you can take a look at some examples below too. You can think of divs as top-level elements that help in dividing up sections to structure the layout of your web page.

Id's are good for referencing a unique html element so that you can manipulate the html elements behavior (javascript) or presentation (css). Say you had a button with an id of "signup_button" and you wanted it to take the user to a form lower on the page. You would reference that buttons id in the javascript to make it slide down the page.

Classes are good for grouping certain similar elements together on a page. Say you wanted 3 out of the 4 paragraphs on your page to have blue text. You would give the 3 'p' html elements the same class name making it easy to reference in the css.

So for example you could have 3 divs for a simple web page-

<div>
 <ul>
   <li>Home</li>
  <li>About</li>
  <li>Pricing</li>
 </ul>
</div>

<div>
  <p>Main content/copy for my web page!</p> 
</div>

<div>
 <ul>
  <li>Terms</li>
  <li>Blog</li>
  <li>Contact</li>
 </ul>
</div>

Above is what looks like 3 sections- a navigation bar, the main content, and a footer. We can now add classes to help further structure the web page. These classes can also be used as a reference for css and javascript. It's good to add classes to groups of html elements that you will want to share the same behavior (javascript) or presentation (css) - more likely presentation.

<div class="navigation-bar">
   <ul>
     <li>Home</li>
     <li>About</li>
     <li>Pricing</li>
   </ul>
</div>

<div class="main-content">
  <p>Main content/copy for my web page!</p> 
</div>

<div class="footer">
 <ul>
  <li>Terms</li>
  <li>Blog</li>
  <li>Contact</li>
 </ul>
</div>

Now that those groups of html elements have a class name theres an easy way to reference them for use with css or javascript. We could also add a class name to all the 'ul' on the page if we want them all to look the same.

<div class="navigation-bar">
   <ul class="front-page-lists">
     <li>Home</li>
     <li>About</li>
     <li>Pricing</li>
    </ul>
</div>


<div class="main-content">
  <p>Main content/copy for my web page!</p> 
</div>

<div class="footer">
 <ul class="front-page-lists">
  <li>Terms</li>
  <li>Blog</li>
  <li>Contact</li>
 </ul>
</div>

And in the css you could do something like the following so all the lists that have that class name would look the same.

.front-page-lists{ list-style: none;}

Say you wanted to target an individual html element for styling. Like you wanted to give the paragraph in the main-content div a font-size of 32px. You would have the following html-

<div class="navigation-bar"> <ul class="front-page-lists"> <li>Home</li> <li>About</li> <li>Pricing</li> </ul> </div>

<div class="main-content">
  <p id="bigger-text">This text will be 32px!</p> 
  <p>This text will NOT be 32px.</p>

</div>

<div class="footer">
 <ul class="front-page-lists">
  <li>Terms</li>
  <li>Blog</li>
  <li>Contact</li>
 </ul>
</div>

And the following css- #bigger-text { font-size: 32px; }

Only the first <p> will have the 32px size font. If we wanted both of the paragraphs in the main content div to have 32px we would proably want to use a class name and group them together. It would be silly to do

<div class="main-content">
  <p id="bigger-text">This text WILL be 32px!</p> 
  <p id="bigger-text-also">This text will ALSO be 32px.</p>
</div>

And for the css

#bigger-text {
  font-size: 32px;
}

#bigger-text-also {
  font-size: 32px;
}

When we could do something like

<div class="main-content">
    <p class="marketing-copy">This text WILL be 32px!</p> 
    <p class="marketing-copy">This text WILL be 32px!</p>
</div>

.marketing-copy {
 font-size: 32px;
}

I hope that clears things up a bit. I would love to hear answers from others as I found it somewhat difficult to explain! Let me know if you have any additional questions.

-twiz

PS The way I learned this the best is to go to any webpage on the internet and if you have a chrome browser right click an html element and click inspect element. and remove it's class name. You'll see the change accordingly.

1. Go to https://enterprise.github.com/
2. Right click on the word Github in the "Bring Github To Work" header
3. Click 'inspect element' if in a chrome browser
4. Double click on the class name heading in the highlighted h1 element
5. Delete is and press enter
6. Watch how the page changes
7. Search for other class and id names and remove them and see how the page changes

These articles should help

• Difference between id and class by CSS Tricks
• What are divs & spans in Shay Howe's Learn HTML & CSS guide