<header>标记可以包含在HTML5的<aside>标记中吗?

Pui*_*ber 10 html5 header semantics

我想知道这种结构在HTML5中是否在语义上是正确的.

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

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

    </section>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)

我想要的是一个左侧栏占据屏幕的30%,标识和下面的一些东西,然后内容占据右侧的另外70%.

非常感谢.

Alb*_*reo 13

鉴于HTML5仍然是草案,规范说

标题元素通常包含节的标题(h1-h6元素或hgroup元素),但这不是必需的.header元素还可用于包装部分的目录,搜索表单或任何相关徽标.

[aside]元素可用于印刷效果,如拉引号或侧边栏,广告,导航元素组,以及被认为与页面主要内容分开的其他内容.

并且<aside />标签上唯一的"限制" 是

将旁边元素仅用于括号内是不合适的,因为它们是文档主流的一部分

事件虽然<header />标签内没有明确的标签示例<aside />,但我认为它们没问题.

链接:

  1. http://dev.w3.org/html5/spec/Overview.html#the-header-element
  2. http://dev.w3.org/html5/spec/Overview.html#the-aside-element


Pau*_*ite 10

使用您放在那里的代码本身并没有什么不妥,但请记住,<aside>标签是一个分区内容元素,因此它内部<header><h1>内部将被视为仅用于<aside>而不是整个页面的标题(在至少在HTML5概述算法下,遗憾的是,这种算法在实践中似乎已经死了.

那可能就是你想要的.如果没有,那么如果左栏中的所有内容都只是页面的介绍性内容,那么您可以将其全部放在<header>元素中<aside>完全丢失:

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

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

    </section>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)

  • @Pugicerber:是的,这听起来不错.正如我所说的,如果您认为Google Maps Directions是页面的介绍内容(这显然是一个主观决定),他们可以很高兴地与`<h1>`一起生活在`<header>`标签内.但如果没有,`<div>`是实现你想要的样式的方法. (2认同)