pencilCake pencilCake - 6 months ago 14
HTML Question

What are the benefits of using semantic HTML?

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

Thanks

Answer

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 you can apply styles intelligently, and any program that reads your content - browsers, screen readers, whatever - can have content-appropriate rules. For example:
    • "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 has a small screen and good eyesight, and has asked me to make paragraphs small so that lots of them fit on a page."
    • "My user doesn't care about footnotes and never wants to see 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.