CODEWITHSUNDEEP
htmlcss
Hyunsoo Choi
Hyunsoo Choi

Reputation: 69

HTML5 semantic elements Vs. div tags

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!

Upvotes: 3

Views: 2722

Answers (2)

vsync
vsync

Reputation: 130660

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

Upvotes: 2

Jeff Sloyer
Jeff Sloyer

Reputation: 4964

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-item and works its way backwards...

If you used some of the semantic elements it could make a better CSS selector and thus a faster page.

Upvotes: 1

Related Questions