What's the use of some HTML5 tags?

I guess I'm stupid but I don't see what is the reason behind some new HTML5 tags.

Some tags, like <audio> and <canvas> provide some great new functionalities to the browser, but others such as <article>, <section> etc. just show up as a <div> or <span>. Therefore, why have these tags been added to HTML5?

I made this jsfiddle: http://jsfiddle.net/6BHAM/. In Chrome at least, there is no exciting layout or whatever. One could just use <span> / <div>.

So what's the use of those HTML5 tags which do开发者_如何学运维n't add new functionality?

The semantics behind the tags are much more important than the resulting layout by a browser. HTML is not only parsed by a browser, it can also be parsed by a web crawler or accessibility tools such as a screen reader. A screen reader may add a particular emphasis for a certain tag used, or a web crawler could choose some content over others for the meta data it stores.

Further reading:

• Semantic HTML - Wikipedia
• Semantic HTML and Search Engine Optimization - dev.opera.com

The idea is to make the HTML code more understandable as it was not created only for graphical rendering.

Using tags such as article or section make the HTML reading easier, and it also help you styling your page because you can use a different css for article than others div without adding a special class or id.

The idea is that HTML would allow more to give the semantic meaning of the encapsulated test rather than how it should be rendered.

This allows a cleaner separation of content structuring and content presentation.

And it's best practice for SEO. robots will shearch and reference first in article before search in nav or aside area.

HTML's purpose is to describe what a document means as opposed to what it looks like. The extensions are helpful to this end.

The reason is we are moving to a Semantic Web. This is to help allow machines to understand the context of the information presented in a webpage.

The w3c defines a <div> as semantically meaningless and generic.

The DIV and SPAN elements, in conjunction with the id and class attributes, offer a generic mechanism for adding structure to documents. These elements define content to be inline (SPAN) or block-level (DIV) but impose no other presentational idioms on the content.

Now see the specification for <article>:

The article element represents a self-contained composition in a document, page, application, or site and that is, in principle, independently distributable or reusable, e.g. in syndication. This could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.