HTML 5: Using <header> tag or class="header"

html5 download
css
html5 template
html tags
javascript
html5 tags
w3schools
w3schools html tags

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?

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:

  1. Search engines will consider its contents as important keywords to influence the page's search rankings (see SEO)
  2. Screen readers can use it as a signpost to help visually impaired users navigate a page
  3. Finding blocks of meaningful code is significantly easier than searching though endless divs with or without semantic or namespaced classes
  4. Suggests to the developer the type of data that will be populated
  5. 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).

HTML Tutorial, It is a new version of the language HTML, with new elements, attributes, and behaviors, and a larger set of technologies that allows the building of  Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, PHP, Python, Bootstrap, Java and XML. w3schools.com. THE WORLD'S LARGEST WEB DEVELOPER SITE. HTML CSS JAVASCRIPT SQL PYTHON PHP BO

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>

HTML5 Style Guide and Coding Conventions, Set the doctype to HTML5 with this tag: <!DOCTYPE HTML> on the first line of your website. If you leave this out, you will still probably be able to use HTML5  What is CSS? Cascading Style Sheets (CSS) is used to format the layout of a webpage. With CSS, you can control the color, font, the size of text, the spacing between elements, how elements are positioned and laid out, what background images or background colors to be used, different displays for different devices and screen sizes, and much more!

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>

HTML5, HTML5 is the latest specification of the HTML language, and represented a major break with previous markup practices  The lessons start with HTML for newcomers, and the lessons will teach you all the tags and HTML elements you need to know to create your own HTML5 webpages. The course also covers how to use the HTML canvas and drawing elements. There are also lectures on geolocation, local storage and forms and will also includes lessons on how to add audio and video to your webpages. Let’s move on to table

How to Set Up a Web Page with HTML5, What Is HTML5? HTML 5 is the latest Hypertext Markup Language (HTML), the standard programming language for describing the contents and  Thus, most of the web designers and developers are using the HTML5 language to develop their websites. The latest version has many built-in features or concepts that focus on easy accessibility. Because of which many designers have left the previous version of HTML4 and have started to use the latest one. It is such a technical achievement that had

HTML5, HTML5 is a programming language whose acronym stands for Hyper Text Markup Language. It is a system that allows the modification of the  HTML5 constraint validation API helps developers avoid use of JavaScript for simple validations. For complex validation logic, the API can be used for performing client side validation and

HTML5 Tutorial For Beginners - part 1 of 6 - Getting Started, How it Works. The controls attribute adds video controls, like play, pause, and volume.. It is a good idea to always include width and height attributes. If height and width are not set, the page might flicker while the video loads.

Comments
  • 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.