Do I need all these HTML5 tags for the main title of my sites?

Question

I started learning html / css, and throughout the course of my training I saw how the idea of ​​semantics was strongly emphasized. Most of the time, I understand what I should use, and everything works fine. But there are many times when it seems that there are too many tags for something simple, for example:

Suppose I have a main headline on my site with some navigation links, semantically I get this:

<section id="masterHeader"> <header> <nav> <ul> <li><a href="#"> link </a></li> </ul> </nav> </header> </section> 

Is it too much, or should I do it because it makes sense? It just looks like a lot of unnecessary tags.

Answer 1

It seems completely unnecessary to have a title tag in the section tags. instead, it should look something like this:

 <header id="masterHeader"> <nav> <ul> <li><a href="#"></a></li> </ul> <nav> </header> 

Answer 2

The goal of semantic page design is not that it’s easier for you to read as a designer (although this is a good benefit), or because it is lighter (it is often not). Rather, the goal of semantic design is to add meaning to your code, which simply does not allow divs to be made with identifiers and classes. A search engine crawling your site may supposedly better understand your code when it is semantically tagged.

The problem is that IE8 and below do not support these semantic elements and therefore require js shiv. But then your layout breaks in IE8 and below if they are disabled by JS. This is a tradeoff that you will have to seriously weigh before considering HTML5 elements, since your layout will be broken into IE8-6 using no-js.

Also, I would say that the section element is not semantically correct in your use here (but I could be wrong, I would need to check the w3c specification). But it is neither here nor there, and basically just a nit-pick.