Headings, Paragraphs & Text Formatting

Headings and paragraphs give a page its outline, while inline formatting elements add emphasis and meaning to specific words or phrases.

Headings (<h1> to <h6>)

HTML gives you six levels of headings. <h1> is the most important - usually one per page - down to <h3>206>. Search engines and screen readers use headings to build a page outline, so don’t skip levels or pick one just because of its default font size.

Try it yourself

<h1>Main Page Title</h1>
<h2>Section Heading</h2>
<h3>Sub-section Heading</h3>

Output

Paragraphs & Line Breaks

<p> automatically adds spacing around a block of text. <br> forces a single line break within a block without starting a new paragraph. Browsers also collapse extra whitespace in your source code by default.

Try it yourself

<p>This is a paragraph.<br />This line starts right after a line break.</p>

Output

Text Formatting

<strong> and <em> carry semantic meaning (importance, emphasis) while <b> and <i> are purely visual. <mark> highlights text, <small> de-emphasizes it, and <sub>/<sup> handle subscript and superscript.

Try it yourself

<p><strong>Important:</strong> Save your work. This is <em>very</em> useful. <mark>Note</mark> the formula: H<sub>2</sub>O and 2<sup>10</sup>.</p>

Output

Quotations & Comments

<blockquote> is for a longer quoted passage, <q> for a short inline quote, and <abbr title=""> for abbreviations with a tooltip. HTML comments () are never shown on the page - handy for notes to yourself.

Try it yourself

<blockquote cite="https://example.com">A long quoted passage goes here.</blockquote>
<p>She said <q>HTML is easy!</q></p>
<!-- This comment won't render -->

Output

Coding challenge

Write an <h2>, a paragraph with one bold word and one italic word, and a <blockquote>.

<!-- heading, paragraph with formatting, and a blockquote -->

Output

Answer every question below to mark this chapter as complete.

Quiz Yourself

Score: 0/4

1. How many heading levels does HTML provide?

2. What’s the difference between <strong> and <b>?

3. Which tag forces a single line break without starting a new paragraph?

4. How do you write an HTML comment?