HTML5语义与轮廓
HTML5语义与轮廓
提问于 2013-04-05 09:31:53
我最近才发现了整个HTML大纲，并发现了这个伟大的在线HTML5外排工具。现在，我正在尝试完成一个语义上合适的简单HTML页面，其大纲应该如下所示：
- 页面
- 导航
- Main
- 子
- 撇开
1. Footer
并呈现如下一页：
| --- 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>这使得大纲看起来如下：
- 页面
- 导航
- Main
- 子
- 撇开
- 页脚
在获得上面提到的大纲时，我应该如何修改HTML以保持其语义正确？为什么footer没有与那些顶级的节元素(即.即使他们都是具有相同标题级别的兄弟姐妹？
困惑，欢迎任何帮助，批评或建议，谢谢！
回答 2
Stack Overflow用户
回答已采纳
发布于 2013-04-05 10:35:30
- 使用排序
<h1>到<h6>标题而不是所有<h1>s. 来源。 - 将主要内容包装在
<main>元素中。请记住为跨浏览器兼容性设置main { display: block }。 - 将侧栏容器(
<aside>)放在<main>中，因为<aside>是<main>的补充内容。 - 删除
<footer>中的<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>© <time>2013</time> Website Name</small></p>
</footer>
</body>
</html>Stack Overflow用户
发布于 2013-04-05 10:42:35
header和footer都不会在大纲中创建要点。主要的分段元素是：nav、section、article和aside。
您可能应该退房：http://html5doctor.com/outlines/
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/15830419
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号