Why should a page have one h1 and headings in order?

Headings form the page outline. Search engines use it to understand the page, and screen-reader users navigate by headings, so skipped or repeated top-level headings make the page harder to understand.

What is the difference between and ?

means the text is important and screen readers can convey that; only draws attention visually without extra meaning. Prefer for importance and CSS for pure styling.

How do you show a long quotation from another source?

Wrap it in (optionally with a cite attribute for the source URL), with paragraphs inside it.

Headings, Paragraphs and Text — HTML5 for Beginners: Build Your First Web Pages

What you'll learn

How to use the six heading levels to build an outline.
How to write paragraphs and quotes.
How to mark text as important, emphasised, highlighted or code.

The idea

Headings make an outline

HTML has six levels of heading, from <h1> (the most important) to <h6> (the least). Use them like the chapters and sections of a book:

<h1>Baking Bread</h1>          <!-- the page's main topic: use one h1 -->
  <h2>Ingredients</h2>         <!-- a section -->
  <h2>Method</h2>              <!-- another section -->
    <h3>Kneading</h3>          <!-- a part of the Method section -->

Headings aren't just big text. Search engines use them to understand your page, and people who use screen readers (software that reads pages aloud for blind users) jump from heading to heading to find what they need.

Paragraphs

Wrap each paragraph in <p>. The browser adds space between paragraphs automatically.

Marking up text

Element	Meaning	Usually shown as
`<strong>`	Important	bold
`<em>`	Emphasised (stressed when spoken)	italic
`<mark>`	Highlighted, relevant	yellow background
`<code>`	Computer code	monospace font
`<blockquote>`	A quotation from somewhere else	indented block
`<q>`	A short quotation inside a sentence	in quotation marks
`<small>`	Side comments, small print	smaller text
`<sub>`, `<sup>`	Subscript and superscript	H<sub>2</sub>O, 10<sup>2</sup>

Choose by meaning: <strong> means "this matters", not just "make it bold". When you only want a different look, you'll use CSS.

Try it

Headings and textTry it yourself

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Baking Bread</title>
</head>
<body>
  <h1>Baking Bread</h1>
  <p>Fresh bread needs only four ingredients and some <em>patience</em>.</p>

  <h2>Ingredients</h2>
  <p>Flour, water, salt and yeast. <strong>Don't skip the salt</strong>: it controls the yeast.</p>

  <h2>Method</h2>
  <h3>Kneading</h3>
  <p>Knead for about 10 minutes, until the dough is <mark>smooth and stretchy</mark>.</p>

  <blockquote>
    <p>Bread is the warmest, kindest of words.</p>
  </blockquote>

  <p>Water is H<sub>2</sub>O. Bake at 220&deg;C. In code, a recipe step might be <code>bake(40)</code>.</p>
  <p><small>Recipe adapted from my grandmother's notebook.</small></p>
</body>
</html>

Your turn

Add an <h2>Tips</h2> section with two paragraphs of your own.
In one tip, mark a warning with <strong> and a key phrase with <mark>.
Add an <h3> under Method called "Baking" with a short paragraph.

Common mistakes

More than one <h1> or skipping levels (an <h2> followed by an <h4>). Keep the outline in order.
Choosing a heading for its size. If you want smaller text, use the right heading level and change the size with CSS.
Using headings for things that aren't headings, such as a bold sentence in the middle of text. Use <strong> instead.
Making paragraphs with <br><br>. Use separate <p> elements.

Key points

<h1> to <h6> build the page's outline: one <h1>, then levels in order.
<p> for paragraphs, <blockquote> and <q> for quotes.
Mark text by meaning: <strong> (important), <em> (emphasis), <mark>, <code>, <small>, <sub>, <sup>.
Search engines and screen readers rely on good headings.