What are the benefits of using semantic HTML?
semantic HTML and performance
Semantic HTML is not only using the right tags for the right purposes which obviously improves SEO, but also the separation of markup (HTML), style (CSS) and scripts (JS). The separation will not only improve maintenance, but certainly also improve download performance as you usually cache CSS/JS files. If you clutter the HTML file with all raw CSS/JS code and/or are using style instead of id or class, it would only make the HTML page unnecessarily bigger and it would take longer time to haul it in.
Semantic code uses html elements for their given purpose. Well structured HTML will have semantic meaning for a wide range of users and user agents (browsers without style sheets, text browsers, PDAs, search engines etc.)
Benefits
The two points mentioned earlier are the basic benefits of using semantic code. If we use globally known tags, others understand without any additional effort. Any software program that uses the globally known tags will not be able to understand our page.
A working example of this is that search engines weigh keyword importance according to what they are. For example, and article title enclosed in one of the headings (h1 and its hierarchy) would get higher importance and hence visibility than spans. Semantic HTML enables effective Search Engine Optimization (SEO).
The semantic data extractor of W3C is a good demonstration of the possibilities of using Semantic HTML and software automation.
A side effect of excluding presentational information from the semantic markup is that now data and its presentation can be decoupled in implementation. Which means that you can change presentation without touching the data, or apply the presentation to multiple types of data. This is exactly what technologies like CSS and XHTML together achieve. Of course Semantic HTML is not necessary for this decoupling, but provides for by being semantic it enforces exclusion of presentational information.
http://www.seoblogger.co.uk/serps/the-benefits-of-using-semantic-code.html
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.