2.0 Text Content
HTML text content elements let you mark up prose: headings organize sections, paragraphs
hold flowing text, inline elements annotate words within a paragraph, lists group items,
and preformatted blocks preserve whitespace for code or ASCII art.
2.1 Headings
HTML provides six heading levels, <h1> through <h6>.
They create a document outline used by screen readers, search engines, and browser
reader modes.
<h1>Page Title</h1>
<h2>Major Section</h2>
<h3>Subsection</h3>
<h4>Sub-subsection</h4>
- Use exactly one <h1> per page — it names the page.
- Do not skip levels (e.g., h1 to h3) — it breaks screen reader navigation.
- Do not choose heading levels for visual size. Use CSS for sizing; headings carry semantic meaning.
2.2 Paragraphs and Inline Text
The <p> element marks a paragraph of flowing text. Browsers add top and
bottom margin by default.
<p>
This is a paragraph. It can contain <strong>bold text</strong>,
<em>italic text</em>, and <a href="page.html">links</a>.
</p>
Common inline elements
| Element | Meaning | Example |
|---|
<strong> | Strong importance | <strong>Warning</strong> |
<em> | Emphasis | <em>must</em> |
<span> | Generic inline wrapper | <span class="note">…</span> |
<code> | Inline code fragment | <code>let x = 1;</code> |
<abbr> | Abbreviation | <abbr title="HyperText">HTML</abbr> |
<mark> | Highlighted text | <mark>search hit</mark> |
<sub> / <sup> | Subscript / superscript | H<sub>2</sub>O |
<time> | Date or time | <time datetime="2026-06-03">June 3</time> |
<q> | Inline quotation | <q>Quoted phrase</q> |
<cite> | Work title | <cite>Book Title</cite> |
<br> | Line break | Line 1<br>Line 2 |
<wbr> | Preferred line-break point | Long<wbr>URL |
2.3 Lists
HTML provides three list types: unordered (<ul>), ordered
(<ol>), and description (<dl>).
<!-- Unordered (bulleted) -->
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<!-- Ordered (numbered) -->
<ol start="1">
<li>Parse HTML</li>
<li>Build DOM</li>
<li>Apply CSS</li>
</ol>
<!-- Description list -->
<dl>
<dt>HTML</dt>
<dd>Structure and semantics.</dd>
<dt>CSS</dt>
<dd>Visual presentation.</dd>
</dl>
Lists can be nested: a <li> may contain another <ul>
or <ol> to create sub-lists.
2.4 Preformatted and Code Text
The <pre> element preserves whitespace, tabs, and newlines exactly as
written. It is almost always paired with <code> for source code:
<pre><code>
function greet(name) {
return `Hello, ${name}!`;
}
</code></pre>
- <pre> preserves whitespace and sets a monospace font by default.
- <code> marks text as machine code (inline or block).
- Inside <pre>, the characters <, >, and & must be escaped as <, >, and &.
- Syntax highlighters (Prism.js, highlight.js) work by adding class="language-*" to the <code> element.
2.5 Blockquote and Address
<blockquote> marks a long quotation sourced from another document.
Use the cite attribute to indicate the source URL.
<blockquote cite="https://example.com/article">
<p>The best way to predict the future is to create it.</p>
</blockquote>
<address> marks contact information for the nearest <article>
or the document as a whole — typically author contact details, not arbitrary postal addresses.
2.6 References
Text Content References