HTML Headings Summary

Headings are tags you wrap around text, allowing it to be used as titles to separate your content into sections. Text sections can be nested where subsections use a higher-number heading tag.

<h1>Page Title</h1>
	<h2>Page Topic<h2>
		<h3>Topic Detail</h3>
		<h3>Topic Detail</h3>
	<h2>Page Topic #2</h2>
		<h3>Topic Detail</h3>
		<h3>Topic Detail</h3>

Heading Sections

Heading tags are one of the most critical signals for users and search engines when trying to understand a page’s content. Without them, a page might look like a wall of text with no structure.

Headings can be created before you write in order to organize your content.

Heading Design

It’s most common that the page title is largest and that lower heading tags get smaller. So your H3 tags are smaller than your H2s. This visual hierarchy helps visitors understand how your headings are nested within one another.

Heading SEO

Heading text and structure are important signals search engines look at when deciding whether a site’s content is well-structured and authoritative.

Headings should contain keywords related to the main topic and their focus.

Code Sandbox