← HTML tutorial

HTML

Div, Classes & Id

<div> is a generic container with no meaning of its own, it just groups other elements together so you can style or position them as one block. It's one of the most-used tags in HTML precisely because it's so unopinionated.

Example: class vs. id, side by side

<div id="intro">
  <p class="highlight">This paragraph has the "highlight" class.</p>
  <p class="highlight">So does this one.</p>
  <p>This one doesn't.</p>
</div>

The class attribute labels an element so CSS (or JavaScript) can target every element sharing that label at once, here, both highlighted paragraphs share class="highlight", so one CSS rule styles them both identically. id does a similar job, but with one crucial difference: an id must be unique on the entire page, only one element is ever allowed to have a given id, which is exactly why it's used above on the containing div, the one specific section being referenced.

A useful rule of thumb: reach for class when several elements should share the same styling, and reach for id only when you need to refer to one specific, singular element, a page's main navigation bar, for instance, but not a repeated card in a list of many identical cards.

Try it yourself
Ready to go further?

These free tutorials are a preview, our Frontend Development cohort covers it in depth, with a real project and a cohort alongside you. Active

Enroll in Frontend Development
Don't miss out

Ready to build something real?

Create a free account to enroll in a track, and get notified the moment a cohort opens.

Create free account