HTML Headings, Paragraphs and Formatting

Most of the web is text, and well-structured text is easier to read, easier to search and easier for assistive technology to understand. In this lesson you will use HTML headings to build an outline, paragraphs to hold your writing, and a handful of formatting elements that add meaning to individual words. You will use the element and attribute rules from HTML Elements and Attributes throughout.

HTML headings: h1 to h6

HTML has six heading levels, from <h1> (most important) to <h6> (least important). Together they form an outline of the page, much like the chapter and section titles in a textbook.

• Use one <h1> for the main topic of the page. This is a widely followed best practice that keeps the outline clear.
• Go down one level at a time. After an <h2>, the next sub-heading should be an <h3>, not an <h5>.
• You can jump back up to any higher level whenever a new section starts.
• Never choose a heading level for its size. If an <h3> looks too big, change its size with CSS.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Travel guide</title>
</head>
<body>
  <h1>A weekend in Hampi</h1>

  <h2>Getting there</h2>
  <p>The nearest railway station is Hosapete, about 13 km away.</p>

  <h2>What to see</h2>

  <h3>Virupaksha Temple</h3>
  <p>A working temple that is still visited by pilgrims every day.</p>

  <h3>Vittala Temple</h3>
  <p>Famous for its stone chariot and musical pillars.</p>

  <h2>Where to stay</h2>
  <p>Guest houses are available in Hampi Bazaar and across the river.</p>
</body>
</html>

Paragraphs, line breaks and thematic breaks

The <p> element holds a paragraph – a block of related sentences. Browsers add space above and below each paragraph by default, so you never need empty paragraphs or repeated line breaks to create gaps. Spacing is a job for CSS.

The <br> element inserts a line break inside a block of text. Use it only where the line break is part of the content itself, such as a postal address or the lines of a poem. The <hr> element marks a thematic break – a change of topic or scene – and browsers show it as a horizontal line.

Formatting elements with meaning

HTML has several elements that change how words look, but each one also carries a meaning. Pick the element for the meaning; the default look is just a hint.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Formatting</title>
</head>
<body>
  <p><strong>Warning:</strong> the ghat road is closed after 6 pm.</p>
  <p>I <em>never</em> said the dosa was cold.</p>
  <p>The word <i lang="ta">kolam</i> means a floor pattern drawn with rice flour.</p>
  <p>Search results for "idli": soft <mark>idli</mark> with sambar.</p>
  <p>Price: <del>₹250</del> <ins>₹199</ins> <small>(taxes extra)</small></p>
  <p>Water is H<sub>2</sub>O and 5<sup>2</sup> = 25.</p>
  <p>The <abbr title="Indian Space Research Organisation">ISRO</abbr> headquarters is in Bengaluru.</p>
</body>
</html>

Notice the difference between <strong> and <b>. Both are bold by default, but only <strong> says “this matters”. The same goes for <em> and <i>. If you only want bold styling with no extra meaning, a <span> with a CSS class is often the cleanest choice; you will learn text styling in CSS Text and Fonts.

Quotations, code and preformatted text

For longer quotations from another source, use <blockquote>; browsers indent it by default. Short inline quotes go in <q>, which adds quotation marks automatically. The <cite> element marks the title of a creative work, such as a book or film.

For technical writing, <code> marks a fragment of computer code and <kbd> marks keyboard input. The <pre> element displays text exactly as written, keeping every space and line break – useful for code blocks or ASCII art.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Quotes and code</title>
</head>
<body>
  <blockquote>
    <p>Arise, awake, and stop not till the goal is reached.</p>
  </blockquote>
  <p>— Swami Vivekananda</p>

  <p>My favourite novel is <cite>Ponniyin Selvan</cite>.</p>
  <p>My friend said <q>let us meet at the beach at five</q>.</p>

  <p>Press <kbd>Ctrl</kbd> + <kbd>S</kbd> to save, then use the <code><p></code> element.</p>

  <pre>
  Line one
      Line two, indented
  Line three
  </pre>
</body>
</html>

Notice the < in the last example. Because < starts a tag, you write it as the character reference < when you want to show it as text. Similarly, > shows > and & shows an ampersand.

Text is rarely useful on its own – it needs to connect to other pages. That is the subject of the next lesson, HTML Links.

Further reading

• developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/Heading_Elements
• developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Headings_and_paragraphs
• developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Advanced_text_features
• html.spec.whatwg.org/multipage/text-level-semantics.html
• html.spec.whatwg.org/multipage/grouping-content.html#the-blockquote-element