HTML Headings

HTML headings are versatile HTML elements that can be used to improve SEO, user experience, and create structure for your content.

HTML basics for headings

Headings are HTML elements or tags that are used to empahsize important words or phrases on your web pages. HTML headings are rendered with greater visual emphasis to help users identify them on-page. HTML also provide a good way to call out important content to the search engine bots that crawl and index your web pages.

HTML markup for headings

Headings are one of the most common HTML elements on the modern web, and you will find them used on virtually every web page on the Internet. Headings are basic HTML elements that are straightforward to write.

There are six levels of HTML headings. Here's how they look written in HTML markup:

          <h1>Heading 1</h1>
          <h2>Heading 2</h2>
          <h3>Heading 3</h3>
          <h4>Heading 4</h4>
          <h5>Heading 5</h5>
          <h6>Heading 6</h6>
        

Code section and explanation

Designing HTML headings with CSS

code section, explanation, and a few examples

Best practices for HTML headings

One H1 per page

Nesting HTML headings

Orphaned headings & skipping levels

Use CSS to style headings

HTML headings & content hierarchy

Using headings to create content hierarchy

Best practices for content hierarchy

Write headings first, proper nesting, no orphans, reinforce heading and paragraph that immediately follows

HTML headings & SEO

Intro paragraph

HTML headings and SEO indexing

HTML headings and keyword ranking

Do HTML headings make a difference

HTML headings and user experience

Headings make content easy to skim

Screen readers and assistive technologies

Headings improves time on page

Headings & good copywriting

Advanced strategies for HTML headings