HTML Tutorial / When to Use div and span

div and span group content without giving it a special meaning. Use them when CSS or JavaScript needs a target and no more specific HTML element describes the content. A div usually groups larger pieces; a span groups part of a sentence.

How are div and span different?

A div can wrap flow content such as paragraphs, lists, or an entire card. A span is for phrasing content within a sentence. Neither says that its content is a heading, a button, or especially important. By default, a div starts as a block and a span stays inline, but CSS can change their display. Choose by the content's structure, not just its appearance.

Do not put a paragraph or div inside a span. If your only goal is a line break, first decide whether you need a new paragraph or a CSS layout change instead of another wrapper.

Group only what needs styling

Put this HTML in a document's body and the CSS in a style element in its head.

<div class="product-card">
  <h2>Travel mug</h2>
  <p>Price: <span class="price">$15</span></p>
</div>

.product-card {
  padding: 16px;
  border: 1px solid #dadada;
}
.price {
  color: #075cb4;
  font-weight: 700;
}

The whole card gets a border, while only the price changes color and weight. The class attribute gives CSS a name to select. Even without CSS, the product name remains a heading and the price remains in a paragraph. If the price does not turn blue, check that class="price" in HTML matches .price in CSS. The dot marks a class selector; it is not part of the HTML class name.

Prefer an element with a real meaning

For primary navigation, consider nav rather than a generic div. For an independent post, consider article. For an action users can activate, use button instead of making a clickable span. The correct native element already conveys meaning and often supplies keyboard behavior.

The price in this example does not need special data processing, so span is enough. You can keep a CSS class while changing its element to a more meaningful one later. See the MDN list of HTML elements when choosing a suitable element.

Common mistakes

Do not build every page region out of div solely to make layout styling easier. Conversely, do not give a wrapper a semantic element whose meaning does not fit. A styled span does not become a heading or button just because it looks like one. Start with the content and interaction, then add generic wrappers only where necessary.