Semantic Markup

Semantic Markup refers to marking up documents in ways that provide information about the content itself rather than information about the visual styling of the content. It is critical to ensure that assistive technology users can understand your document.

Related terms







Illustration: Two document windows are side by side, showing a representation of semantic markup that provides content information for assistive technology users.
Illustration: Two document windows are side by side, showing a representation of semantic markup that provides content information for assistive technology users.

Long definition

Semantic markup refers to marking up a document with information about the actual data structure behind the information, rather than styling the document with exclusively visual information.

In the case of HTML, for example, this means using heading tags instead of just changing the size of the font. This allows assistive technology to know that the information is a heading, and correctly communicate that information to users.

Similarly, another example is using heading levels (H1, H2, H3, etc.) in a meaningful way so that it’s possible to know what a main heading is compared to a subheading, rather than communicating this information via visual-only changes like font size or type. Using CSS, it is possible (and a best practice) to use only semantic information (headings, lists, block quotes, emphasis, etc.) in the HTML itself, and then use CSS rules to define the visual styling of these tags.

As a side note, these practices are also considered best-practice for search engine optimization (SEO) purposes. A search engine’s crawlers will attempt to “see” the document itself and identify visual structure but much prefer to engage with semantic markup to understand the context of the document.

Learn more