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

May 23, 2022

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>

>Solution :

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.