20 min read
Headings, Paragraphs and Text Formatting
Six levels of heading, paragraphs and line breaks, and tags that give text meaning: strong, em, mark, small, sub, sup and blockquote.
Headings h1 to h6
A heading outlineHTML
<h1>Our Menu</h1><h2>Teas</h2><h3>Black teas</h3><h3>Spiced teas</h3><h2>Cakes and short eats</h2>What the browser shows
HTML has six heading levels, <h1> (most important) to <h6> (least). Use them like the outline of a book:
- One <h1> per page — the main title.
- <h2> for sections, <h3> for sub-sections inside them.
- Do not skip levels (h2 straight to h4), and do not choose a heading because of its size — size is changed with CSS.
Screen readers and search engines use headings to understand the page.
Paragraphs, Line Breaks and Lines
p, br and hrHTML
<p>We open every day at 9 am.</p><p>Ceylon Leaf Tea Room<br>12 Church Street<br>Galle Fort</p><hr><p>Free Wi-Fi for customers.</p>What the browser shows
<p> makes a paragraph with space around it. <br> starts a new line inside the same paragraph (good for addresses and poems). <hr> draws a horizontal line to separate topics.
Tags That Give Text Meaning
| Text-level tags | ||
|---|---|---|
index.html
What the browser shows
Try it: Add <em> around another word. Try changing <strong> to <b> — the look is the same, but the meaning is different.
Practice
A page has an <h1>. What should the next level of sub-heading be?
More lessons in HTML · Next: Lists · Previous: Elements, Tags and Attributes