HTML Headings

HTML Headings

HTML headings are the titles or subtitles you want to show on a web page. They are made with the tags <h1> through <h6>. <h1> is the most important heading and <h6> is the least important.

Note: Browsers add some space (a margin) before and after each heading automatically.

Example

All six heading levels, from most to least important.

Prompt
A page showing all six HTML heading levels in order, from h1 down to h6, each labeled "Heading 1" through "Heading 6".
Output: complete HTML page

Headings Are Important

Headings matter for more than looks. Search engines use them to understand the structure and content of your pages, and readers often skim a page by its headings.

Use them in order to show structure: <h1> for the page title, <h2> for section titles, <h3> for sub-sections, and so on.

Tip: Use only one <h1> per page; it is the main topic or title. Note: Use headings only for headings, not to make text big or bold.

Example

Headings used to lay out the structure of a travel guide.

Prompt
A page that uses headings to show document structure: an h1 "Travel Guide", then h2 "Europe" with h3 "France" and "Italy", then h2 "Asia" with h3 "India" and "Thailand".
Output: complete HTML page

Bigger Headings

Each heading has a default size, but you can set any size with the style attribute and the CSS font-size property.

Example

An <h1> made 60 pixels tall.

Prompt
A page with an h1 "Heading 1" whose size is set to 60px using the style attribute and the CSS font-size property.
Output: complete HTML page