目标 了解如何使用语义标签来构建文档，以及如何制定简单网站的结构
文档的基本部分
网页可以看起来彼此不同，但它们都倾向于使用类似的标准组件，除非页面显示全视频或游戏，或是某种艺术项目的一部风，或者是结构不当：
-
标题
通常在顶部有一个大标题和图标，这是一个网站的主要常见信息，通常存在于每一个网页。 -
导航
链接到网站的主要部分；通常由菜单按钮、链接或选项卡表示。于标题一样，这些内容通常在一个网页于另一个网页之间保持一致——在您的网站上导航不一致只会使人疑惑和恼火。许多网页设计师认为导航栏是标题的一部分，而不是独立的组件，但这并不是一个硬性规定；实际上有些人认为，两个独立的会有更好的可访问性，因为如果它们独立，屏幕阅读器可以更好地阅读两个功能。 -
主要内容
中心的一个大区域，包含给定网页的大部分独特内容，例如您正在阅读的主要故事，或您要查看的地图，或者新闻标题等...这是网页的一部分，绝对会因页面而异。 -
侧栏
一些次要信息、链接、引言、广告等。通常这是与主要内容中包含的内容相关（例如在新闻文章页面上，侧边栏可能包含作者的个人信息或相关文章的链接），但有在一些情况下，你会发现一些重复的元素，如辅助导航系统。 -
页脚
横跨页面底部的条纹，通常包含精美的打印、版权通知或者联系信息。它是一个放置公共信息（如标题）的地方，但通常该信息对网站来说不是特别重要。通过提供用于快速访问内容的链接，页脚有时也用于SEO目的。
用于结构化网站的HTML
一些网站有更多的列，有些网站更复杂，但你会有你的想法。使用正确的CSS，您可以使用几乎任何元素来装饰不同的部分，并得到您想要的结果，但如前所述，我们需要遵守语义，并使用正确的元素进行语义化工作。
这是因为视觉效果并不能说明一切。 我们可以对内容最有用的部分使用颜色和字体大小来吸引用户的关注，例如导航菜单和相关链接，但是视觉障碍的人该怎么办，这难道也对那些没有“粉红色”和“大”的概念的人来说非常有用吗？
在您的HTML代码中，您可以根据其功能标记内容部分 - 您可以明确地使用表示上述内容部分的元素，屏幕阅读器等辅助技术可以识别这些元素，并帮助执行“找到主导航 “或”找到主要内容“。 正如我们前面提到的那样，没有使用正确的元素结构和语义去构建网页会有很多的不良影响。
为了实现这样的语义标记，HTML提供了可以用来表示这些部分的专用标签，例如：
- 标题
<header> - 导航栏
<nav> - 主要元素
<main>,具有代表性的内容段落主题可以使用<article><section>,和<div>元素。 - 侧栏
<aside>经常嵌套在<main>中。 - 页脚
<footer>
HTML布局元素细节
从总体详细的理解HTML的元素是不错的——随着你web开发经验的逐渐积累，你将会逐渐理解HTML的元素。你可以通过查阅HTML元素参考找到更多的细节。现在，你需要理解这些主要的元素定义：
-
<main>展现了页面的独特性。只可以在每一个页面上使用一次<main>,直接把它放到<bod>中，在理想的情况下，不应该把它嵌套进其他的元素中。 -
<article>闭合一块与自身相关的内容，这块内容能够解释它自身而不是页面上其他的内容（例如一篇单独的博客）。 -
<section>似于<article>，但是它更多的是伴随着由一个单独功能构成的页面（例如一个小型的地图，或者是一组文章的标题和摘要）。它被认为最好的实际应用是用标题作为每一部分（section）的开头；也要注意的是你可以把不同的<article>分到不同的<section>中，或者把不同的<section>分到不同的<article>中，这要取决于内容 -
<header>现了一系列的介绍性内容。如果它是<body>的子元素,它就定义了网站的全局页眉。但是如果它是<article>或<section>的子元素，它就定义了这些部分的特定的页眉(不要把这些与titles and headings混淆)。 -
<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>
在这种情况中，the editor’s note 应该仅仅是提供额外的对编辑器的说明；它没有额外的语义。对于用户来说，CSS可能用于从主文本中抽离这些note。
<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/" alt="Silver earrings">
</li>
<li>
...
</li>
</ul>
<p>Total cost: $237.89</p>
</div>
这并不是一个<aside>, 因为它和主要内容并没有必要的联系（你想在任何地方都能看到它。它甚至不能用<section>来特定的指定，因为它不是页面上主要内容的一部分。所以在这种情况下用<div>是合适的, 我们还需添加一个head标签帮助屏幕阅读者找到它。
换行与水平分割线
<br>和<hr>将会是你偶然使用并且想要了解的两个元素：
<br>在一个段落中创建一个换行；在你想要生成一系列短行的地方，<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>元素，这一段会直接表示在一行中,有了<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>
网友评论