Semantic HTML: Why good HTML code matters for people and machines

What sounds self-evident is by no means always self-evident on websites. Because for almost every element of a website, there are different ways to implement it technically.

Semantic HTML ensures that the source code doesn't just say how something is displayed, but also what it means.

This helps people using assistive technologies, search engines, and increasingly automated systems understand a website better.

What does "semantic" mean?

Put simply, semantics means: meaning.

HTML provides numerous elements whose meaning is already clearly defined.

For example:

From this, a browser can recognize:

• <h1> is the page's main heading,
• <nav> contains a navigation,
• <main> contains the main content, and
• <footer> marks the footer area.

This information exists independently of how the individual areas are later styled with CSS.

A website can look identical yet be technically completely different

This can be shown especially well with a button.

You could, for example, code a clickable area like this:

With CSS, this element can easily be made to look like a button.

Technically, though, it's initially just a <div> – a generic container without the meaning "button".

Better is:

To a sighted visitor, both variants can look nearly identical. For the browser, however, there's a crucial difference.

With the second variant, it's unambiguous:

This is a button.

The browser also already knows important properties of a button, such as its behavior under keyboard operation.

HTML describes the structure of a page

Semantic HTML isn't just about buttons. It helps structure the entire website in a meaningful way.

Typical semantic HTML elements include, for example:

Headings belong here too:

As do elements like:

A cleanly structured article might, in simplified form, look like this:

The structure of the content can already be recognized from the HTML code alone.

Headings are more than just large text

A common mistake is defining headings only by their appearance.

For example:

To a person, this might look like a heading.

Technically, though, it isn't one.

Semantically, this would be better:

How large, bold, or colored this heading appears is then decided by CSS.

This illustrates an important principle:

HTML describes meaning. CSS describes presentation.

Why does semantic HTML matter for accessibility?

Assistive technologies like screen readers depend on being able to recognize the meaning of elements.

A screen reader might, for example, tell a user:

This means the website isn't just read aloud. The user receives information about its structure and can navigate purposefully through headings, links, forms, or other sections.

Semantic HTML forms an important foundation for this.

The accessibility tree

Browsers create a special representation of the website for assistive technologies: the accessibility tree.

Much of the information that's only needed for layout becomes less important here. Instead, the focus is on the meaning, name, and state of elements.

A large HTML page might, in simplified form, produce a structure like this:

The cleaner the HTML structure, the more precise this semantic representation can become. We explain exactly what this semantic representation looks like in our article "What Is the Accessibility Tree? The Invisible Structure of a Website".

So what do you need ARIA for, then?

This is where semantic HTML and ARIA complement each other.

The most important rule is:

If HTML can already express the meaning you need, use the corresponding HTML element.

ARIA comes into play especially where additional information is required.

A button that opens a menu, for example, is already clearly defined as a button through HTML alone:

What's still missing, though, is one piece of information: is the menu currently open or closed?

This is where ARIA can add to it:

Semantic HTML says:

This is a button.

ARIA adds:

The section associated with it is currently closed.

That's exactly why ARIA shouldn't be understood as a replacement for good HTML, but as a complement to it.

We explain more about this in our article "What Is ARIA? Accessible Websites, Explained Simply".

Semantic HTML helps search engines too

Search engines benefit from a clearly structured website too.

Headings, links, navigations, main content, articles, and other semantic elements provide clues about how content is structured and what function individual sections serve.

Semantic HTML has therefore long been part of technically sound search engine optimization.

That said, you shouldn't infer a direct ranking guarantee from this. A website doesn't automatically get better Google rankings just because it uses <article> instead of <div>, for example.

The real benefit lies in a clear, standardized structure instead.

Semantic HTML and Schema.org are not the same thing

These two techniques are occasionally confused as well.

Semantic HTML mainly describes the structure and function within a web page:

• This is a heading.
• This is a navigation.
• This is an article.
• This is a button.

Structured data based on Schema.org, by contrast, can provide additional information about the meaning of content and entities:

• This is a company.
• This is a person.
• This person works for this company.
• This is a job posting from this company.
• This article was written by this person.

Both approaches complement each other.

A modern website can therefore use semantic HTML, ARIA, and Schema.org structured data all at once.

Why AI agents make this topic even more relevant

Websites are no longer used exclusively by people and classic search engines.

AI agents can visit web pages, search for information, select links, operate forms, or carry out other actions.

To do this, they need to understand which elements of a website serve which function.

A system can, for example, work far better with information like

than with purely visual information like:

Browser-based AI agents can therefore use semantic information and accessibility structures, among other things, to understand and operate web pages.

That doesn't mean semantic HTML is a new "AI SEO technique".

But it does show that one principle of the web is becoming especially relevant again:

The more clearly a website describes its content and functions, the more easily both people and machines can work with it.

Semantic HTML in TYPO3

On a TYPO3 website, a large part of the HTML code is generated automatically by templates, content elements, and extensions.

This means a significant share of the responsibility lies with the website's technical implementation.

A TYPO3 agency should, for example, make sure that:

Editors contribute to this too. A sensible heading hierarchy, understandable link text, and suitable alt text for images are especially important, for example.

Conclusion

Semantic HTML means that the HTML code doesn't just enable a website's appearance, but describes the meaning of its content and functions.

A button should therefore be a <button>, a heading a real heading, and a navigation recognizable as such.

This is an important foundation for accessible websites and makes it easier for browsers, search engines, and other automated systems to understand a page.

Semantic HTML creates the foundation. ARIA adds to it wherever HTML alone doesn't provide enough information.

The two topics are therefore directly connected – and together form an important building block of a technically clean, accessible, and machine-readable website.