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

You might find that separation of your data from the presentation of your data will help your performance as a programmer. What I mean by this is that eventually you will want to display your data differently. When that day comes, you do not want to have your data mixed in with formatting. You want your data to be pure, so that all you have do do is adjust the formatting, not the data.

In terms of HTML and CSS, you want only to have to adjust the CSS, and leave the HTML alone.

As for performance of, say, whatever is rendering your HTML/CSS, proper separation of data and formatting can make your HTML smaller.

Answer 2

If you write semantic HTML each element of your page contains it's own meaning. It's good for search pages, for screen readers, for desktop & mobile browsers. And for you too. For example you can write styles only for tags. Check this example: awsm.css.

Answer 3

Many people think performance is a measure of the speed of which something executes. In Linus Torvald's presentation on git (on youtube), he argues that performance is more than that. Performance is also about usefulness. I think my car is a performance vehicle because it uses less fuel. A website that is difficult to use may be fast to download but performs its task poorly.

The argument that semantics on the web increases efficiency because CSS and js files are cached isn't a solid one. It's possible to build a website with a very small footprint that is not, at all semantic. But most of the time, if you're thoughtful and you say what you mean (semantics), then you'll probably increase general performance because you're being efficient anyway! Saying what you mean is the best answer most of the time.

A lot people believe you should never deviate from the semantic web. This particular discipline/rule should never be broken and to do so invites severe criticism or ridicule. This is hardly practical, given the wide range of situations and uses in which your application may exist. Sometimes, it is more intelligent to be flexible.

Finally, there are no absolute semantics. I would consider a table cell to be a column in some circumstances. And how different are the terms strong and bold? Can you really argue that "strong" should always be used? "Bold" has an equally clear meaning most of the time. Of course "emphasis" and "italic" are different. "Italic" is the implementation of "emphasis". If you're semantic to the extreme, you may end up spending a lot of time and effort enforcing rules and less time getting things done. Plus, you'll end up being a grump!

Hope that helps!

Answer 4

Easier for you and other developers to know whats going on, reads better when CSS et al is not available. "Can" work better when using a screen reader so improves your accessiblity. More importantly I think is it gets you in the habit of writing better mark up which is more likely to validate without having to do too many fixes. Simply put its good practise but I would say don't get too hung up on getting 100% right all the time, brain power is better spend on other problems than arguing over weather a dl is better than a ul for a given problem etc.

Answer 5

Clear Code is More Maintainable

Besides benefits to the user, semantic HTML makes more sense to humans: you and your colleagues.

If you were coding JavaScript, would you write functions like this?

dothething(q);
CmtFn(x);

...or like this?

loadUserData(username);
parseComments(language);

If you said #2 is better, well, the same principle applies to HTML. Labeling things clearly, indenting code properly, etc makes your code easier to maintain.

Answer 6

In addition to all of these answers, semantic HTML improves your search ranking (see SEO). Google and other search engines look for certain semantic pieces of your page and use them to do a lot of the ranking.