vs.

Question

In this tutorial: http://railstutorial.org/chapters/filling-in-the-layout#top

There is "header"

I know that in HTML there is "head"

But, what is <header> ?

Thanks.

score 40 · Answer 1 · edited Apr 18 '12 at 12:46

40

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

Chapter 3 of Dive into HTML5 by Mark Pilgrim does an excellent job going into the details of when and why to use the new <header> element.

edited Apr 18 '12 at 12:46

Matt

74,352
26
153
180

answered Aug 08 '10 at 15:59

Rex M

142,167
33
283
313

Keep in mind that html 5 is at draft state and
is one of the controversial changes: http://lists.w3.org/Archives/Public/public-html/2009Aug/0389.html
– Hendrik Brummermann Aug 08 '10 at 16:58
1

@nhnb it is highly unlikely those elements will be removed or changed at this phase. – Rex M Aug 08 '10 at 17:11
In case you did not notice: The blog posting, I linked to, is from the most important browser vendor. In general I have trouble to take a spec serious which has two official (!) versions that are incompatible to each other. – Hendrik Brummermann Aug 13 '10 at 06:54

Daniel Vandersluis · Answer 2 · 2010-08-08T18:26:10.413

11

<header> is a semantic tag added in HTML5. It's the HTML5 equivalent of using <div class="header"> for a header element in your page.

edited Aug 08 '10 at 18:26

answered Aug 08 '10 at 15:59

Daniel Vandersluis

91,582
23
169
153

1

It is not the header of the page but of a section. So
is a better equivalent. (i did not do the down vote).
– Hendrik Brummermann Aug 08 '10 at 17:05
Oops, that's what happens when I write an answer early in the morning. – Daniel Vandersluis Aug 08 '10 at 18:26

score 9 · Answer 3 · edited Mar 01 '21 at 05:42

<head> Defines the information about the article such as including meta data,title,links & scripts. It doesn't have a visual appearance.

<header> defines a header for a document or a section. It is added in HTML5. It has a visual appearance, it will be useful to show in the header a logo, menu, and other heading details. It needs to be defined inside the body.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
        <title>Ganesamoorthi M</title>
        <meta name="author" content="Ganesamoorthi M">
        <meta name="description" content="Head vs Header">
        <meta name="keywords" content="HTML,CSS,Head,Header">
  </head>
  <body>
    <header>
        <h1>Ganesamoorthi M - Software Developer</h1>
    </header>
    <section>
        <p>Head vs Header</p>
    </section>
    <footer>
      <p>&copy; 2018 Ganesamoorthi M</p>
    </footer>
  </body>
</html>

head can have title for visual appearance. – Anirudh Oct 29 '18 at 07:23 — Anirudh, Oct 29 '18 at 07:23

Advoot · Answer 4 · 2016-03-20T09:51:09.350

5

<header> is from HTML5 and it meant to be contain the top/navigational part of your webpage in <body>. Like top logo, menu, slogan and other heading stuff.

edited Mar 20 '16 at 09:51

answered Feb 08 '15 at 20:25

Advoot

731
6
5

score 0 · Answer 5 · answered Aug 08 '10 at 16:01

0

The "header" element does not exist in the current html specification so it is ignored (but may be styled using css of course). It is part of the current draft for the upcoming HTML version 5.

It is not related to the "head" element which contains information page the page but no structure.

answered Aug 08 '10 at 16:01

Hendrik Brummermann

8,242
3
31
55

It is certainly not ignored. Ian Hickson, editor of the HTML5 spec, has already said that most of the spec is stable and can be safely implemented - which it has, by every major browser, including the upcoming version of IE. – Rex M Aug 08 '10 at 16:08
2

It is ignored at the moment by the browsers that are in wide use (IE up to 8, Firefox up to 3.6.8). I disagree on it being a good idea to build productive work up on specifications in draft state. – Hendrik Brummermann Aug 08 '10 at 16:24
Especially since header is one of the attributes that Microsoft does not consider to be a good idea: http://lists.w3.org/Archives/Public/public-html/2009Aug/0389.html – Hendrik Brummermann Aug 08 '10 at 16:57
2

Most browsers treat it as an unknown element, in most cases this means it is treated as an inline element with no semantics attached to it. In the case of Internet Explorer it also means that it is not accessible to the CSS engine without a JScript shim. This is as good as "ignored". – Quentin Aug 08 '10 at 18:29
@Hendrik, anything that the IE team sees as a "bad" idea I somehow must instinctively disagree even without hearing their reasoning. – user2867288 Jul 07 '16 at 02:13

vs.

5 Answers5

Linked

Related