Web 文档和网站结构
除了定义网页的各个部分（例如“段落”或“图片”）外，HTML还拥有一些用于定义网站区域的块级元素（例如“标题”，“导航菜单”，“主要内容列”）。本文将探讨如何规划基本网站结构，并编写HTML以表示此结构。
| 前提： | 熟悉基本HTML，参考HTML入门。HTML文本格式，参考HTML文本基础。超链接的工作原理，参考创建超级链接。 |
|---|---|
| 目的： | 了解如何使用语义标签来构建文档，以及如何制定简单网站的结构。 |
文档的基本部分
网页可以看起来彼此不同，但它们都倾向于使用类似的标准组件，除非该页面显示全屏视频或游戏，是某种艺术项目的一部分，或者是结构不当：
- 标题
- 通常在顶部有一个大标题和/或标志。这是关于网站的主要常见信息，通常在从一个页面到另一个页面时是保持不变的。
- 导航栏
- 链接到网站的主要部分；通常由菜单按钮，链接或标签表示。与标题一样，这些内容通常在从一个页面到另一个页面时是保持一致的 - 在你的网站上导航不一致会导致用户产生困惑，阻扰用户使用。许多Web设计师认为导航栏是标题的一部分，而不是单个组件，但这不是要求你要这么认为；实际上有些人也认为，两个独立分开会带来更好的可访问性（accessibility），因为如果它们是分开的，屏幕阅读器可以更好地读取这两个功能。
- 主要内容
- 中心的一个大区域，包含给定网页的大部分独特内容，例如你要观看的视频，或者你正在阅读的主要故事，要查看的地图，或新闻标题等......这是网站内绝对会因页面而异的一部分。
- 侧边栏
- 一些外围信息，链接，报价，广告等。通常这是与主要内容中包含的内容相关的信息（例如在新闻文章页面上，侧边栏可能包含作者的个人资料或相关文章的链接），但仍有一些情况下，你会发现一些重复的元素，如二级导航系统。
- 页脚
- 横跨页面底部的一条区域，通常包含细则，版权声明或联系信息。它是一个放置公共信息（如标题）的地方，但通常该信息对网站本身来说不是关键或次要的。页脚有时也用于SEO目的，通过提供用于快速访问热门内容的链接。
一个“典型网站”可以像这样布置：
用于结构化网站的HTML
上面显示的简单示例不是很漂亮，但是非常适合用于说明典型的网站布局。一些网站有更多的列，有些网站更复杂，但你会有你的想法。使用正确的CSS，你可以使用几乎任何元素来装饰不同的部分，并得到你想要的结果，但是如前所述，我们需要遵循语义，并使用正确的元素进行语义化工作。
这是因为视觉效果并不能说明整个故事。我们使用颜色和字体大小来吸引用户对内容最有用的部分的关注，例如导航菜单和相关链接，但是视觉障碍的人该怎么办，那些“粉红色”和“大字体”的概念对他们来说有用吗？
注意：色盲患者大概占了世界人口的8%。盲人和视障人士约占世界人口的4-5％（2012年全球有2.85亿这样的人，而全球总人口是大约70亿）。
在你的HTML代码中，你可以根据其功能标记内容部分 - 你可以明确地使用代表上述内容部分的元素，而像屏幕阅读器这样的辅助技术可以识别这些元素，并帮助执行诸如“查找主导航”或“查找主要内容”等任务。正如我们之前在课程中提到的，没有将正确的元素结构和语义用于对应的工作中，会产生一些后果。
为了实现这种语义标记，HTML提供了可以用来表示这些部分的专用标签，例如：
- 标题：
<header>。 - 导航栏：
<nav>。 - 主要内容：
<main>，由<article>，<section>和<div>元素表示各种内容分段。 - 侧边栏：
<aside>；经常放在<main>内。 - 页脚：
<footer>。
主动学习：探索我们例子中的代码
我们上面所看到的例子用下面的代码表示（你也可以在我们的Github repo中找到该示例）。我们希望你看看上面的例子，然后查看下面的列表，观察哪些部分组成上面所讨论的内容（标题、导航栏、主要内容、侧边栏、页脚）。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My page title</title>
<link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300|Sonsie+One" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="style.css">
<!-- the below three lines are a fix to get HTML5 semantic elements working in old versions of Internet Explorer-->
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<!-- Here is our main header that is used accross all the pages of our website -->
<header>
<h1>Header</h1>
</header>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Our team</a></li>
<li><a href="#">Projects</a></li>
<li><a href="#">Contact</a></li>
</ul>
<!-- A Search form is another commmon non-linear way to navigate through a website. -->
<form>
<input type="search" name="q" placeholder="Search query">
<input type="submit" value="Go!">
</form>
</nav>
<!-- Here is our page's main content -->
<main>
<!-- It contains an article -->
<article>
<h2>Article heading</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Donec a diam lectus. Set sit amet ipsum mauris. Maecenas congue ligula as quam viverra nec consectetur ant hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur.</p>
<h3>subsection</h3>
<p>Donec ut librero sed accu vehicula ultricies a non tortor. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aenean ut gravida lorem. Ut turpis felis, pulvinar a semper sed, adipiscing id dolor.</p>
<p>Pelientesque auctor nisi id magna consequat sagittis. Curabitur dapibus, enim sit amet elit pharetra tincidunt feugiat nist imperdiet. Ut convallis libero in urna ultrices accumsan. Donec sed odio eros.</p>
<h3>Another subsection</h3>
<p>Donec viverra mi quis quam pulvinar at malesuada arcu rhoncus. Cum soclis natoque penatibus et manis dis parturient montes, nascetur ridiculus mus. In rutrum accumsan ultricies. Mauris vitae nisi at sem facilisis semper ac in est.</p>
<p>Vivamus fermentum semper porta. Nunc diam velit, adipscing ut tristique vitae sagittis vel odio. Maecenas convallis ullamcorper ultricied. Curabitur ornare, ligula semper consectetur sagittis, nisi diam iaculis velit, is fringille sem nunc vet mi.</p>
</article>
<!-- the aside content can also be nested within the main content -->
<aside>
<h2>Related</h2>
<ul>
<li><a href="#">Oh I do like to be beside the seaside</a></li>
<li><a href="#">Oh I do like to be beside the sea</a></li>
<li><a href="#">Although in the North of England</a></li>
<li><a href="#">It never stops raining</a></li>
<li><a href="#">Oh well...</a></li>
</ul>
</aside>
</main>
<!-- And here is our main footer that is used across all the pages of our website -->
<footer>
<p>©Copyright 2050 by nobody. All rights reversed.</p>
</footer>
</body>
</html>花一些时间来查看代码并理解它 - 代码中的注释也可以帮助你理解它。我们不要求你在这篇文章中做许多其他事情，因为理解文档布局的关键是编写一个完整的HTML结构，然后用CSS布局。等你学习到CSS布局部分的时候才能完全理解上面的代码。
HTML布局元素更多细节
从总体详细的理解HTML分段元素是不错的 - 随着你web开发经验的逐渐积累，你将会逐渐深入理解。你可以通过查阅HTML元素参考找到更多的细节。现在，你需要理解这些元素的主要定义：
<main>展现了页面内容的独特性。每一个页面上只可以使用一次<main>，并直接把它放到<body>中。在理想情况下，不应该把它嵌套进其他的元素中。<article>闭合一块与自身相关的内容，这块内容能够解释它自身而不是页面上其他的内容（例如一篇单独的博客）。<section>近似于<article>，但是它更多的是将构成一个单独功能的页面的单个部分（例如一个小型的地图，或者是一组文章的标题和摘要）组合在一起。被认为最好的实际应用是用标题作为每一部分（section）的开头；也要注意的是你可以把不同的<article>分到不同的<section>中，或者把不同的<section>分到不同的<article>中，这要取决于上下文。<aside>包含的内容并不与主要内容有直接的联系，但是它可以提供额外的不直接有联系的信息（词汇条目，作者简介，相关链接等等）。<header>展现了一系列的介绍性内容。如果它是<body>的子元素，它就定义了网站的全局头部。但是如果它是<article>或<section>的子元素，它就定义了这些部分的特定的头部（不要把这它与title和heading混淆）。<nav>包含了页面主要的导航功能。二级链接等，不会进入导航功能部分。<footer>包含了页面的页脚部分。
非语义包装器
有时候，你会遇到一种情况，你找不到理想的语义元素将一些项目组合起来或者包装一些内容。有时候你可能只想仅仅用CSS或JavaScript将一组元素作为一个单独的实体来修饰。为了应对这种情况，HTML提供了<div>和<span>元素。你应该优先使用合适的class属性来提供一些标签，这样它们就能比较容易被找到。
<span>是一个内联非语义元素，你应该仅仅在无法找到更好的语义元素包装内容时使用，或者不想增加任何特定的含义。例如：
<p>The King walked drunkenly back to his room at 01:00, the beer doing nothing to aid him as he staggered through the door <span class="editor-note">[Editor's note: At this point in the play, the lights should be down low]</span>.</p>
在这种情况下，编剧的笔记应该只是为戏剧导演提供额外的指导；不应该有额外的语义意义。对于观看的用户，CSS可能用于将笔记与主文本稍微隔开。
<div>是一个块级非语义元素，仅在你找不到更好的块级语义元素，或者不想增加任何特定的意义时使用。例如，想象当你浏览一个电商网站时，你可以随时选择拉取一个购物车部件：
<div class="shopping-cart">
<h2>Shopping cart</h2>
<ul>
<li>
<p><a href=""><strong>Silver earrings</strong></a>: $99.95.</p>
<img src="../products/3333-0985/" >
</li>
<li>
...
</li>
</ul>
<p>Total cost: $237.89</p>
</div>这不是一个真正的<aside> ，因为它和主要内容并没有必要的联系（你想在任何地方都能看到它）。它甚至不会特别保证使用<section>，因为它不是页面主要内容的一部分。所以在这种情况下用<div>是合适的。我们已经将标题包含进去作为帮助屏幕阅读者查找的引导。
警告：Div使用起来非常方便以至于很容易就被滥用。因为它们不携带语义值，所以会让你的HTML代码变的混乱。要小心的使用它们，只有当没有更好的语义解决方案才使用，而且要尽可能把它的使用量降到最低，否则，当你升级和维护你的文档时会非常困难。
换行符和水平分割线
<br> 在一个段落中创建一个换行；在你想要一系列的固定短行的地方，它是唯一能够生成这种结构的元素，例如一个邮寄地址或一首诗。例如：
<p>There once was a girl called Nell<br> Who loved to write HTML<br> But her structure was bad, her semantics were sad<br> and her markup didn't read very well.</p>
如果没有<br> 元素，这一段将只会呈现在一个长行中（正如我们之前课程中所述，HTML忽略大多数空格 ）；代码中有了<br>元素，会生成下面这样的：
There once was a girl called Nell
Who loved to write HTML
But her structure was bad, her semantics were sad
and her markup didn't read very well.
<hr> 元素在文档中创建一条水平分割线，表示文本中主题的变化（例如主题或场景的变化）。视觉上它看起来像一条水平线。举个例子：
<p>Ron was backed into a corner by the marauding netherbeasts. Scared, but determined to protect his friends, he raised his wand and prepared to do battle, hoping that his distress call had made it through.</p> <hr> <p>Meanwhile, Harry was sitting at home, staring at his royalty statement and pondering when the next spin off series would come out, when an enchanted distress letter flew through his window and landed in his lap. He read it hasily, and lept to his feet; "better get back to work then", he mused.</p>
将呈现如下：
Ron was backed into a corner by the marauding netherbeasts. Scared, but determined to protect his friends, he raised his wand and prepared to do battle, hoping that his distress call had made it through.
Meanwhile, Harry was sitting at home, staring at his royalty statement and pondering when the next spin off series would come out, when an enchanted distress letter flew through his window and landed in his lap. He read it hasily and sighed; "better get back to work then", he mused.
规划一个简单的网站
一旦你规划了一个简单网页的内容，接下来的合乎逻辑的步骤就是尝试找出你想要放在整个网站上的内容，你需要什么页面，以及如何排列和链接到彼此，以获得最佳的用户体验。这被称信息架构。在一个大型、复杂的网站上，很多规划都可以进入这个过程，而对于一个简单的网站的几个页面，这可以是相当简单、有趣的！
- 请记住，你将拥有大多数（如果不是全部）页面常用的几个元素，如导航菜单和页脚内容。假设，如果你的网站是商务用的，最好在每个页面的页脚中提供你的联系信息。注意你想要每个页面都有的共同之处。
- 接下来，绘制一个粗略的你希望每个页面所呈现的结构的草图（可能看起来像我们上面的简单网站）。注意每一块都将是什么。
- 现在，头脑风暴一下所有其他你想放在网站上的内容（不是每个页面都用的内容） - 写下一个大的清单。
- 接下来，尝试将所有这些内容项目进行分类，以便你能想清楚在不同页面上哪些部分要放在一起。这与卡片分类法非常相似。
- 现在尝试草绘一个粗略的站点地图 - 为你网站上的每个页面创建一个气泡，并绘制线条以显示页面之间的典型工作流程。主页可能位于中心，并连接到大多数（如果不是全部）网页；尽管会有例外，但小型网站中的大多数页面都应该可以通过主导航访问。你可能还需要注意如何展现事物。
主动学习：创建你自己的站点地图
尝试对你自己创建的网站进行上述练习。你想做什么样的网站？
注意：将你的工作保存在某处；你以后可能需要它。
总结
此时，你应该更好地了解了如何构建网页/网站。在本单元的最后一篇文章中，我们将学习如何调试HTML。
更多建议：