1

I just started reading about headers and I found an article here on SO dating to 2011 which says that the <header> tag is another way of writing <div class="header">.

However, just for fun, I experimented with it and replaced <head> with <header> and found no change in my site at all. Even the <title> displays correctly.

Hence my question. Is the <header> tag in html5 a replacement for the <head> tag? If not, could anyone offer a suggestion on why things haven't changed on my site?

Thanks in advance.

ValarMorghulis
  • 79
  • 1
  • 13
  • Browser is way too tolerant… You can as well try adding the title in your `
    `. But no, don't do that - they are different tags meant for different purpose...
     – T J Jul 09 '14 at 07:26
  • No, `` represents the section of your HTML that explains about the page and `
    ` is a part of your `` which represents what users see in the page.
     – Benjamin Gruenbaum Jul 09 '14 at 07:26
  • Thanks for the quick response @BenjaminGruenbaum : If `
    ` is a part of ``, then could you elaborate on it's purpose?
     – ValarMorghulis Jul 09 '14 at 07:30
  • `` is something else then `
    ` .. the `
    ` helps you defines semantic layout within your page, the `` tag simply helps defining the page itself and refers to the body
     – Dorvalla Jul 09 '14 at 07:34
  • @George it does what it sounds like it does - it represents the page header (as in - what my mom would think a page header is without knowing HTML) – Benjamin Gruenbaum Jul 09 '14 at 07:38
  • @BenjaminGruenbaum : Thank you sir. I did not mean to offend. I did do my research and my comment was posted before Tilwin Joy's comment was edited to include the line about the `
    ` tag. I now have a clear understanding.
     – ValarMorghulis Jul 09 '14 at 07:47

4 Answers4

3

Generally the browsers are way too tolerant to invalid html. For example, regardless of whether you have duplicate id's or you have a <tr> inside a <ul>, It will still render your html, But it's better to not take advantage of it, because this can cause unexpected results in later point of time, for example when you're writing css or scripts.

The <header> element is one of the semantic tags introduced as part of html5.

From MDN -

<header>

The HTML <header> Element represents a group of introductory or navigational aids. It may contain some heading elements but also other elements like a logo, wrapped section's header, a search form, and so on.

<head>

The HTML Head Element (<head>) provides general information (metadata) about the document, including its title and links to or definitions of scripts and style sheets

Information about your website such as title should semantically go in the <head> tag.

So adding the information about your site in a <header> tag is "Semantically" incorrect. If you don't want your html code to be semantically correct, then there's no purpose for you using semantic tags at all (my opinion)

T J
  • 42,762
  • 13
  • 83
  • 138
  • Thank you for this answer. I found this down-to-earth explanation useful and hence am accepting this. The semantic way of looking at HTML is new to me, thanks for your time. – ValarMorghulis Jul 09 '14 at 07:42
1

absolutely not.

The <head> element is a container for all the head elements. Elements inside <head> can include scripts, instruct the browser where to find style sheets, provide meta information, and more.

You can have only one head element in your document. Refer here for documentation

The <header> tag specifies a header for a document or section.

The <header> element should be used as a container for introductory content or set of navigational links.

You can have several elements in one document.

Header is new in html5 .refer here for documentation about header

head is structural for html page

<html>
<head>
  <script src="urlToScript"></script>
  <link type="text/css" href="urltoCss" />
  <title>title of the html page displayed in the tab (not in the page)</title> 
</head>
<body>
   <header>
    Title displayed in the page
    </header>
</body>
</html>
faby
  • 7,394
  • 3
  • 27
  • 44
  • 1
    Please... Stop using W3School links for "documentation" when there're official links : [``](http://www.w3.org/TR/html5/document-metadata.html#the-head-element) [`
    `](http://www.w3.org/TR/html5/sections.html#the-header-element)
     – zessx Jul 09 '14 at 07:36
  • @faby : Thank you for the response. I was referring to the W3Schools pages which you kindly provided here which is when I got confused initially. Thanks for a clearer explanation. – ValarMorghulis Jul 09 '14 at 07:38
  • @George as suggested by zessx I have changed the documentation links. If you prefer I put them back – faby Jul 09 '14 at 07:41
  • @faby : Yes, I would personally prefer the earlier link as it is better for people who are learning, which, I assume, is what you must have also thought when you posted it. The Try-It-Editor is a good tool. You could post both if you like. :) . Sorry I could not accept your answer. – ValarMorghulis Jul 09 '14 at 07:54
0

It is an oversimplification to say that “<header> tag is another way of writing <div class="header">”, but it is true that it is meant to be used where authors have often used a div with a class attribute.

The header element is by no means a replacement for head. The two have little in common beyond the similarity of names.

The observation that replacing head tags by header tags does not seem to have any effect has a natural explanation: neither of these tags has much effect anyway. The only real effect is that header is a block level element, but in most cases this does not matter, especially if all its child elements are block level elements, as they typically are. Similarly, you would see no effect if you replaced head tags by foobar tags (I mean literally <foobar> and </foobar>).

Nominally, <head> indicates the head part of a document, which may contain a few different tags only. In practice, apart from some abnormal cases, the <head> and </head> tags have no effect (and they are optional, by the specifications, except in XHTML). Elements like title and meta are recognized without them. The entire division of a document to head and body parts is just formal and conceptual.

The header tags as such have no effect, beyond the block thing and beyond creating an element node, which you can style in CSS or process with JavaScript.

Jukka K. Korpela
  • 195,524
  • 37
  • 270
  • 390
  • Thank you for taking the time to write this very interesting answer. I understood that `
    ` and `` are two separate entities and that `` and `<meta/>`are no longer required to be inside ``. By the way, I referred to the oversimplification after going through this page http://stackoverflow.com/questions/3434950/header-vs-head.
     – ValarMorghulis Jul 09 '14 at 08:45
  • @George, the `title` element is still formally (though not in practice) required to be inside an `head` *element*, but the start and end *tags* (`` and ``) of the `head` element are optional. – Jukka K. Korpela Jul 09 '14 at 08:48
0
      <header> is one of several new tags in HTML5 that are supposed to replace <div> 
  for some specific situations. In particular, the "header" part of your page - whatever that is,
usually the part that would be wrapped in <div class="header"> - in HTML5 you should use <header> instead.
user3218194
  • 448
  • 4
  • 15