HTML 中的语义元素 | 青训营笔记
介绍
我们知道，HTML 被用来结构化信息——例如标题、段落和列表等，也可用来在一定程度上描述文档的外观和语义。在编程中，语义指的是一段代码的含义——例如 "运行这行 JavaScript 代码会产生怎样的影响？", 或者 "这个 HTML 的元素有什么作用，扮演了什么样的角色"（而不只是 "它看上去像是什么？"）。
首先我们看一个使用 HTML5 语义元素定义的页面，可以看到通过语义元素，HTML 结构更加清晰了。
HTML 中的语义
语义 HTML 是使用 HTML 标记来加强网页和 Web 应用程序中信息的语义或意义，而不仅仅是定义其表示或外观。根据 W3C，语义网：
“允许跨应用程序、企业和团体对数据进行分享和重用。”
好的语义化 HTML 也改善了网页文档的可访问性（参见网页内容无障碍指南）。例如，当屏幕阅读器或音频浏览器可以正确判定一个文档的结构时，视觉障碍用户不会再因阅读重复或无关的信息而浪费时间。
例如，<h1> 元素是一个语义化元素，赋予了它包裹着的文本“这个页面中最高级别标题功能“的角色 (或含义) 。
<h1>This is a top level heading</h1>
默认情况下，绝大多数浏览器的代理样式将会赋予一个 <h1> 元素很大的字号尺寸从而使它看上去更像是一个标题（虽然你可以把它格式化为任何你想要的样式），但是更重要的是它的语义会被在很多地方以不同的方式被使用到，例如搜索引擎会把它包含的内容作为一个重要的关键词，从而影响这个页面在搜索结果中的排序（SEO），而且屏幕阅读器可以将其用作路标，以帮助视障用户浏览页面。此外，编写语义标记的其他一些好处如下：
- 查找有意义的标记比在 div 等标记中的没有语义或命名空间的样式类要容易得多
- 可以向开发人员建议将要填充的数据类型
- 语义命名反映了正确的自定义元素/组件
但是，你也可以通过样式（CSS）来让任何的元素看上去像是一个最高级别的标题：
<span style="font-size: 32px; margin: 21px 0;">Is this a top level heading?</span>
这将使它看起来像一个顶级标题，但它没有语义值，因此它不会获得如上所述的任何额外好处。
语义元素
语义元素清楚地向浏览器和开发者描述其意义。
- 非语义元素的例子：
<div>和<span>- 无法提供关于其内容的信息。 - 语义元素的例子：
<form>、<table>、<img>等 - 清晰地定义其内容。
许多网站包含了指示导航、页眉、菜单、内容、文章以及页脚的 HTML 代码，例如这些：<div id="nav">、<div class="header">、<div id="menu">、<div id="content">、<div id="post">、<div id="footer">。而在 HTML5 中，提供了一系列新的语义元素来明确一个 Web 页面的不同部分，例如与以上 HTML 代码对应的元素分别为：<nav>、<header>、<menu>、<section>、<article>、<footer>。
下面介绍几个常见的语义元素。
<address> 元素
表示上下文的背景信息，可以是必要的任何一种联系方式，比如真实地址、URL、电子邮箱、电话号码、社交媒体账号、地理坐标等等。
- 虽然
<address>元素看起来只是使用了<i>或者<em>元素的默认样式来渲染其中的文本，通常呈现为斜体，但是当处理联系信息时使用它更为合适，因为它表达了额外的语义信息。 - 当表示一个和联系信息无关的任意的地址时，请改用
<p>元素而不是<address>元素。 - 这个元素不能包含除联系信息之外的任何信息，比如出版日期（这应当被包含在
<time>元素之中）。 - 通常，
<address>元素可以放在<footer>元素之中（如果存在的话）。如果<address>元素位于<article>元素内，则它表示文章的联系信息。 - 大多数浏览器会在
<address>元素前后添加折行。
<article> 元素
表示文档、页面、应用或网站中的独立结构，其意在成为可独立分配的或可复用的结构，如在发布中，它可能是论坛帖子、杂志或新闻文章、博客、用户提交的评论、交互式组件，或者其他独立的内容项目。
- 每个
<article>，通常包括标题（<h1>-<h6>元素）作为<article>元素的子元素。 - 当
<article>元素嵌套使用时，则该元素代表与外层元素有关的文章。例如，代表博客评论的<article>元素可嵌套在代表博客文章的<article>元素中。 <article>元素的作者信息可通过<address>元素提供，但是不适用于嵌套的<article>元素。<article>元素的发布日期和时间可通过<time>元素的pubdate属性表示。- 可以使用
<time>元素的datetime属性来描述<article>元素的发布日期和时间。
<aside> 元素
表示一个和其余页面内容几乎无关的部分，被认为是独立于该内容的一部分并且可以被单独的拆分出来而不会使整体受影响。其通常表现为侧边栏或者标注框（call-out boxes）。
<aside>不能是<address>元素的后代。- 不要把
<aside>元素放在括号内要说明的文本，因为这种文本被认为是主要流内容的一部分。
<footer> 元素
表示最近一个章节内容或者根节点元素的页脚，通常包含该章节作者、版权数据或者与文档相关的链接等信息。
<footer>元素内的作者信息应包含在<address>元素中。<footer>元素必须不能是<address>、<header>或者另一个<footer>元素的后代元素。<footer>元素不是分区内容，因此不能在页面大纲中引入新的分区。
<header> 元素
与全站的横幅标志作用具有相同的意义，除非嵌套在分区内容中。<header> 元素可以定义一个全局网站的标题，在可访问性树中被描述为一个横幅。它通常包括一个标志、公司名称、搜索功能，可能还有全局导航或一个 Logo，一般位于页面的顶部。
否则，它是可访问性树中的一个部分，通常包含周围部分的标题（h1-h6元素）和可选的副标题，但这不是必需的。
<header>元素通常用于包含页面部分的标题（h1 至 h6 元素）。<header>元素必须不能是<address>、<footer>或者另一个<header>元素的后代元素。<header>元素不是分区内容，因此不能在页面大纲中引入新的分区。
<main> 元素
呈现了文档或应用的主体部分，与文档直接相关，或者扩展于文档的中心主题、应用的主要功能部分的内容组成。
<main>与文档的大纲无关，不会影响 DOM 的页面结构，仅有提供信息的作用。<main>元素的内容应当是独一无二的，任何同时存在于任意一系列文档中的相同、重复内容，比如侧边栏、导航栏链接、版权信息、网站 Logo，搜索框（除非搜索框为文档的主要功能），都不应当被包含在其内。- 浏览器的阅读器模式会寻找文档中的
<main>元素，以及 标题元素和内容分区元素以便将内容转换至阅读器视图。
<nav> 元素
表示页面的一部分，其目的是在当前文档或其他文档中提供导航链接，例如菜单，目录和索引。
- 一个网页可能含有多个
<nav>元素，例如一个是网站内的导航列表，另一个是本页面内的导航列表。 - 对于屏幕阅读障碍的人，可以使用这个元素来确定是否忽略初始内容。
<section> 元素
表示 HTML 文档中一个通用独立章节，一般来说会包含一个标题（在文档中，有独立的内容部分但没有标题来描述其内容，是没有任何意义的。标题对所有的读者都很有用，尤其是对使用屏幕阅读器等辅助技术的用户，同时标题也有利于搜索引擎优化）。一般来说，<section> 应该出现在文档大纲中。
<section>元素不能是<address>元素的后代。<section>是一个通用的分节元素，只有在没有更具体的元素来代表它的时候才可以使用。例如一个搜索结果列表或地图显示及其控件并没有特定的元素，可以放在<section>里面。- 当该元素的内容可以作为一个独立的作品在多个媒体上发表，使用
<article>是一个更好的选择。 - 将该元素作为一个样式包装时，应使用
<div>。
总结
当要使用哪个标记时，先清楚哪个(或哪些)元素最适合。例如，它是一个数据列表吗？是有序的还是无序的？它是一篇带有章节和相关信息的文章吗？它列出了定义吗？它是一个需要标题的数字或图像吗？除了全局的页眉和页脚之外，它还应该有一个页眉和页脚吗？等等。