HTML Text Elements

Headings and Paragraphs

HTML
<h1>Main Heading</h1>
<h2>Sub Heading</h2>
<h3>Smaller Heading</h3>
<p>A paragraph of text. Browsers collapse    extra    spaces.</p>
<p>Line one<br>Line two after a line break</p>
<hr>

Main Heading

Sub Heading

Smaller Heading

A paragraph of text. Browsers collapse extra spaces.

Line one
Line two after a line break

There are six heading levels, <h1> to <h6>. Use one <h1> per page for good SEO and accessibility.

Text Formatting

HTML
<p><strong>Important</strong> and <b>bold</b></p>
<p><em>Emphasised</em> and <i>italic</i></p>
<p><mark>Highlighted</mark>, <del>deleted</del>, <ins>inserted</ins></p>
<p>H<sub>2</sub>O and x<sup>2</sup></p>
<p>Use <code>console.log()</code> to debug.</p>
<blockquote>A block quotation from another source.</blockquote>

Important and bold

Emphasised and italic

Highlighted, deleted, inserted

H2O and x2

Use console.log() to debug.

A block quotation from another source.
strong vs b<strong> and <em> carry meaning (screen readers stress them); <b> and <i> are purely visual.
Track your progress through the HTML course