Word semantics comes from Ancient Greek and means “significant” and that is also true when we apply the concept into web and application context – semantics in programming refers to significance and maybe even better said “meaning” of elements that are used on a webpage.
So when looking specifically into HTML semantics we have to begin at start and define our frame that is the document. And document is represented as a Document Object, including all it’s elements in a tree-like structure.
In practice we can then see all the branches of the tree, with all it’s leaves if I may and they reflect the information.
So – if we go to a step before this DOM tree is generated we can see that each element with it’s attributes and values of attributes is being translated to a tree node, branch with leaves if you want.
There is our semantics – we can say that elements with their attributes and values of attributes have a certain meaning and this meaning is then being translated into our Document Object tree.
Elements, attributes and attribute values in HTML are defined (by HTML specification) to have certain meanings (semantics).
HTML specification (opens in new window)
For a more plastic example we can check the navigation element that is written as <nav> tag;
“Nav” itself defines a part (section) of a page that includes links, so it is tells us – look here and you will find some sort of navigation, links that you can use to navigate.
Then this “nav” tag is semantically informing us and web crawlers and screen-readers of a special part on the page that will include some sort of navigation mechanism – most likely a list or paragraphs of links.
Another example of semantic value is the <main> tag.
It is used for main content, so when we see it we know that it is holding the point of the whole document. When screen-reader can skips to it it can for example bypass the header and just jump right into the “main” content if the screen-reader user will. Or maybe a search-engine crawler – just parsing content wrapped into main should give it enough information about whole document (page).
Screen-reader users can navigate by semantic landmarks and headings
If you are a sighted user then you are used of using mouse/touch and scrolling down and getting to know the page, maybe using some table of content links on the top if the content is larger than usual and you get some sort of overall structural feeling where you can find the main points you were looking for.
Screen-reader users can not just scroll the page like this. But they have some useful tools to “filter down” whole page and for example;
- list all sections on the page, for example header, navigation, main, aside, footer,… and then move their focus into them and just start hearing the text whenever they will,
- list all headings and move their focus into them and start hearing the text whenever they will,
- list titles / descriptions of all tables / images / links / forms on the page and move their focus into them and start hearing the text whenever they will,
- etc. (there are a lot of screen-reader possibilities out there and they also differ a bit from screen-reader to screen-reader and even from their settings…
So – for screen-reader – it is crucial that semantics of the document (webpage, web application, document,…) is correct and to the standard. Only valid and semantic elements provide usefulness of screen-reader specific navigation and we must also not forget the benefits that search engines and other crawlers get when they can parse semantically valid (online) documents.
Some additional resources
- HTML standard on semantics (opens in new window),
- Mozilla Developer Network on Semantics in HTML (opens in new window),
- Mozilla Developer Network on HTML semantics for accessibility (opens in new window),
- Paciello Group on semantics and accessibility (opens in new window).
