Headings, paragraphs and text

Introduction

Most of what people read on the web is text, and most of that text is scanned rather than read. Visitors jump from heading to heading looking for what they want. Good structure lets them do that, and it lets search engines and screen readers do the same. This lesson gives you the elements that structure writing.

How it works

Headings run from h1, the most important, to h6. Think of them as the outline of a report. A page normally has one h1, its main title. Sections use h2, and parts of a section use h3. Screen reader users often navigate by jumping through headings, so skipping from h2 to h4 is like tearing a level out of the table of contents.

Paragraphs use p. A p is a block element: it starts on a new line and takes the full width. Elements like strong are inline: they stay in the flow of a sentence.

Here is something that surprises every beginner. The browser collapses whitespace. Any run of spaces, tabs and line breaks in your source shows as a single space. This is deliberate: it lets you indent and wrap your HTML for yourself without changing the page. So pressing Enter in your source does not start a new line on the page. For a new paragraph, use another p. For a line break that belongs to the content, such as in an address or a poem, use <br>. A thematic change gets <hr>. Both are void elements: they have no content and no closing tag.

Marking words. strong means the words are important, and em means stress, the kind that changes how a sentence sounds. Read these aloud: "I did not say that" and "I did not say that". Same words, different meaning. b and i also exist: use them for text set apart without extra importance, such as a product name or a term in another language.

Entities. The < character starts a tag, so how do you show one on the page? You write an entity: < for less-than, > for greater-than, & for an ampersand, © for the copyright sign and   for a space that will not break across lines.

Syntax

<h2>A section heading</h2>
<p>A paragraph with an <em>emphasised</em> word.</p>
<p>Line one<br>Line two</p>
<p>In HTML, 3 &lt; 5 is written with an entity.</p>

Example

Line by line

1. h1 is the title of the page.
2. The first p has extra spaces and a line break in the source. On the page, they collapse into single spaces.
3. h2 starts a section under the title.
4. strong marks a warning as important, and < displays a less-than sign instead of starting a tag.
5. br starts a new line inside the address, where the line breaks are part of the meaning.

Expected result

A title, then two sections. The first sentence appears as normal text with single spaces. The address appears on three lines.

In the real world

A long article on a news site is usually an h1, a run of h2 sections and many paragraphs. Search engines use headings to understand what a page covers, so a page built entirely from styled div elements with no headings is both harder to find and harder to use.

Common mistakes

• Choosing a heading for its size. Use the level the outline needs, and change the size with CSS.
• Using many <br> tags to add space. Space between things is the job of CSS.
• Typing < in text. The browser may read what follows as a tag and hide your text.

Best practices

• Use one h1 per page, and step down one level at a time.
• Write headings that make sense when read alone.
• Keep paragraphs short on screen.
• Use strong sparingly: if everything is important, nothing is.

Summary

Headings form the outline of a page, and paragraphs hold its text. Whitespace in your source collapses, so structure comes from elements. strong and em add meaning, br and hr are void elements, and entities let you display characters that HTML would otherwise treat as code.

Mark lesson complete