What does semantic HTML actually do?

A lot of articles on the web talk about the importance of using semantic HTML. For example this quote from seekbrevity.com:

"Because semantic HTML uses elements for their given purpose, it’s easier for both people and machines to read and understand it."

However, despite this being common knowledge, it still seems the case that many websites seem to neglect semantic HTML in favour of using <div>s. But why is this happening?

I think it boils down to three reasons:

• Lack of awareness / training
• Limitations in tooling / frameworks
• Budget / time restrictions

Adam Silver asked a similar question on Twitter and it seems that lack of awareness is the most common reason stated by developers.

Semantic HTML elements #

To see why semantics matter, let's take a look at some HTML elements and see what benefits you get when you use them instead of a generic <div>.

Headings #

Elements: <h1>, <h2>, <h3> etc...

• Screen reader users can use shortcuts to jump forwards and backwards through page headings
• Has default styling applied if CSS fails
• Alternate styling can be set by users or apps (e.g. Safari reader mode)

Lists #

Elements: <ol>, <ul>, <dd>

• Screen reader users will be told the number of items in a list
• Screen reader users will be told the current index of a list item (e.g. 2 of 4)
• Screen reader users will be told whether an item is a subitem (using nested lists)
• Has default styling applied if CSS fails
• Alternate styling can be set by users or apps (e.g. Safari reader mode)

Regions #

Elements: <article>, <nav>, <aside> etc...

• Screen reader users can navigate through a page by using landmarks
• Reader modes (such as watchOS) can determine which content can be restyled.
• Region names can be added for screen reader users (via aria-label or aria-labelledby)

Tables #

Elements: <table>, <tr>, <td> etc...

• Screen reader users will be told about the number of rows and columns of a table
• Screen reader users can navigate across rows or columns
• Has default styling applied if CSS fails
• Alternate styling can be set by users or apps (e.g. Safari reader mode)

Forms #

Elements: <form>, <input>, <label> etc...

• Mouse users can click a label to focus the associated input
• People using speech recognition software can 'click' a label to focus the form field
• Devices can choose an appropriate keyboard to display
• Keyboard and screen reader users can interact with fields (e.g. set checkbox to checked)
• Screen readers users will be aware of form groups (if using <fieldset> and <legend>)
• Screen readers users will be aware of required and invalid data inside a field (via <required>)
• Error information can be linked to fields (via aria-describedby)
• Has default styling applied if CSS fails
• Alternate styling can be set by users or apps (e.g. Safari reader mode)

Buttons #

Element: <button>

• Can be focused by keyboard and screen reader users
• Can be made inert to users (via disabled).
• Keyboard users can use Space or Enter to 'click' a button
• Can be styled for various states (including :focus, :hover, :active, :disabled)
• Has default styling applied if CSS fails
• Alternate styling can be set by users or apps (e.g. Safari reader mode)

Links #

Element: <a>

• Can be focused by keyboard and screen reader users
• Keyboard users can use Enter 'click' a link
• Has a right click context menu (e.g. option to open in a new window)
• Can be styled for various states (including :link, :visited, :focus, :hover, :active)
• Has default styling applied if CSS fails
• Alternate styling can be set by users or apps (e.g. Safari reader mode)

How do I learn more? #

If you want to find out more about semantic HTML:

• Mozilla has a full list of HTML elements along with usage notes and examples.

• Rob Dodson has a short video on Why do semantics matter

• Manuel Matuzovic runs a site with examples of improper markup in the wild and what problems these cause. See: HTMLHell.