Content models and void elements

HTML validity depends on an element’s permitted content. This is separate from how CSS later lays elements out as block or inline boxes.

Void elements

Void elements cannot contain children and do not have closing tags:

<img src="avatar.png" alt="Student avatar">
<br>
<hr>
<input type="email" name="email">
<meta charset="utf-8">
<link rel="stylesheet" href="styles.css">

Common void elements include area, base, br, col, embed, hr, img, input, link, meta, source, track, and wbr. They can have attributes, but they cannot contain text or nested elements. The meta, link, and input examples above illustrate this category.

“Self-closing tag” is common informal wording. In normal text/html, <img src="photo.jpg"> and <img src="photo.jpg" /> describe the same void element. The slash is optional; it does not make ordinary elements self-closing:

<!-- Valid void element -->
<img src="photo.jpg" alt="A photo">

<!-- Do not use this as a replacement for </div> -->
<div />

An ordinary element such as div needs a closing tag, even if it has no visible content:

<div></div>

Void elements have no child nodes in the DOM.

p versus div

Element	Typical content model	Use
p	Phrasing content	A paragraph of text
div	Flow content	A generic structural container
span	Phrasing content	A generic inline container
a	Phrasing/transparent content	A link to another resource
ul	li elements	An unordered list
li	Flow content	One list item
h1–h6	Phrasing content	A heading
img, input, br	No children	Void content or a control

A paragraph may contain phrasing content, such as text, strong, em, a, or span. A div is flow content and cannot be nested inside a paragraph:

<!-- Invalid: div is not permitted inside p -->
<p>Read this <div>important block</div></p>

The HTML parser repairs this structure by closing the paragraph before the div, producing a DOM similar to:

<p>Read this </p>
<div>important block</div>
<p></p>

Write separate elements instead:

<p>Read this paragraph first.</p>
<div>Important block content</div>

Use span only when the content is genuinely part of the surrounding phrasing content:

<p>Read this <span class="emphasis">important phrase</span>.</p>

Browsers repair invalid nesting like the example above while parsing, which can produce a different DOM than the source suggests—inspect the result in DevTools—but students should write valid source.