What is Semantic HTML?
HTML is a markup language used to write Web Pages. HTML has evolved a lot since its
inception, there are a lot more tags and properties now than before.
Semantic HTML is nothing but writing the Markup in a way that it conveys some
meaning about the page. These are some of the Semantic Tags in HTML5
<article>
<aside>
<details>
<figcaption>
<figure>
<footer>
<header>
<main>
<mark>
<nav>
<section>
<summary>
<time>
As you might notice, a <section>
gives a lot more meaning to a
“section” of a website rather than just dumping it all in <div>
.
Like <section>
, it makes more sense to use
<aricle>
when displaying blogs or actual articles rather than using
<span>
and <div>
But why does it matter?
So you must be wondering, why make an effort. Well, simply because it will reward you.
You see, the biggest advantage of writing Semantic HTML for you is SEO. Your users
are also benefited, the screen readers for blind people make sense of the content through these
tags which are self explanatory to an extent. For example, an image that had its caption in a
<span>
would be ignored whereas if <figcaption>
was
used, it would be recognised.
As far as SEO goes, the crawlers understand these Semantic Tags and make sense of
the intent of the page. Because of that the pages where you use semantic HTML get a better
ranking.
Conclusion
Using Semantic HTML where the content can be structured will have fair advantage in
page rankings and also provide a better experience to your users.
Bottom line, you should use Semantic HTML where it makes sense.