Back to subject
HTML5/HTML Headings

Build a Page Outline

Practical lesson

Let's build a heading hierarchy and read what each level communicates.

- Start with <h1>. This is normally the main heading of the page. - Use <h2> for a major section under the main topic. - Use <h3> for a subsection inside an <h2> section. - Continue with <h4>, <h5>, and <h6> only when the document really needs those deeper levels. - The number is about document structure, not simply about making text look smaller. - A heading should describe the section that follows it. - Do not choose a heading only because its default browser size looks nice. CSS is the better tool for visual sizing. - Read the example in order: the <h1> introduces the page, <h2> introduces a section, and <h3> introduces a smaller section inside it. - Imagine removing the visual styling. The heading levels should still make the page outline understandable.

The practical goal is to learn how headings organize information, not just how to make large text.

Try it yourself
Code

Starter example

Code
<h1>Learn HTML</h1>
<h2>Basic Tags</h2>
<h3>Paragraphs</h3>
<h3>Links</h3>
<h2>Forms</h2>
Live preview