Are new HTML5 elements like <section> and <article> pointless? [closed]

These elements are important for things like screen readers for the blind and eBook readers like Kindle. It helps them know what to show/read and when.

Have read of this article, as it points out various advantages such as:

There are several advantages to using these elements. When used in conjunction with the heading elements (h1 to h6), all of these provide a way to mark up nested sections with heading levels, beyond the six levels possible with previous versions of HTML.

and

By identifying the purpose of sections in the page using specific sectioning elements, assistive technology can help the user to more easily navigate the page. For example, they can easily skip over the navigation section or quickly jump from one article to the next without the need for authors to provide skip links. Authors also benefit because replacing many of the divs in the document with one of several distinct elements can help make the source code clearer and easier to author.

HTML5 styled CSS is also somewhat easier to read:

div#header div#content .article div#content .article h1 div#content .article h1+h2 div#footer 

vs

header section#content section#content article section#content article hgroup h1 section#content article hgroup h2 footer 

(not using advanced selector)

And as keyboardP hinted through the quote it is easier to navigate a page for non human vistors. It adds semantics. But I do agree with you, that sometimes it can be hard to figure out which element to use section, article or good old div. IMO, this makes the semantic less strong. But lets see what happens.

It's all about semantics!

But I agree with you that to some people these new may tags seem pointless. A frequently asked question is why these particular tags and not any others were chosen, especially as some of the tags are very blog specific (article, section etc) but didn't include other commonly used names, such as product or content. As you can see in the comments below, it's a hotly debated topic!

So for using these new tags it really depends on how you write your markup, and there is no right or wrong way for how go about it. Take lists for example, you may use them for your navigation and not want them styled and also use them in your main content and need them styled. You could either add extra classes to specify which lists are styled or you could use your markup and target styles from the tags alone:

 <nav> <ul> <li><a href="">Nav item 1</a></li> <li><a href="">Nav item 2</a></li> </ul> </nav> <div> <ul> <li><a href="">List item 1</a><li> <li><a href="">List item 1</a></li> <ul> </div> 

and in your CSS:

 ul { list-style: bullet } nav ul { list-style: none; } 

ok, which one sounds more productive and easy to read:

 <div id="nav">list of links</div> <div id=header> <div id=section>content is good </div> </div> <div id=footer>copyright</div> 

vs

 <nav>list of links</nav> <header> <section>content is good</section> </header> <footer>copyright</footer> 

It would be so much easier to scan for section and header and dialog in the midst of DIV junkyard. It also improves accessibility for the blind since would clearly tell the screenreader what it is. Same with article tag. Additionally, it improves structure and provide more meaning to the tags.

Some web browsers don't support CSS styling on unknown elements and to me, that's incredibly shortsighted.

I think the great failing of HTML semantic divisions such as is that the code to make these work in the real world involves multiple statements to cope with the actual browsers that are in use by real people. The examples given above aren't real and, in any case, to read the html5 code you have to recall that a footer is a kind of div. Just calling it a div and giving it a descriptive ID seems to me to be far clearer, even if we forget about the multiple statements that you'll actually need (really, you will. For several years). Here's an idea. Make the semantic div IDs attributes, like 'title=' and so on - let the modern browsers and screen readers use this info to identify sections, asides and so on and the code will be cleaner. Don't stop calling a div a div, because you can't install new browsers for the whole planet.

<div id ="footer" class="someclass someotherclass" semantic="footer">You, the screen readers and all browsers know this is a div</div> 

Allowing heading scope is the main benefit of <section> and <article>. See http://diveintohtml5.info/semantics.html#header-element.

Briefly: in HTML5, it’s much easier to mark up an outline of your document (which is useful for screen readers) without worrying about whether to use <h2> or <h3> or whatever (which gets really complicated when you include components in different places on different pages).

They couldn’t have done that with <div>s, because there are billions of web pages that have used <div>s and headings already, without necessarily intending heading scope.

Admittedly, <section> and <hgroup> would have been sufficient for this purpose.

The visual benefit of using the new HTML5 markup tags might be hidden from users but users may unwittingly benefit because these tags may have provided them with a better search result. I think once HTML5 becomes a standard the usage of these markup tags will become extremely important for your sites SEO.