HTML Div

A generic box

div stands for division. It is a block element with no built-in meaning. Browsers do not treat it as a heading, a paragraph, a list, or a landmark. They treat it as a box that groups whatever you put inside.

That makes div useful for layout: a card, a row of columns, a toolbar, a wrapper around two related blocks. It also makes div easy to overuse. If a real tag already names the region, use that tag first.

Grouping related content

Put elements that belong together in one div. You can then move, hide, or style the group as a unit instead of touching each child separately.

<div>
  <h2>Lunch special</h2>
  <p>Tomato soup and sourdough.</p>
  <p>Available until 14:00.</p>
</div>

<div>
  <h2>Hours</h2>
  <p>Tuesday to Sunday, 8–16.</p>
</div>

Each div is one group. CSS can give the special a border and the hours a different background without changing the HTML of the headings and paragraphs.

CSS treats divs as boxes

Layout in CSS is a game of boxes. A div is the default box: block-level, as wide as its parent, as tall as its content. Padding, border, margin, flex, and grid all apply to it.

<style>
  .card {
    border: 1px solid #cbd5e1;
    padding: 1rem;
    max-width: 20rem;
  }
</style>

<div class="card">
  <h2>Espresso</h2>
  <p>Short, hot, 2.50.</p>
</div>

Without CSS, the div is invisible. With a class and a few rules, it becomes a card. Open this in/html/try and change the padding to see the box grow.

Prefer header, main, and article when they fit

A div does not tell assistive technology or search engines what the region is. Landmark tags do:

• header — the banner of the page or of an article
• nav — a list of links used to move around
• main — the unique content of this page (one per page)
• article — a self-contained piece, such as a post or a product
• aside — related extras, such as a tip or a related list
• footer — the closing strip: credits, contact, legal

If the group is “the site header”, write <header>, not <div>. The layout chapter later builds a full page with those tags. Use div for the leftover boxes that have no name of their own: a two-column wrap, a button row, a card shell.

Nested divs

Boxes nest. An outer div can hold a row; inner divs can hold each column. Keep the nesting shallow. Three levels is already a lot for a beginner page.

<div class="row">
  <div class="col">
    <h2>Eat in</h2>
    <p>Find a table. Order at the counter.</p>
  </div>
  <div class="col">
    <h2>Takeaway</h2>
    <p>Ready in about ten minutes.</p>
  </div>
</div>

Later, CSS grid or flexbox on .row can place the two .col boxes side by side. The HTML only says: these two groups sit inside one parent.

When a div is the right choice

Name the box with a class

Bare divs are hard to style later. Add a class that describes the role of the box:card, row, toolbar. Do not use the class as a substitute for a semantic tag. The next chapter is how classes work, including one element with several class names.