With HTML 5 new semantic tags were introduced which includes header and footer. But i am confused what should i use and why? Use header tag directly or give class="header".Which one is better and why?
3 Answers
Use <header> and those semantic tags.
Why? Because they are meaningful, easier to read.
For example, consider
<header id="article-header"> ... </header> and
<div id="article-header" class="header"> ... </div> As you can see the first is shorter, and easier to read.
According to Inbound now, semantic tags are better in terms of SEO too.
Also, this and this question have interesting answers
Edit:
I'm quoting this from MDN:
Some of the benefits from writing semantic markup are as follows:
- Search engines will consider its contents as important keywords to influence the page's search rankings (see SEO)
- Screen readers can use it as a signpost to help visually impaired users navigate a page
- Finding blocks of meaningful code is significantly easier than searching though endless divs with or without semantic or namespaced classes
- Suggests to the developer the type of data that will be populated
- Semantic naming mirrors proper custom element/component naming
Additionally, I have read somewhere quite some time ago that semantic tags are for defining the outline of the document, divs are more suitable for visual sectioning like box styling (I'm unable to find the source right now).
1 Comment
Shweta
yes i get that but many times i have been asked that why these tags were introduced when we can directly use class="header".I hope to give more explaination than just reducing the line of code.
In CSS Definition
Class contruction:
. means a class
.header{ ........... } HTML
<div class=header> .......... <div> while the header tag
This is calling the element name itself like body or any
header{ ............. } HTML
<header> ................ </header> 
Comments
It's better to use header tags. The header element represents a container for an introductory content or a set of navigational links. header tag has a block scope as same scope as a normal div tag .
<html> <body> <article> <header> <h1>Most important heading here</h1> <h3>Less important heading here</h3> <p>Some additional information here.</p> </header> <p>Lorem Ipsum dolor set amet....</p> </article> </body> </html> 