Tip 19 of 31: Use Proper Page Structure

A website can look perfectly organised on screen while the HTML beneath it provides little meaningful structure.

Using appropriate HTML elements helps browsers, assistive technologies and automated systems understand which content is a heading, list, navigation area, button or main section of the page.

What Semantic HTML Means

Semantic HTML means choosing elements that describe the purpose of the content they contain.

A heading should be marked up as a heading. A list should use list elements. A button should normally be a genuine button rather than styled text. Navigation can be identified with a nav element, and the principal content of the page should normally sit within a main element.

Visual styling alone does not communicate these relationships reliably. Making a paragraph look like a heading does not give it the same meaning or behaviour as a correctly marked-up heading.

Use a Logical Heading Hierarchy

Headings divide a page into understandable sections and help readers scan its contents. They are also used as navigation by many screen-reader users.

The main page heading should clearly describe the page. Subsections should then use heading levels that reflect their relationship to one another rather than being selected for their visual size.

For example:

<h1>Recruitment Website Design</h1><h2>What Is Included?</h2><h3>Job Board Integration</h3><h3>Candidate Registration</h3><h2>Website Plans</h2>

The visual appearance of each heading should be controlled with CSS rather than by choosing an inappropriate heading level.

Why It Matters Beyond SEO

Clear structure makes it easier for people to understand and navigate a page. This is particularly important for people using screen readers, keyboard navigation or other assistive technologies.

W3C guidance recommends using headings, landmarks and native HTML elements to communicate page regions and relationships. This helps users orient themselves and move efficiently through the content.

Semantic HTML can also give search engines and AI-assisted systems clearer information about the organisation and purpose of page elements. It does not, by itself, guarantee rankings, visibility or citations.

Semantic HTML Is Not Structured Data

Semantic HTML describes the structure and function of the page itself.

Structured data, such as Schema.org markup, provides additional machine-readable information about subjects and entities on the page, including articles, authors, organisations, products and events.

They can complement one another, but one does not replace the other. Google explains that structured data can help it understand page content and support eligible search features.

One Part of a Strong Website

One of our clients generated £45,000 in placement fees from their website in a single month.

That website combines relevant content, technical implementation, recruitment functionality and a clear user journey. Correct semantic structure is one part of that wider foundation, but the commercial result should not be attributed to page structure alone.

What to Check

Ask your developer to review the generated HTML on representative pages, including the homepage, service pages, articles, job listings and application forms.

The review should check that:

• headings describe the sections that follow and form a logical hierarchy;
• navigation, main content and supporting regions are marked up appropriately;
• buttons and links use the correct native elements;
• ordered and unordered content uses real lists;
• the page remains understandable when styles are unavailable;
• keyboard and assistive-technology testing confirms that the structure works in practice.

Automated tools such as Lighthouse, WAVE and axe can identify some issues, but manual testing is still needed because automated checks cannot determine whether every heading, label or element has been used meaningfully.

Up Next

Tip 20 of 31 explains how appropriate alt text, captions and surrounding content help make images understandable and accessible.

Frequently Asked Questions

Is semantic HTML the same as accessible HTML?

No. Semantic HTML is an important part of accessibility because it communicates the meaning and structure of content.

A fully accessible website must also consider factors such as keyboard operation, colour contrast, focus visibility, form labels, text alternatives and clear instructions.

How do I know if my website uses semantic HTML?

Inspect the generated HTML or use an accessibility testing tool.

Look for meaningful elements such as headings, main, nav, article, buttons and properly marked-up lists. A page can still use div and span elements, but they should not replace native semantic elements when a suitable element already exists.

Will fixing semantic HTML require a full rebuild?

Not necessarily. Some issues can be corrected in shared templates or components without changing the visual design.

The amount of work depends on how the website was built and whether its structure is controlled centrally or repeated manually across individual pages.

Does semantic HTML affect AI citations specifically?

Clear semantic structure can help automated systems distinguish headings, navigation, main content, lists and controls.

However, there is no guarantee that using semantic HTML will cause an AI system to surface or cite a page.

Are there tools that can check semantic structure automatically?

Yes. Automated tools such as Lighthouse, WAVE and axe can identify some structural and accessibility issues.

They cannot assess every problem, so their results should be combined with manual checks of heading order, keyboard operation, landmarks and the meaning of the content.

Darren Revell, Co-Founder, RecruiterWEB