Lesson · 8 min

Headings and text

Plain text has no structure

The editor holds three lines of plain text. Look at the preview: the browser joins them into one line. A browser ignores line breaks and extra spaces in HTML. It needs tags to know what each part of the text is.

Headings

HTML has six heading levels, from h1 to h6.

<h1>Main title</h1>
<h2>Section title</h2>
<h3>Smaller section title</h3>

Use one h1 for the title of the page.
Use h2 for the main sections, and h3 for parts inside a section.
Do not skip levels. Go from h2 to h3, not from h2 to h5.

Choose a heading level for what the text means, not for how big it looks. You can change the size later with CSS.

Paragraphs

A p element holds a paragraph. The browser adds space above and below it.

Strong and emphasis

Two elements mark words inside a paragraph:

strong marks text that is important. Browsers show it in bold.
em marks text that you stress when you say it. Browsers show it in italics.

<p>Do <strong>not</strong> forget your <em>keys</em>.</p>

Screen readers can read these elements in a different tone. That is why you should not use them only to change how text looks.

Your turn

Add the tags to the text in the editor. Press Run to see the result.

Tasks

4 to do

Task 1, not checked yet. Put the first line, Garden notes, inside an h1 element.
Task 2, not checked yet. Put the second line, Spring, inside an h2 element.
Task 3, not checked yet. Put the sentence Plant the tomatoes early. Water them slowly. inside a p element.
Task 4, not checked yet. Inside the paragraph, make the word tomatoes strong with a strong element. Make the word slowly emphasized with an em element.

Task 1 of 4

Put the first line, Garden notes, inside an h1 element.

All tasks