Question

我刚刚发现了整个HTML大纲，发现这个伟大的在线HTML5 outliner tool。现在我正在尝试完成一个语义上恰当的简单HTML页面，其轮廓应如下所示：

页
1. 导航
2. 主要
3. 子
  1. 除了
4. 页脚

并呈现如下页面：

| --- NAV ----------------- |
|      content              |
| --- MAIN ---------------- |
|      content              |
| --- SUB ----------------- |
|      content      | aside |
| --- FOOTER -------------- |
|      content              |

HTML如下所示：

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>

<body>
    <div class="page">

        <header class="page--header">
            <hgroup>
                <h1>page</h1>
                <h2>subtitle</h2>
            </hgroup>
            <nav>
                <h1>Nav</h1>
                <ul>
                    <li>link 1</li>
                    <li>link 2</li>
                    <li>link 3</li>
                    <li>link 4</li>
                    <li>link 5</li>
                </ul>
            </nav>

        </header><!-- .page-header -->

        <section class="page--main">
            <h1>Main</h1>                
        </section><!-- .page-main -->

        <section class="page--sub">
            <h1>Sub</h1>
            <aside>
                <h1>Aside</h1>
                <p>Advertisement block</p>
            </aside><!-- aside -->                
        </section><!-- .page-sub -->

        <footer>
            <h1>Footer</h1>                
        </footer><!-- footer -->

    </div><!-- .page -->
</body>
</html>

这使得大纲看起来像这样：

页
1. 导航
2. 主要
3. 子
  1. 除了
页脚

在获得上述提示时，我应该如何更改HTML以保持语义正确？为什么footer没有与那些顶级部分元素（即主要＆amp; sub）在同一级别上概述，即使它们都是具有相同标题级别的兄弟姐妹？

感谢困惑，欢迎任何帮助，批评或建议，谢谢！

Answer 1

使用排名<h1>到<h6>标题而不是所有<h1> s。 source
将主要内容包装在<main>元素中。请记住设置main { display: block }以实现跨浏览器兼容性。
将侧边栏容器（<aside>）放在<main>内，因为<aside>是<main>的补充内容。
删除<h1>内的<footer>，因为<footer>不是分段元素，所以它不需要标题。

简要示例：

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Title</title>
</head>
<body>

    <header role="banner">
        <hgroup>
            <h1>page</h1>
            <h2>subtitle</h2>
        </hgroup>
        <nav role="navigation">
            <h2>Nav</h2>
            <ul>
                <li>link 1</li>
                <li>link 2</li>
                <li>link 3</li>
                <li>link 4</li>
                <li>link 5</li>
            </ul>
        </nav>
    </header>

    <main role="main">

        <!-- main content goes here -->
        <section id="example">
            <h2>Example</h2>
            <p>Lorem ipsum</p>
        </section>
        <!-- main content goes here -->

        <aside role="complementary">
            <h2>Aside</h2>
            <article id="ad">
                <h3>Ad</h3>
                <p>Advertisement block</p>
            </article>
        </aside>    

    </main>

    <footer role="contentinfo">
        <p><small>&copy; <time>2013</time> Website Name</small></p>
    </footer>

</body>
</html>

Answer 2

header和footer都不会在大纲中创建项目符号。主要的切片元素包括：nav，section，article和aside。

您应该查看：http://html5doctor.com/outlines/

HTML5语义和大纲

2 个答案: