← 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