CODEWITHSUNDEEP
htmlweb-applicationsuser-interfacesemantic-markup
BanksySan
BanksySan

Reputation: 28510

What do <header> and <footer> actually do?

What's the point of header and footer?

Given that they are rendered on the page in the order they are written, as demonstrated here what is the difference between them?

<article>
    <footer>This is a footer</footer>
    <header>This is a header</header>
</article>

Upvotes: 2

Views: 287

Answers (3)

unor
unor

Reputation: 96607

The only definite source is the HTML5 spec. It defines the meaning of these elements.

For the header element:

The header element represents a group of introductory or navigational aids.

For the footer element:

The footer element represents a footer for its nearest ancestor sectioning content or sectioning root element. A footer typically contains information about its section such as who wrote it, links to related documents, copyright data, and the like.

Both sections give further comments and examples for the intended use.

In my own words:

footer is a place for metadata, like author name, publication date, categories/tags etc.. Each sectioning element (section, article, aside, nav) can have its own footer element(s). If the footer is not part of such a sectioning element, it applies to the whole page. Example:

<body>
  <article>
    <footer><!-- metadata about the article --></footer>
  </article>
  <footer><!-- metadata about the whole page --></footer>
</body>

The header element is for introductory content, like headings, summary/abstract, warnings like "NSFW" etc.

Note that the HTML5 spec doesn’t contain the same wording about sectioning elements for the header like it is the case for footer. However, this is already fixed in HTML5.1 (see the relevant bug) and will probably be changed in HTML5, too.

You shouldn’t pay attention to the naming of these elements. A header could also appear at the end and a footer at the beginning of an article.

The overall picture: header and footer (and address) are useful to mark-up the content of a sectioning element (or the whole page) that is not part of the main content of the sectioning element (or the whole page).

A simple example without footer:

<article>
  <h1>About me</h1>

    <h2>What I love</h2>
      <p>I like <cite>The Hitchhiker's Guide to the Galaxy</cite>.</p>

    <h2>What I hate</h2>
      <p>I hate <cite>Pacman</cite>.</p>

    <p>Tags: <a href="/personal">personal</a>, <a href="/fandom">fandom</a></p>

</article>

↑ Here the last paragraph (containing the tags for this article) would be in scope of the heading "What I hate". This is of course wrong, as I don’t hate "Tags", "personal", or "fandom". So we should reflect this within the markup, so that this paragraph is not associated with the previous heading:

<article>
  <h1>About me</h1>

    <h2>What I love</h2>
      <p>I like <cite>The Hitchhiker's Guide to the Galaxy</cite>.</p>

    <h2>What I hate</h2>
      <p>I hate <cite>Pacman</cite>.</p>

    <footer>
      <p>Tags: <a href="/personal">personal</a>, <a href="/fandom">fandom</a></p>
    </footer>
</article>

↑ Now that we put the tags in footer, they are no longer in scope of "What I hate". Instead, they now represent the footer (→ the metadata) for the whole article element.

Upvotes: 2

svenlr
svenlr

Reputation: 86

as mentioned here: http://www.w3schools.com/html/html5_semantic_elements.asp , semantic tags are used to "clearly define different parts of a web site". they are just to tell the browser and maybe others where something is. its an alternative to <div id="header"> for example

i hope i could help

Upvotes: 0

Reko
Reko

Reputation: 98

In general in a tag the header can contain the subject of the article and the footer the author and/or time written.

You should read the following links for further explanation

header element

footer element

Upvotes: 0

Related Questions