HTML <div> element

The <div> element is a generic container for flow content, the broad category that includes text, headings, paragraphs, lists, images, and many other elements used in a document's body. It has no special meaning of its own. It groups content when no more specific HTML element is suitable.

A <div> can group related content so that CSS can lay it out or JavaScript can work with it as a unit. The global attributes class and id commonly identify such groups. In the example below, a container with class="contact-details" groups a telephone number and opening hours. The class provides a name for styling or scripting; it does not create an appearance by itself.

When a group has a more specific meaning, an element that expresses that meaning is appropriate: <p> for a paragraph, <nav> for a major navigation section, or <article> for a self-contained composition. CSS styling alone does not give a generic container the meaning or built-in behaviour of a more specific element.

In normal flow, <div> has a block layout by default, starting on a new line, while <span> is inline and stays within the surrounding line of text. Their content rules also differ: <div> groups flow content, while <span> contains phrasing content, such as text, emphasised words, links, and inline images. CSS can change their display, but does not change what they may contain or where they may be placed. For example, making a <div> inline does not make it valid inside a <p>.

Attributes: GLOBALS.

Typical layout:
<div class="contact-details">
  <p>Telephone: 01632 960123</p>
  <p>Open Monday to Friday, 9am to 5pm.</p>
</div>

Visual representation: