Structuring text: headings, paragraphs and lists

Learn to organize text with a hierarchy of headings, paragraphs and lists.

7 min · 3 questions

Open a cookbook: there is the book title, chapter titles, then recipe titles. HTML offers the same hierarchy with six levels of headings, from <h1> to <h6>. The h stands for heading. <h1> is the main heading of the page, <h2> a section heading, <h3> a subheading, and so on down to <h6>.

<h1>My recipe notebook</h1>
<h2>Starters</h2>
<h3>Carrot soup</h3>
<h2>Desserts</h2>
<h3>Apple pie</h3>

For regular text, you use the <p> tag from the previous lesson. One important detail: pressing the Enter key in your file does not create a new paragraph on screen. The browser ignores line breaks and repeated spaces. To separate two ideas, you must write two distinct <p> elements.

<h2>Apple pie</h2>
<p>A simple recipe, perfect for beginners.</p>
<p>Allow 30 minutes of preparation in total.</p>

To list items, HTML offers two kinds of lists. The <ul> tag (unordered list) displays bullet points: perfect for a shopping list, where order does not matter. The <ol> tag (ordered list) displays numbers: ideal for the steps of a recipe. In both cases, each item in the list is written with the <li> tag (list item).

<ul>
  <li>3 apples</li>
  <li>1 pie crust</li>
  <li>2 spoonfuls of sugar</li>
</ul>
<ol>
  <li>Preheat the oven to 180 degrees.</li>
  <li>Cut the apples into slices.</li>
  <li>Bake for 35 minutes.</li>
</ol>

Knowledge check

Make sure you remember the key points of this lesson.

1. Which tag do you use for the main heading of a page?
   • <h6>
   • <h1>
   • <p>
   • <heading>
2. Which tag creates a numbered list?
   • <ul>
   • <ol>
   • <li>
3. How do you display two distinct paragraphs on screen?
   • By pressing Enter twice in the file
   • By writing two separate <p> elements
   • By adding spaces between the sentences