Semantic HTML as a shared description of the page

By Gyata Tabiri · Revised October 30, 2026

Choosing HTML is partly a communication decision. The structure should describe the content well enough for the browser, assistive technology, and another developer to work from the same understanding.

Describe the relationship

A heading introduces a section. A list groups related items. A label identifies a control. A table represents data with relationships across rows and columns. Choose the element because that description fits the content, then style it to suit the visual design.

Keep neutral containers where they belong

A div or span is appropriate when grouping or styling does not need a more specific meaning. Replacing every div with a section does not automatically improve a page. Structure should clarify the document rather than create a collection of unnecessary landmarks.

Separate semantics from promises

Good markup supports a readable, navigable page. It does not guarantee accessibility, search rankings, or conversion results. Those outcomes depend on more than the tags: content, behavior, visual treatment, and testing still matter.

Make review concrete

Read the headings on their own, inspect control names, and follow the reading order. Then test the actual task. The useful question is whether the document and the interaction tell the same story. A maintainer should be able to explain why the structure exists without relying on a screenshot.

A clear document gives design and development something stable to discuss. It becomes easier to change the layout while preserving what the content means and how a person moves through it.

Web development work · Discuss a role or project

Reference: HTML sections.