Why we write header and footer element inside of the body element in HTML5?

Question

When we code in html5 we usually write code in this format

<!DOCTYPE html>
<html>
<body>
  <header>
    <h1>What Does WWF Do?</h1>
    <p>WWF's mission:</p>
  </header>
</body>
</html>

And like this

<!DOCTYPE html>
<html>
<body>

<footer>
  <p>Author: Hege Refsnes</p>
  <p><a href="mailto:hege@example.com">hege@example.com</a></p>
</footer>

</body>
</html>

My question is why we do not write them separately when all the three tags has different semantic meaning? I mean this way

<!DOCTYPE html>
<html>
<head>
</head>

<header>
    <nav>
        <!-- Navigation Bar -->
    </nav>
</header>
<body>
<p> Middle stuff of the website here. </p>

</body>

<footer>
  <p>Author: Hege Refsnes</p>
  <p><a href="mailto:hege@example.com">hege@example.com</a></p>
</footer>
</html>

[basically](https://stackoverflow.com/questions/5492492/in-html5-can-the-header-and-footer-tags-appear-outside-of-the-body-tag), all visible document elements go in the `` — Yarin_007, May 23 '22 at 20:14

score 0 · Accepted Answer · answered May 23 '22 at 20:13

My question is why we do not write them separately when all the three tags has different semantic meaning?

Because the semantic meaning they have isn't what you think it is.

The <head> contents data about the document while the <body> contains the parts of the data that get rendered.

A <header> and <footer> contain a header and footer for something which could be the <main> part of the document, or could be a <section> or something else.

Why we write header and footer element inside of the body element in HTML5?

1 Answers1