CODEWITHSUNDEEP
htmlheader
Simplicity
Simplicity

Reputation: 48966

<header> vs. <head>

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.

Upvotes: 28

Views: 33809

Answers (5)

Ganeshgm7
Ganeshgm7

Reputation: 455

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

Upvotes: 9

Advoot
Advoot

Reputation: 831

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

Upvotes: 5

Rex M
Rex M

Reputation: 144182

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

Upvotes: 40

Daniel Vandersluis
Daniel Vandersluis

Reputation: 94284

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

Upvotes: 11

Hendrik Brummermann
Hendrik Brummermann

Reputation: 8312

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.

Upvotes: 0

Related Questions