HTML5 elements pointless?

Question

Don't kill me just yet, I'm asking out of pure curiosity.

Elements like <section>, <nav>, <article>, <aside> etc all seem completely pointless. Sure they make everything have its own little place (and seo'd)... But it IS possible to over-organize things. There are some cases where things don't fit in any of the categories too. It also increases time spent trying to code these things... I just don't see any real purpose for moving to add these new elements. What do we (developers and people who view the webpages alike) have to gain from adding them?

Answer 1

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.

Answer 2

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.

Answer 3

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.

Answer 4

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; }

Answer 5

Allowing heading scope is the main benefit. See http://diveintohtml5.org/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.

Answer 6

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.