Headings and Lists in HTML: Structure Content the Right Way

Most visitors don’t read web pages word by word; they scan. Headings and lists are what they scan. They’re also how screen-reader users navigate and how search engines identify the topics and steps on a page. Getting them right is one of the cheapest SEO and UX improvements you can make.

Heading levels as an outline#

h1  WordPress Security: 20 Steps to Lock Down Your Site
  h2  Accounts and logins
    h3  Use strong, unique passwords
    h3  Turn on two-factor authentication
  h2  Updates and plugins
  h2  Backups
  h2  WordPress security FAQ
    h3  Do I need a security plugin?

Read the headings alone and you should understand what the page covers. That’s the test.

Heading rules#

• One H1 describing the page’s main topic (usually the post title).
• H2s for main sections, H3s for subsections within an H2. Don’t jump from H2 to H4.
• Descriptive wording — “How to fix the white screen of death” beats “Solution”.
• Not for styling. If you want large text that isn’t a heading, use a CSS class on a paragraph.
• No empty or decorative headings (e.g. a heading containing only an icon).
• Answer first: follow a question heading with a short, direct answer — the format featured snippets and AI answers like.

More detail in header tags.

The three kinds of lists#

<ol>
  <li>Back up your site.</li>
  <li>Update plugins one at a time.</li>
  <li>Test key pages and forms.</li>
</ol>

<dl>
  <dt>TTFB</dt>
  <dd>Time to First Byte — how fast the server responds.</dd>
</dl>

Why lists help SEO#

• Google frequently shows list featured snippets for “how to” and “best” queries, pulled from <ol> and <ul> elements under relevant headings.
• Lists make content easy for AI systems to summarise accurately.
• Readers find and act on steps faster, which improves satisfaction.

Common mistakes#

• Fake lists made with line breaks and dashes or emoji — screen readers can’t announce them as lists.
• Lists with one item, or lists nested five levels deep.
• Headings used for every bold phrase, creating an outline with 40 H2s.
• Page builders outputting all headings as H2 or as styled <div> elements.

In WordPress#

Use the Heading block’s level picker (H2, H3…) and the List block’s ordered/unordered toggle. In this theme, H2 and H3 headings automatically build the article’s “On this page” table of contents with jump links — another reason to structure them carefully.