0

我最近才发现了整个 HTML 大纲的东西，并发现了这个很棒的在线HTML5 大纲工具。现在我正在尝试完成一个语义上正确的简单 HTML 页面，其大纲应如下所示：

  1. 页
    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. 页
    1. 导航
    2. 主要的
    3. 子
      1. 在旁边
  2. 页脚

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

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

4

2 回答 2

1
  1. 使用排名<h1>到 <h6>标题而不是所有<h1>s。来源
  2. 将主要内容包裹在<main>元素内。记得设置main { display: block }跨浏览器兼容性。
  3. 将侧边栏容器 ( <aside>)<main>作为<aside>的补充内容放入其中<main>。
  4. 删除<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>
于 2013-04-05T10:35:30.173 回答
0

也header不会footer在大纲中创建项目符号。主要的分段元素是：nav、section、article和aside。

你应该看看：http ://html5doctor.com/outlines/

于 2013-04-05T10:42:35.633 回答