为什么我们在 HTML5 的 body 元素里面写页眉和页脚元素？

Question

我们在html5中编码时，通常会以这种格式编写代码

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

像这样

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

我的问题是为什么三个标签的语义都不同，为什么不分开写呢？我的意思是这样

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

Answer 1

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

因为它们的语义不是你想的那样。

<head> 内容数据关于文档，而 <body> 包含呈现的数据部分。

A <header> 和 <footer> 包含 something 的页眉和页脚，可能是文档的 <main> 部分，也可能是 <section> 或其他东西。

为什么我们在 HTML5 的 body 元素里面写页眉和页脚元素？

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

html

web

frontend

web-frontend