Question posted in 
It has been almost two weeks since I started
learning about the essential front-end materials.
I noticed that a lot of people use <div class="something"></div>
to specify contents. Rarely do I see people using
HTML5 semantic elements. Perhaps, too many div classes.
But if div classes and semantic elements serve a similar purpose,
why do people say it’s a bad practice to use div tags? Does semantic elements
truly boost a website’s SEO?
I’m fairly new to the front-end development. Any kind of answer would help me grow as a front-end trainee!
2
Answers
There really isn’t a correct answer here. There is cases to use some of the new HTML5 semantic elements such as header, nav, or footer. But there is cases to just use div’s as well.
It really comes down to your style as a dev. Me personally I like using the header, nav, and footer tags but using div’s for most everything else.
To play devil’s advocate with that though you could get a really long CSS selector like
.section .row .column .some-item .another-item. That is bad. That would perform really slow. The way that selector works is it starts from.another-itemand works its way backwards…If you used some of the semantic elements it could make a better CSS selector and thus a faster page.
It’s best to use semantic tags so machines could better understand the content of a website (SEO, screen-readers, scrappers, 3rd-party scripts, browser addons..)
For a computer it’s not very easy to tell which area is the main navigation, which is the header, which is main content area, and so on. it really helps a lot (from a machine point-of-view) of you use tags which describes the meaning of each area of your HTML.
See these answers here:
https://webmasters.stackexchange.com/q/18472/38951
https://webmasters.stackexchange.com/q/2757/38951