Why You Should Use Semantic Elements Even If They Add No Visual Effect To Your Web Page.

Wouldn’t it be easier if, for our HTML tags, we had to focus on only <div>
’s and <span>
’s rather than considering the various HTML5 tags like <article>
and <section>
? Well, allow me to share an experience that will surely tweak that thought.

On one of my regular walks on the internet, at a time when HTML5 was just a new kid on the block, I happened to eave’s drop(in a good way) on an interesting argument between HTML5 and HTML4.01.

N.B: Eave’s dropping is bad for your health.

. . .

HTML5: Ah, my old pal, HTML4.01. You had a good run, but now I’m here.

HTML4.01: A good run? Take a look at the Web; it is still a sea of "HTML4.01".

HTML5: I’m just getting started.

HTML4.01: Yeah? And how are those new elements going? I haven’t seen many of them out there.

HTML5: Sure, people are beginning to use them. Remember, they aren’t going to change the world, they just make explicit what web developers have been doing all along.

HTML4.01: How is

<p>

not explicit? Hello? That’s a paragraph. Can't get more explicit than that.

HTML5: I’m thinking more about

<div>

here…

HTML4.01: There’s nothing wrong with

<div>

. Leave him alone.

HTML5: I’m not talking about getting rid of

<div>

. Yeah, he’s great for grouping content together for styling and stuff, but what if you want to, say, identify some content as an article on your page? Or break your page into sections?

HTML4.01: You know as well as I do that everyone is confused about how to use those elements, and you can do both those things with a

<div>.

HTML5: Yes, you can do it with a

<div>

, but with, say, an

<article>

element, the browser, search engines, screen readers, and your fellow web developers all know for sure that’s an article.

HTML4.01: So? It still looks the same.

HTML5: Remember, we use the right element for the job, right? That way we can communicate the most explicit structure we can, and all our tools can do the right thing.

HTML4.01: Right thing? Like what? Display it exactly the same?

HTML5: See, that is just exactly where you are wrong. Take the

<aside>

element, which is for marking up supplementary content on a page. Now on a mobile phone with limited screen space, if the browser knows that content is an

<aside>

, you might see that content pushed to the bottom so that you see more important content first. If the content is in

<div>

instead, then any number of things can happen depending on where in the HTML file the content is.

HTML4.01: I still don’t see what the big deal is.

HTML5: Now the browser can know the difference between the main content in the page and an

<aside>

. So it can treat the content in the

<aside>

differently. For instance, a search engine might prioritize the main content in the page over the content in an

<aside>

HTML4.01: Great, so with HTML5 we know how to deal with asides.

HTML5: No, no, this applies to all the new HTML markup: header, footer,
sections, articles, time, and so on.

HTML4.01: Well, I think it is about time you take that footer of yours and stuff it in...CENSORED...CENSORED...CENSORED...CENSORED…

HTML5: ...CENSORED...CENSORED...CENSORED...CENSORED…

. . .

Things got out of hand so fast, right? Hmmm, sibling fights! Anyway, have you heard of the saying “if all you have is a hammer, everything looks like a nail”? HTML5 brings more tools for us and all we have to do is choose the right tool for the job.

References:

Head First HTML/CSS

HTML Semantic Elements