HTML provides six levels of heading tags, from <h1> to <h6>. These tags create a hierarchical structure for your web page's content. A proper heading structure is crucial for both SEO and accessibility.

<h1>Main Title</h1>

Step 2

<h1> is the most important heading and should represent the main title of the page. Use it only once per page. <h2> represents major sections. <h3> through <h6> represent nested sub-sections. Never skip heading levels!

<h1>Travel Guide</h1>
<h2>Europe</h2>
<h3>France</h3>
<h3>Italy</h3>
<h2>Asia</h2>
<h3>Japan</h3>

Step 3

Headings should define the structure of your content, not just style. Use CSS for styling. Headings help screen readers navigate and search engines understand your page structure. Always maintain proper hierarchy.

<h1>My Website</h1>
<h2>About</h2>
<h3>History</h3>
<h3>Team</h3>
<h2>Contact</h2>

Step 4

A well-structured document uses headings to outline its content logically. This helps both users and machines understand your page organization.

<h1>Article Title</h1>
<h2>Introduction</h2>
<h2>Main Content</h2>
<h3>Subsection 1</h3>
<h3>Subsection 2</h3>

Step 5

Checkpoint: What is the correct heading hierarchy?

<h1>Title</h1>
<h2>Section</h2>
<h3>Subsection</h3>

Step 6

Correct! Always maintain sequential hierarchy. Never skip heading levels. This ensures proper document structure for accessibility and SEO.

<h1>Title</h1>
<h2>Section</h2>
<h3>Subsection</h3>

Step 7

Now it's your turn. Headings are essential for proper HTML document structure, SEO, and accessibility. Complete the challenges below to master HTML headings!

headings.html

1 / 7

📚

Tutor:HTML provides six levels of heading tags, from <h1> to <h6>. These tags create a hierarchical structure for your web page's content. A proper heading structure is crucial for both SEO and accessibility.

⭐ 0 EXP

Heading Mastery

Unlock nodes by learning heading hierarchy and structure.

Concept 1: HTML Heading Tags

HTML provides six levels of heading tags, from <h1> to <h6>. These tags create a hierarchical structure for your web page's content. <h1> is the most important and should be used only once per page.

System Check

What is the most important heading tag?

Community Holo-Net

Share Heading Structures

Created effective heading hierarchies? Share your code and best practices.

Enjoying this guide?

Codesyllabus is 100% free and open-source. Support our mission, pay for server infrastructure, and fuel new tutorials by buying us a coffee!

HTML Heading Tags (h1-h6)

Pascual Vila

Frontend Instructor.

HTML provides six levels of heading tags, from <h1> to <h6>. These tags are used to define titles and subtitles, creating a hierarchical structure for your web page's content. A proper heading structure is crucial for both search engine optimization (SEO) and accessibility, as it helps machines and screen readers understand the outline of your document.

The Six Levels of Headings

<h1>: The most important heading. It should represent the main title of the page and be used only once per page.
<h2>: Represents a major section of the content. There can be multiple <h2> tags on a page.
<h3>: Represents a sub-section within an <h2> section.
<h4>, <h5>, <h6>: Represent further nested sub-sections. Use them to create a deeper hierarchy as needed.

Best Practices for SEO & Accessibility

Maintain Hierarchy: Never skip heading levels (e.g., do not go from an <h1> directly to an <h3>). This breaks the logical structure for screen readers and search engines.
Use for Structure, Not Style: Headings should define the structure of your content, not just to make text big or bold. For styling, use CSS.
Be Descriptive: Your headings should accurately describe the content of the section that follows.

Browser Compatibility

Heading tags (<h1> to <h6>) are fundamental to HTML and are universally supported by all modern and legacy web browsers, including Google Chrome, Mozilla Firefox, Apple Safari, Microsoft Edge, and Internet Explorer.

Headings Glossary

Heading Hierarchy: The sequential order of headings from h1 (most important) to h6 (least important). Always maintain this hierarchy and never skip levels.
H1 Tag: The most important heading. Should represent the main title of the page and be used only once per page. Critical for SEO.
Document Structure: Headings create an outline of your document. Screen readers use this structure to help users navigate. Search engines use it to understand content hierarchy.
SEO (Search Engine Optimization): Proper heading structure helps search engines understand your page content and improves rankings. H1 is especially important for SEO.
Accessibility: Screen readers use headings to navigate pages. Proper hierarchy allows users with disabilities to understand and navigate your content effectively.

📖 INDEX