Headings & text
Give your content a readable hierarchy.
Structure before style
Use h1 for the main heading and h2 for the next level of sections. Choose heading levels to describe the content hierarchy, rather than to get a particular font size. CSS controls size.
Paragraphs and emphasis
A p element groups a paragraph. Use strong for importance and em for stress emphasis. A ul contains an unordered list; each item goes inside an li.
Keep the outline useful
A reader should understand the page by scanning its headings. Prefer specific headings such as Ingredients to vague headings such as More.
Try the example
<h1>A slower morning</h1>
<p>A short guide to making <em>better</em> coffee.</p>
<h2>What you need</h2>
<ul>
<li>Fresh coffee</li>
<li>Hot water</li>
<li>A little patience</li>
</ul>
<h2>Before you start</h2>
<p><strong>Use a clean filter.</strong> Small details matter.</p>Enable JavaScript to edit and run the example in the playground.
Your turn
Add an h2 called Method and a paragraph below it.
Check your understanding
What should determine the level of a heading?
- Its place in the content hierarchy
- The font size you want
- The length of the text
Show answer and explanation
Its place in the content hierarchy. Headings describe document structure. Change their visual size with CSS.