Helping others and yourself using Semantic HTML
When I think about using semantic HTML I wonder how it would work in the real world. Imagine going to the grocery store and all the bell peppers (red, green, yellow) just being labeled “peppers”. If I was a blind man and the braille also only stated “peppers”, I would never know which one I was actually picking. If this sounds terrible to you, keep reading.
Items not being labeled properly can also occur when we write code, specifically if we wrap everything around in a div element. See below and think about how these would help someone with a screenreader for example:
Not Great
<div id="header"></div>
<div class="section">
<div class="article">
<div class="figure">
<img>
<div class="figcaption"></div>
</div>
</div>
</div>
<div id="footer"></div> Better!
<header></header>
<section>
<article>
<figure>
<img>
<figcaption></figcaption>
</figure>
</article>
</section>
<footer></footer>One way is clearly easier to discern by just looking at it. Yes, it can all technically be done using divs, but why do it this way when it hurts the accessibility of your site?
Having good semantics can make your or your clients more money!
When you code a website you want people to be able to see it on a search. The faster someone can find your site, the more clients you can possibly pick-up. This is where SEO comes in.
Good semantics can positively impact your SEO rank on google and other search engines. If your site is more accessible, easier to read, uses proper semantics, you can make more money, simple as that. Google’s search algorithm detects good semantics and will increase the respective site’s rank based on accessiblity. Help others and help yourself.
Semantic Elements
Replace your divs with any of the elements below for happier people all around. :)
<figure></figure><article></article><details></details><figcaption></figcaption><aside></aside><footer></footer><header></header><main></main><mark></mark><nav></nav><summary></summary><section></section><time></time>