What are the benefits of using semantic HTML?

Question

Are there some noticeable outcomes in terms of performance or other aspects to follow semantic HTML?

Thanks

Answer 1

Not about performance

Semantic markup isn't about performance, it's about meaning.

Let's imagine two parallel universes.

• In Dumb HTML World, there is only one tag: <thing>. How would you specify where styles should be applied? How would browsers know how to render the page? How would screen readers for the blind differentiate between headlines and text and footnotes and menu items? You'd have to add all kinds of awkward attributes.
• Meanwhile, in Detailed HTML World, there are loads of names. You've got <header> and <footer> and <article> and <caption> and <menu> and <paragraph> and <footnote>, etc. Now a user agent (a browser or screen reader) can make reasonable assumptions about how to style those, or make them interactive, or read them aloud. For example, a browser will make <button>s look clickable and will enable moving between them with the tab key, whereas if you use a <div class="button">, it won't know to do that. A screen reader might give more priority to reading the <p>s than the <aside>s.

If you want to override the user agent's default treatment of an element, or if a user agent is set to do so, it's easier to target specific kinds of content. For example:

• "My site is about jewelry, so I want list bullets to appear as diamonds."
• "My user is blind, so I should announce that there are images, offer to read the associated captions, and not bother downloading the actual image data."
• "My user doesn't care about footnotes and wants to ignore them."

The real world is somewhere between these two scenarios.

Some aspects of semantic HTML are a bit idealistic, but the principle is sound. For example, using <strong> instead of <b> conveys "this text is important" and not necessarily "this text should be bold." Maybe your user wants important text to be highlighted orange. That's up to them.

The point is, HTML is markup, which is about labeling things usefully. Semantic HTML is what all HTML should be: useful, meaningful labels.

Making your site load quickly is a different question altogether.

(See also: my answer here.)

---

Addendum - evolving towards semantic HTML

I think it's natural for HTML to become more semantic over time.

Back in Dumb HTML world, they'd probably end up with crazy markup, like <thing type='list'>, and <thing render='image'>. Web coders would complain, "hey, we do this all the time. Why not just have an <image> tag? It would make our lives easier."

In the real world, people are constantly coding things like <div id='nav'> and <div class='article'>. So it makes sense to create new elements, like <nav> and <article> and <section>. Which is what the draft HTML5 specs would do.

Answer 2

Non-semantic markup risks being inaccessible for those with disabilities, for a start. Read Nicholas C. Zakas's recent article about this topic; I think it's a great introduction to the subject.

And bear in mind that a search engine such as Google sees your site in much the same way as the assistive technology used by a disabled person. The Googlebot neither knows nor cares that something has rounded corners and a pretty blue background, but it makes a great difference if it knows that it's an <h1> and not just any old <div>.