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.

<!DOCTYPE html>
<html>
<head>
<style>
  .highlight { background: yellow; }
  #intro { font-style: italic; }
</style>
</head>
<body>

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

</body>
</html>

← Forms Semantic HTML →