开发者

<header> vs. <head>

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

There is "header"

I know开发者_C百科 that in HTML there is "head"

But, what is <header> ?

Thanks.


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


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


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


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


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.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜