Question

我已经讨论了页眉和页脚。由于HTML5提供页眉，页脚，内容元素，我相信它应该每页使用一次。我在下面的片段中说明了它们。

<!-- My understanding -->
<header>
    <!-- code goes here -->
</header>
<content>
    <!-- code goes here -->
    <!-- code goes here -->
</content>
<footer>
    <!-- code goes here -->
</footer>

很少有人会像下面那样使用页眉，页脚元素。

<!-- People understanding -->
<header>
    <!-- code goes here -->
</header>
<content>
    <!-- code goes here -->
    <!-- code goes here -->
</content>
<footer>
    <header>
        <!-- They also use <header> in footer. -->
    </header>
    <!-- code goes here -->
</footer>

可以在header元素中使用footer吗？换句话说，您建议构建HTML结构？

Answer 1

不，这不是有效的。

header元素表示内容的标头，但是 header元素不能是footer元素的后代。

HTML5 specification的footer部分指出footer元素是：

流量内容，但没有header，footer或main元素后代。

如果您将以下代码粘贴到W3's HTML Validator，则会出现以下错误：

第8行，第20列：元素标题不得作为页脚元素的后代出现。

<!doctype html>
<html>
    <head>
        <title>Title</title>
    </head>
    <body>
        <footer>
            <header>
            </header>
        </footer>
    </body>
</html>

忽略无效的content元素，您的第一个示例是有效的，您应该坚持使用它。

Answer 2

我建议你应该坚持你的第一线思路：

// My understanding
<header>
    //code goes here
</header>
<content>
    //code goes here
    //code goes here
</content>
<footer>
    //code goes here
</footer>

对我来说，了解如何以这种格式制作HTML文件更容易。

Answer 3

第二个示例技术上正常工作，因为<header>，<content>和<footer>的所有功能与<div>的功能类似，但从语义上讲，这是非常糟糕的做法。我会考虑你最初的想法，这肯定是这些元素的精神所在。

Answer 4

根据MDN：

HTML元素代表一组介绍或导航设备。它可能包含一些标题元素以及其他元素元素，如徽标，包装部分的标题，搜索表单等上。

因此我建议您不要在标题标记内使用页脚标记。

页脚可以有标题标签吗？

4 个答案: