What is semantic HTML

The icing on the cake for accessibility published in 2010

Use HTML semantically correctly

At the technical level, a valid document is a quality feature. Using HTML validators to check the technical substructure of an HTML document can reveal some errors that affect technical accessibility. At the same time, a valid document allows only very limited statements about accessibility.

In addition to defining the correct syntax, the definition of HTML also includes the Semantics of individual elements and the correct use of attributes are described. It is only when these requirements are taken into account that the access software, including tools, prepare the content in the way the specification provides.

First of all, it is important that HTML elements and attributes are used according to their purpose, because it is not only about the display of content on the screen, but also about the semantics in the source code. Whether the Document Object Model (DOM) or the interfaces for tools, it is always important that the values, statuses and roles of the content can be technically determined.

The meaning of individual HTML elements is described in the HTML specifications. The described semantics are mostly irrelevant for the visual presentation, because the "semantics" of individual elements are conveyed by numerous other properties, such as color, font size or the positioning of content. Semantics become particularly important when software analyzes the HTML and creates a user interface on the database, for example with screen readers, magnification systems or various input devices:

  • Although it sometimes seems easy to indent text using an element (most browsers indent that element), this indentation is not necessarily a quotation. An incorrect data structure is transmitted and in this case screen readers announce a quote, which is not. Of course, the same applies to the and elements, which should also not be used for indentation.
  • Another example is emulating links and controls with JavaScript. Any content can be made clickable with an attribute and the content is then used as a link or control element. Such texts are however no links or form elements in the sense of the specification, which is why the role of the content is often not correctly transmitted to further processing software. In the case of emulated links, for example, it can often be determined that they cannot be operated with the keyboard. The role of a link is transferred via the element in conjunction with an attribute and not via an event handler.

The Use of standardized interfaces is crucial for accessibility. If a checkbox is created with an element, the browser can identify the role (checkbox) and the status (activated or not activated) of the element and pass it on to the appropriate interfaces. If, on the other hand, the checkbox is integrated as a linked graphic, then the role of the element will be a link. The status of such an element (conveyed by the graphic) must then be transported, for example, by alternative texts for the graphic. Such measures can of course be undertaken, but the use of standardized elements facilitates the development work and promotes accessibility considerably.

Also others Information and their relationships to one another must be taken into account in the HTML source text so that they can also be understood if the form of presentation changes. This can be reading content without CSS (e.g. with a screen reader) or displaying it with user-defined screen settings, such as your own color schemes or font styles that overwrite the specified CSS properties, or copying the content into a word processing system. The point here is that if information or a relationship between information is displayed on the screen, then this information or relationship can always be technically determined using a browser and other software. The "classic" example is the use of heading elements to mark up headings, but lists, paragraphs, links or forms must also be marked with the intended HTML elements. Correct nesting and logical relationships must not be neglected. These aspects can usually only go through practical tests and not with one Validator to be checked.

Function bar

Printable version

recommend by email