HTMLLesson 3 of 10Jump to practice
Headings and paragraphs
Use h1 to h6 to outline your page, and p for blocks of text.
HTML has six levels of heading, from <h1> (most important) to <h6> (least important).
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>Headings are an outline, not a font size
Pick a heading level by its meaning, not by how big it looks. Search engines and screen readers use headings to understand how your page is organized, much like a table of contents.
A good rule: use one <h1> per page for the main title, <h2> for its sections, and <h3> for parts inside a section.
<h1>My trip to Seattle</h1>
<h2>Day 1: Pike Place Market</h2>
<p>We walked through the market in the morning.</p>
<h2>Day 2: Mount Rainier</h2>
<p>We hiked to a waterfall above the clouds.</p>Paragraphs ignore extra spaces
The browser collapses extra spaces and line breaks inside a paragraph into a single space. Run this and compare the code with the result.
<p>
This paragraph
has lots of spaces
and line breaks in the code.
</p>Practice
Check what you just learned. Fill in the missing code, then answer the quiz.
Exercise 1Solved
Make Recipes the main heading of the page.
<>Recipes</> <p>My favorite dishes.</p>Use the most important heading level. There should be one per page.
Exercise 2Solved
Breakfast is a section of the page. Give it the right heading level.
<h1>Recipes</h1> <>Breakfast</> <p>Pancakes and eggs.</p>Sections of an
<h1>page use the next level down.
Finish the practice to complete this lesson.
Sign in to keep your progress on any device.