Headings, Paragraphs and Text

Introduction

Open any article and you will see a big title, smaller section titles, and paragraphs of text. In HTML, each of those has its own tag. Using the right tag helps readers, search engines and screen readers understand your page.

Headings

HTML has six heading levels, from h1 (the most important) to h6 (the least).

Think of a book. h1 is the book title, h2 is a chapter, h3 is a part of a chapter.

Two good habits:

• Use one h1 on a page, for its main title.
• Do not skip levels. Go from h2 to h3, not from h2 to h5.

Paragraphs

The p element is for a paragraph of text. The browser adds space above and below each one.

A surprise for beginners: the browser ignores extra spaces and blank lines in your code. Many spaces in a row show as one space. If you want a new paragraph, use a new p element.

Line breaks and lines

• <br> forces a line break inside text, like in an address or a poem.
• <hr> draws a horizontal line to separate topics.

These two have no closing tag, because they have no content. They are called void elements.

Strong and emphasis

Use strong for important text and em for emphasis. Browsers show them as bold and italic, but they also tell screen readers how to speak the words.

Try it yourself

Build a small "About me" page. Add an h1 with your name, an h2 called "Hobbies", and a paragraph that uses strong for one word. Press Run to check it.

Summary

• Use h1 to h6 for headings, with one h1 per page.
• Use p for paragraphs. Extra spaces in code are ignored.
• br and hr have no closing tag.
• Use strong for importance and em for emphasis.