Semantic HTML and the Structure a Beautiful Page Needs

October 14, 2026

Web Design

3 Minutes

A heading can look like a heading without being marked as one. A link can look like a button while doing something different. These details are invisible in a design mockup, but they affect how the page works.

Semantic HTML gives content and controls an explicit role. I think of it as the structure underneath the visual voice.

Choose the element for the job

MDN explains how headings and landmarks help people and assistive technologies navigate a document. A heading's level describes its place in the content hierarchy; its font size is a separate styling decision.

This means you can give a page a clear main heading without enlarging it or changing the layout. The markup and the visual treatment can be adjusted independently.

Links navigate to resources. Buttons perform actions. Using the appropriate native element provides behaviour that a decorative container does not automatically have, including relevant keyboard interaction.

For a page containing navigation, main content and a footer, meaningful structure also helps identify those areas. The aim is to make the page's organisation understandable beyond its appearance.

Good HTML does not replace accessible content and testing. It provides a useful foundation.

Appearance and meaning are separate. Heading role: The content hierarchy. Type size: A styling choice. Link: Navigates to a resource. Button: Performs an action

Outline the page before styling it

Take a fictional filmmaker's portfolio. Its main heading names the work presented. A section heading introduces selected films. Individual film titles sit beneath that section. Another section contains information about commissions.

Read that outline without the images. Does it still describe the page? If every film title is marked as the highest level heading merely because it uses large typography, the structure may not reflect the content.

Now inspect the controls. A film card that takes the visitor to a film page should be a link. A control that opens a menu should behave as a button and communicate its state. A play control needs an understandable name.

Do not rely on a decorative arrow as the only explanation of what happens. Its visual style can remain minimal while the control still has an accessible name.

For our example, I would also keep the order of the underlying content consistent with the order someone is expected to read. Rearranging everything visually can leave keyboard and screen reader navigation following a different story.

Read the page as an outline. Main title: What the page is about. Sections: The major content groups. Subsections: Material within each group. Controls: Names that explain the action

Audit without flattening the design

Start with the heading outline, then inspect the page's major regions and interactive elements. Check whether their roles match their jobs. Navigate with a keyboard and look for visible focus.

If a prominent title needs to become the main heading, retain its existing class and styling where appropriate. A semantic correction should not automatically become a visual redesign.

Check repeated components too. A portfolio card reused across twenty pages can carry the same structural mistake everywhere. Fixing the component may be more useful than manually correcting one instance.

I would review actual CMS content at the same time. Long titles, missing summaries and empty image descriptions can reveal weaknesses a sample page concealed.

The final test is the rendered website, not the appearance of tags in an editor. Can someone understand the sections, reach the controls and predict what a link will do?

Semantic structure is not decoration for search engines. It is part of making the page a coherent document. When it is done carefully, visitors can experience the design through different routes while still finding the same work.