HTML: Headings and Paragraphs

HTML Headings

The Heading HTML elements (tags) allow for you to place different sizes of headings on to your web page. This allows for simple addition of headings and sub-headings throughout your web pages to easily allow users to skim content and identify what is important to them.

Headings range from <h1> through <h6> and are block level elements. Think of block level elements as those that take up a 'block' of space on the page and the block by default will span the width of the page. By default a block level element will always leave one blank line of space after they are closed.

Example 1
<h1>Donec Quis Enim eu Enim Viverra</h1> would produce the largest heading:

Donec Quis Enim eu Enim Viverra

Example 2
<h6>Donec Quis Enim eu Enim Viverra</h6> would produce the smallest heading:

Donec Quis Enim eu Enim Viverra

Paragraphs

All text structured as paragraphs should be wrapped in a paragraph tag. Like headings paragraphs are block level elements as well.

Example:
<p>He was born Edgar Poe in Boston, Massachusetts, on January 19, 1809, the second child of actress Elizabeth Arnold Hopkins Poe and actor David Poe, Jr. He had an elder brother, William Henry Leonard Poe, and a younger sister, Rosalie Poe. Edgar may have been named after a character in William Shakespeare's King Lear, a play the couple was performing in 1809.</p>

He was born Edgar Poe in Boston, Massachusetts, on January 19, 1809, the second child of actress Elizabeth Arnold Hopkins Poe and actor David Poe, Jr. He had an elder brother, William Henry Leonard Poe, and a younger sister, Rosalie Poe. Edgar may have been named after a character in William Shakespeare's King Lear, a play the couple was performing in 1809.

Strong <strong>, Emphasis <em>, and Citation <cite>

It is better to use <strong> in place of <b> and <em> in place of <i> as these provide some context to what they surround which could be important for accessibility. Strong, emphasis, and cite and inline elements. This means they only take up the space of the text they surround.

Example 1: Strong
<strong>This text appears bold as it is wrapped in a strong tag.</strong>

This text appears bold as it is wrapped in a strong tag.

Example 2: Emphasis
<em>This text appears emphasised as it is wrapped in an emphasis tag.</em>

This text appears emphasised as it is wrapped in an emphasis tag.

Example 3: Stong and Emphasis
<strong><em>This text appears emphasised as it is wrapped in an emphasis tag.</em></strong>

This text appears both strong and emphasised as it is wrapped in an emphasis tag and a strong tag.

In the above note how each set of tags must contain the other set. Since we opened the emphasis tag after the strong tag, we must then close the emphasis tag before we close the strong tag.

Example 4: Citation
References to published works shoudl be wrapped in a citation tag to add context to the content.

Edgar Allan Poe wrote the Cask on the Amontillado which was published in 1846.