I'm going through HTML5's new tags:

 

๏ Section
๏ Header
๏ Footer
๏ Aside
๏ Nav
๏ Article
๏ Main
๏ Figure/figcaption
๏ Time

 

I understand why a developer would need to know what was the header, footer, nav and main, but I do not understand why would you need meaning for the tag, because really if you can code well without it, would it be worth learning it? The website user doesn't look at the tags, they see the content, and other tags like <strong> now means "strong importance" rather than "strong emphasis", I don't get why they would want to do this, it seems very trivial to me.

 

Section rather than nav, groups thematically related content, but I don't see where you'd use that, people would probably just go back to using div.

HTML5 tags are not really there to give meaning to developers at all, although they do aid readability.

HTML5 tags are for machines so they know what this bit of markup contains. While it makes no visual difference it makes a huge difference to accessibility for the visually impaired and for SEO too.

They also give you new heading contexts allowing multiple H1s on a page.

 

I don't think they are difficult to learn at all, the only confusion devs get is with the aside tag. Section, article and nav tags are pretty self explanatory. Im sure you're written an essay before with a table of contents, generally each item in the table is a new section.

 

This stuff isn't new either, it's been the defacto standard from before I began to learn web development, in fact I've only ever written HTML5 my whole career.

Edited January 3, 201610 yr by rbrtsmith

Semantic is part of onsite SEO too. Taking the HTML5 basic tags it defines what content is part of the article and what is there for the page structure such as navigation. Coupled with microdata you can essentially draw around data and define what things are helping the search engines clearly understand the content of the page beyond simple keyword proximity.

The more specific tags in HTML5 also eliminates the need for some role attritributes like in this example.

 

XHTML:

<div role="navigation">
  <a>Link</a>
  <a>Link</a>
  <a>Link</a>
</div>

HTML5:

<nav>
  <a>Link</a>
  <a>Link</a>
  <a>Link</a>
</nav>

Edited January 3, 201610 yr by Nillervision

Tags like article don't get looked at by Google but readability is a huge point. Always use the new tags if possible.

 

Just a little note on the side:

 

 

With Polymer you can even add your own tags and give them meaning.

 

Like <googlemaps></googlemaps>

Worth noting that Polymer is just a polyfil for web components and gets transformed back into regular HTML just like with React so there's no semantic benefit to this. But thinking in terms of web components is great, they're reusable and self describing amongst other things.

 

@@pascal, do you have a source as to why you say Google doesn't read article tags? I find that hard to believe.

 

@@Nillervision good point on not needing ARIA roles on those specific tags. Of course we should still use them where there isn't a HTML5 tag to describe the content, but there is an ARIA role for it.

Edited January 3, 201610 yr by rbrtsmith