HTML5中，<header>标签能否被包含在<aside>标签内？

Question

HTML5中，<header>标签能否被包含在<aside>标签内？

14

我想知道这个结构在HTML5中是否语义上正确。

<html>
<head></head>
<body>
    <aside>
        <header>
            <h1></h1>
        </header>
        <div>

        </div>
    </aside>
    <section id="content">

    </section>
</body>
</html>

我想要的是一个占屏幕30%宽度、带有标志和一些其他内容的左侧栏，然后右侧70%的内容。

非常感谢。

- Puigcerber

2个回答

14

你的代码本身没有问题，但请注意<aside>标签是一个分区内容元素，因此其中的<header>和<h1>将被视为仅适用于<aside>的标题，而不是整个页面的标题（至少在HTML5轮廓算法下，可悲的是，在实践中似乎已经死亡）。

这可能是你想要的。如果不是，那么如果左列中的所有内容基本上只是页面的介绍性内容，则可以将其全部放入<header>元素中，并完全删除<aside>：

<html>
<head></head>
<body>
    <header>
        <h1></h1>
        <div>

        </div>
    </header>
    <section id="content">

    </section>
</body>
</html>

你可能还考虑用一个<main>元素替换<section id="content"></section>。

- Paul D. Waite

1

这很有趣，因为当然，我希望<header>成为整个页面的标题。但同时，我想在左列中有更多内容，这种情况下是Google Maps Directions。所以最好只是将<header>和<div id="directions">包装在另一个<div>中，而不是在<aside>中。你觉得呢？ - Puigcerber

2

@Pugicerber：是的，那听起来像个好主意。正如我所说，如果你认为Google地图方向是页面的介绍性内容（这显然是一个主观的决定），它们可以和你的<h1>一起愉快地存在于<header>标签中。但如果不是，<div>是实现你想要的样式的方法。 - Paul D. Waite

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Albireo · Accepted Answer

考虑到HTML5仍处于草案阶段，规范指出：

头部元素旨在通常包含部分标题（h1-h6元素或hgroup元素），但不是必需的。头部元素也可以用于包装部分目录、搜索表单或任何相关的标志。

并且

[aside]元素可用于排版效果，如拉引语或侧边栏，用于广告、导航元素组和其他被视为与页面主内容分开的内容。

而 <aside /> 标签唯一的“限制”是：

仅在括号中使用aside元素不合适，因为这些是文档主流程的一部分。

尽管没有明确的示例显示 <aside /> 标记内部存在 <header /> 标记，但我认为它们是可以接受的。

链接：