Is there really a benefit to using HTML5 tags?

[mmcgu1966]

granted, the HTML5 doctag, meta, and other refinements are a godsend, but is there really an advantage to using <nav>, <section>, <header>, and the other tags over just making everything a < div> or < span > ?
I do notice, though, that a closing <section> tag will close any errent < div > tags in it, so maybe that’s enough

[__]

There are lots of discussions on this topic to be found across the internet.

tl;dr: there’s no reason not to, and semantics have other benefits depending on the specific circumstances (script/styling hooks, etc.). Even makes reading/writing the markup easier, IME.

edit
I don’t mean to sound dismissive; hope I didn’t come off that way. As implied by other responses (below), at this point, many benefits are either yet-to-be-realized and/or specific to implementations/ implementors. In general, it’s kinda hard to summarize, but a specific topic/ aspect might be a pretty good conversation.

[Alen]

Use those tags if you’re trying to enrich the semantic content of the document. A div is meaningless. A nav is given well-defined meaning.

[Senff]

Also, think of future implementations.

Right now, a browser doesn’t really “see” the difference between <div class="header-1"> and <header class="header-1">. But IE15 may have an implementation that there will be a difference between those two, and that the first one will be treated as a “normal” block, and the second one will be treated as an actual header.

Maybe it will become a standard that <header> tags will do [insert possibility here] or that they will always [insert other possibility here].

[nixnerd]

If the only benefit is clean markup… I’ll still use them. There doesn’t need to be any additional benefit for me. There’s nothing better than maintainable code. However, I think there is sufficient evidence that it does make markup more semantic as far as search engines are concerned.

[Paulie_D]

I think there is sufficient evidence that it does make markup more semantic as far as search engines are concerned.

And readable to us mere mortals.

As someone who uses “inspect element” a lot here…the use of ‘proper’ tags rather than divs makes it much easier to navigate source HTML.

[nixnerd]

This is a great quote from Phil Karlton:

“There are only two hard problems in Computer Science: Cache invalidation and naming things.”

Standard names for standard things are always good, as long as they do not limit developers or the end user. HTML5 tags do not.

[mmcgu1966]

Actually, I totally agree with the READABILITY argument, it just seems like a lot of work for that benefit. Senff probably has the best answer though, we create the web pages now and in the future, browsers and other devices will make use of that.

[__]

Senff probably has the best answer though, we create the web pages now and in the future, browsers and other devices will make use of that.

There’s no reason to wait: you can make use of it now. Semantic elements are very useful as script/ styling hooks. That’s basically how stuff like Angular works. Web Components are the way forward, baby.

[valimai]

One thing I notice about it is that not all html5 input are supported in all browsers i.e., chrome, IE, Firefox, Opera and Safari. IE have poor input support in html5.

[nixnerd]

IE have poor input support in html5.

Or just in general. Placeholders don’t have great support in IE. But… that’s what modernizr is for ;)

[Paulie_D]

I totally agree with the READABILITY argument, it just seems like a lot of work for that benefit

Can’t say I’d ever considered it as a “lot of work”.

Actually, in most cases it’s just a matter of switching thinking.

Instead of creating

div class="header/footer/main-content/sidebar/whatever/main-menu">

I’m rolling with

<header>
<footer>
<main>
<aside>
<section>
<nav>

It’s second nature after a very short while…you’re doing it anyway when creating your class names so it’s certainly no extra work…IMO.

[Author]

Posts