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...

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...

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)

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: