Headings and paragraphs

Most of any page is text. HTML splits it into headings and paragraphs. Keep one thing in mind: tags describe the meaning of text, not how it looks. A tag says "this is a section heading", and CSS decides which font to draw it in.

Headings

There are six heading levels — from <h1> to <h6> (h stands for heading). The larger the number, the lower the level and the smaller the font:

<h1>Level one heading</h1>
<h2>Level two heading</h2>
<h3>Level three heading</h3>
<h4>Level four heading</h4>

The <h5> and <h6> levels are rare: such a deep structure is seldom needed.

Page structure

Headings form the table of contents of a page, like in a book. <h1> is the title of the whole page, <h2> are its sections, <h3> are subsections within a section:

<h1>Recipes</h1>
<h2>Soups</h2>
<h3>Minestrone</h3>
<h3>Gazpacho</h3>
<h2>Desserts</h2>
<h3>Apple pie</h3>

A page usually has one <h1>. Levels are not skipped: <h2> is followed by <h3>, not <h4>.

Paragraphs

The <p> tag creates a paragraph. The browser adds vertical spacing between paragraphs on its own:

<p>The coffee shop opened in 2015 in an old building by the river.</p>
<p>Today it brews coffee from beans grown in six countries.</p>

A paragraph is a block of text about one idea. Do not write long text without <p>: the browser merges it into one solid run.

Spaces and line breaks

The browser turns several spaces and line breaks in the code into a single space. To break a line inside a paragraph, use the void tag <br>:

<p>221B Baker Street,
   London    NW1 6XE</p>
<p>221B Baker Street,<br>London NW1 6XE</p>

In the first paragraph the extra spaces and the line break are gone. <br> fits addresses and poems, but not spacing between paragraphs.

Thematic break and quote

<hr> is a thematic break, such as a change of topic; the browser draws it as a line. <blockquote> marks a long quotation from another source — the browser indents it:

<p>End of part one.</p>
<hr>
<blockquote>
  <p>Simplicity is prerequisite for reliability.</p>
</blockquote>
<p>— Edsger Dijkstra</p>

Common mistake

Do not choose a heading by its font size. Using <h4> instead of <h2> "because it is smaller" breaks the page outline: search engines and screen readers rely on headings to find their way. Size is changed in CSS:

<h1>Recipes</h1>
<h2 style="font-size: 18px;">Soups</h2>
<p>This is still a level two heading, just smaller.</p>

The style attribute sets CSS right on the element — more about it in the CSS chapter.