HTML5: Semantics for Accessibility
Deeply understand the structure and essence of Semantic HTML
HTML, unpopularly known as HyperText Markup Language is the structure of the web. Basically a set of rules that tell the various web browsers how to interpret code and display it on web pages. Version 5 defines a series of new elements (tags) that can be used to define content for the web. As well as a range of standard JavaScript APIs for browsers to implement natively. Most developers agree that this new version has some improved website capabilities making it more interactive and dynamic.
In this article, we will do a breakdown of the HTML5 boilerplate to understand the importance of some overlooked tags. As well as discuss some semantic elements and their role in achieving accessibility.
Boilerplate Breakdown
A popular initial setup that defines the structure of an HTML document. Thanks to some extensions in code editors, a lot of us are just used to typing an exclamation mark followed by the tab key and the boilerplate is produced. Due to this, much attention isn't paid to the content of the boilerplate. Especially to understand what the various tags stand for.
DocType
The presence of <!DOCTYPE>
is essentially how a page announces that it adheres to the HTML5 standard. Without it browsers like Firefox and IE (of blessed memory) will lapse into quirks mode. Now, because quirks modes differ across browsers, developers may be shocked to see their web pages display inconsistently on different browsers.
Quirks mode or compatibility mode means your page is running without a document type declared.
Font sizes could become different, layouts may be scrambled and some other glitches. On the other hand, once added, the browser recognizes that you want to use the stricter standards mode. This ensures that your web page is displayed with consistent formatting and layout on as many browsers as possible.
The Language
It’s helpful for search engines that you indicate the language of your website's content. This is done with the use of the lang attribute. On the <html>
element, which is the root and container for all other elements. Takes a value of the appropriate language code, such as "en" for English, "es" for Spanish, "fr" for French etc. This information helps search engines to filter search results so they return only pages that match a searcher’s language.
Character Encoding
charset="UT-8" is shorthand for Character Set = Unicode Transformation Format-8. The character encoding is the standard that tells a computer how to convert your text into a sequence of bytes when it’s stored in a file—and how to convert it back again when the file is opened. Though there are different character encodings in the world, UTF-8 character set covers almost all of the characters and symbols. The charset is an attribute of the <meta>
tag that defines metadata about an HTML document and is found within the <head>
element. Fast, compact and supports all the non-English characters
Adding Stylesheet
If HTML is a noun, CSS is an adjective for its beautification. CSS adds the designer's touch, which makes it go hand in hand with HTML most times. You specify the style sheets you want to use by adding <link>
elements in the <head>
section of an HTML5 document, like this:
Adding JavaScript
The two most popular positions for external javascript are: in the <head>
element and at the bottom of the <body>
element. There are a lot of developers who'll defend the former. Personally, I'm for the latter. The reason is that it may take a while to load the script and hence slow down the loading of the page. This makes it safer to link your script at the bottom of the page if you care about speed.
Semantic Elements for Accessibility
When building for the web, you must ensure that your application is accessible to all users. Including those who require assistive technologies such as screen readers to navigate a website. Semantic HTML is a step toward good accessibility practices and HTML5’s elements make this possible. These are the basic elements for structuring a web page right:
Element | Description |
<header> | represents information that starts a web page, usually contains the nav tag |
<nav> | represents a collection of navigational links on a web page eg. About, Home etc |
<main> | wraps around the main content of a web page, in between the header and footer |
<aside> | defines some content aside from the content it is placed in. Usually used for sidebars |
<section> | an all-purpose container for structuring web content in sections |
<footer> | represents information that's reserved for the bottom of the page |
Interestingly, the time it takes to write semantic HTML is the same as that for non-semantic (bad) markup. It's all about making an effort to structure your project right with the proper labelling of your code. The benefits of semantic markup are beyond accessibility:
- Easier to develop with — comes with some free functionality, and is generally easier to understand.
- Better on mobile — semantic HTML is easier to make responsive for different screen sizes. Its file sizes have been found to be lighter than non-semantic spaghetti code.
- Good for SEO — your web page will have a higher chance of being found by customers because search engines prioritize keywords inside headings, links, etc. than those in non-semantic
<div>
s etc.
Notable Mentions:
<mark>
: highlights a text,<time>
: defines time and date,<audio>
: contains sound content,<video>
: contains video content,<embed>
: defines external resources,<canvas>
: renders graphics,<progress>
: shows progress bar
Conclusion
As the basics of the web, HTML5 is far more interesting than we're made to believe. It entails a whole new dimension of depth and functionalities. From the boilerplate to semantic elements, it's all carefully planned to produce best practices for 'web-loving' developers. Most importantly, it helps to make the web inclusive by making it easily accessible to a wide range of people with diverse abilities.
Thanks for reading 👋🏾. I hope you found this helpful.
Let’s connect on Twitter or Linkedin