What are the common HTML elements for text structuring?
HTML offers a small set of elements for structuring text — paragraphs, line breaks, preformatted blocks, six heading levels, horizontal rules, and generic containers.
"Structuring" here means dividing your content into meaningful pieces: paragraphs, titles, headings, lists, and so on. These are the workhorse elements:
| Element | Purpose | Example |
|---|---|---|
<p> |
Paragraph | <p>Text</p> |
<br> |
Single line break within text | Line 1<br>Line 2 |
<pre> |
Preformatted text — preserves spaces and line breaks exactly | <pre> code </pre> |
<h1> to <h6> |
Six heading levels (<h1> largest, <h6> smallest) |
<h1>Title</h1> |
<hr> |
Horizontal rule (a dividing line) | <hr> |
<div> |
Generic block container (starts on a new line) | <div>Block</div> |
<span> |
Generic inline container (flows within a line) | <span>Inline</span> |
The <div> vs <span> distinction trips people up: a block element like <div> takes up a full width and stacks vertically, while an inline element like <span> sits inside a line of text without breaking it. Tip: use headings in order (<h1> then <h2> then <h3>) rather than picking them by size — screen readers and search engines rely on that hierarchy to understand your page.
Go deeper:
<h1>–<h6>heading elements — MDN — why to keep heading levels sequential and size with CSS, not by picking a bigger tag.