Semantic Markup
Semantic markup or as I call it “Descriptive markup” is another word for HTML5 markup that describes to developers and machines what the code contains.
Back in the days before HTML5 everything was made using divs and spans. This made it really hard for accessibility software and machines to interpret websites. Guessing sections such as the navigation would be done by locating a bunch of links in the same place, but today it is different. Usually the main navigation of a website will be wrapped in a header tag and then be located inside the nav tag which signals that a navigation is present. Now instead of having to guess the content, machines can simply look for the appropriate tags. It ensures better crawling results, that your website gets interpreted the way you want it, and that software such as screen readers are able to create a pleasant user experience.
What is semantic markup?
Semantic markup is the new way for HTML to describe its content. Before layouts would be built using divs and spans which doesn’t describe what type of content is inside. the new standard instead makes use of tags such as header, main, footer, section, article, nav, etc. all of these tags helps machines and developers to understand the code.
Machines such as bots and screen readers are not able to see what you see on the screen. Instead they read the source code and from that they should be able to understand your content.
You can read more about HTML5 on W3.
Important part of sustainable web design
It doesn’t take much to get started with semantic markup, and even just implementing a few tags into your code can make a significant difference to machines and software. If you want to get started you can begin by implementing a few tags first to separate the header from your main content and your footer. This will point technology in the right directions and make a big difference.
Making it easier for machines to understand your content is an important part of sustainable web design. We need to make it easier for everyone to access information on the internet, and by making it easier for machines and software to understand our code we help all those people using technology to surf the web. A screen reader would for example only be able to list the links in your navigation if it was made using divs and spans, but with correct semantic markup it will be able to tell that it’s the navigation. If you couldn’t see anything and had to navigate using your voice, then it would make your job much easier knowing when you are tabbing through the main navigation or the content.
If you would like to learn more about semantic markup and accessibility, then chapter 7 and 13 in the book Sustainable Web Design In 20 Lessons will be able to explain further.
