CODEWITHSUNDEEP
html
Student of Hogwarts
Student of Hogwarts

Reputation: 1138

What was the point of the new HTML5 tags?

According to Google's best practices for speed (look at their websites, and you know they are right!), you shouldn't use CSS descendant selectors. This is because it has to search the DOM a lot.

So if you want to change something with all the articles inside a section. Lets say:

<section id="others">
    <article>
        ...
    </article>
    <article>
        ...
    </article>
</section>

To modify all the articles inside this specific section, you shouldn't do:

#others article {

you should do

<section>
    <article class="others">
        ...
    </article>
    <article class="others">
        ...
    </article>
</section>

.others {

But if you still need to use all these classes and ID's, what's the point of these new HTML5 tags? I mean, if the best practices is to use classes and ID's anyway..

Upvotes: 0

Views: 157

Answers (2)

David Moreno Garc&#237;a
David Moreno Garc&#237;a

Reputation: 4523

Google is focusing in speed. HTML5 in structure. Probably takes a lot of time (I don't think so) search in the DOM but it's easier to read a HTML5 page using new tags. I mean, you could make the same kind of structure with divs and so on, but new tags enforces people to use them. Another point is the time you spend trying to figure out what a huge amount of divs do. When you use, lets say the article tag, you know that the content is part of an article. That makes developers job easier.

Upvotes: 0

Fenton
Fenton

Reputation: 250842

It is highly unlikely that an average website would see a great deal of difference in speed for the scenario you have given. If you are trying to load one of the most popular pages on The Web, you will turn to all kinds of tricks to make it load incredibly fast - but for most websites this is micro-optimisation.

To make your selectors ultra fast, you can make sure everything has an id, and use ids in your CSS, but this makes your CSS really hard to maintain and the biggest cost these days is the time it takes developers to do stuff.

At most, you should be trying to reduce the levels in your selectors, but to remove them entirely is not pragmatic.

Just to be clear - this optimisation is really about rendering speed of CSS. Do you think the time saved rendering CSS (which is very nearly no time at all) is going to make your web app faster, given that you are making your HTML heavier with extra bytes of class="other"?

Upvotes: 2

Related Questions