开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 7 天，点击查看活动详情
内容分区元素允许开发者将文档内容从逻辑上进行组织划分。包括<h1> ~ <h6>、<address>和HTML5新增的部分语义元素等分区元素，来为页面内容创建明确的大纲，以便区分各个章节的内容。
这一部分基本都是语义化元素（具有含义的元素）。语义元素能清楚地向浏览器和开发人员描述了它的含义。
区域标题元素 -- <h1> ~ <h6>
<h1> ~ <h6>元素由<h1>开始到<h6>由高到低表示六个级别的节标题。默认情况下，从<h1>开始，font-size逐渐变小，到<h4>时字体大小为1em。font-weight均为bold。
使用说明
-
用户代理可以使用标题的内容自动构造文档的目录。
-
如果只是单纯调整文本大小的话，不要使用标题元素，请改用CSS
font-size属性。 -
不要跳过标题级别：始终从
<h1>开始，然后是<h2>，依此类推。 -
避免在一个页面上使用多个
<h1>元素，尽管标准没有对应的限制，但这并不是一个好做法。页面通常应具有描述页面内容的单个<h1>元素。最好每页只使用一个<h1>和不跳过级别的嵌套标题。
可访问性问题
对于使用屏幕阅读软件的用户来说，常见的导航技术是根据标题快速确定页面内容。因此，不要跳过一个或多个标题级别是很重要的。这样做可能会造成混乱，比如导航的人可能会想知道丢失的标题在哪里。
联系人地址元素 -- <address>
<address>元素指示所附带的HTML为一个、多个人或组织提供联系信息。它呈现的文本默认样式与 <i>或<em>元素相同，但在处理联系信息时，使用<address>更合适，因为它传达了额外的语义信息。
<address>元素的内容所提供的联系信息可以采用适合上下文的任何形式，并且可能包括所需的任何类型的联系信息，例如物理地址、URL、电子邮件地址、电话号码、社交媒体句柄、地理坐标等等。<address>元素应该包括联系信息所引用的个人、人员或组织的名称。
也可以用于各种上下文，例如在页眉中提供商家的联系信息，或通过在<article>包含<address>元素来指示文章的作者。
使用说明
-
<address>元素只能用于表示其最近的<article>或<body>元素祖先的联系信息。 -
此元素不应包含比联系信息更多的信息，例如发布日期（属于
<time>元素）。 -
通常
<address>元素可以放置在当前节的<footer>元素（如果有）内。
HTML5新增的语义化元素
<header>
<header>元素表示介绍性内容的容器或一组导航链接。它可能包含一些标题元素，也可以包含一个logo、搜索表单、作者姓名和其他元素。
使用说明
-
在一个HTML文档中可以有多个
<header>元素。但是<header>不能放置在<footer>、<address>或其他<header>元素中。 -
<header>元素与站点范围内具有role="banner"的元素具有相同的含义，除非在分段内容中嵌套。 -
<header>元素可以定义全局网站标头，描述为辅助功能树中的banner。它通常包括徽标，公司名称，搜索功能，可能还包括全球导航或口号。它通常位于页面顶部。
<nav>
<nav>元素表示页面的一部分，其目的是提供当前文档内或到其他文档的导航链接。导航部分的常见示例包括菜单、目录和索引，例如一些组件库中的面包屑导航。
使用说明
-
<nav>仅适用于主要的导航链接块。不要将所有链接都包含在<nav>元素中；通常，<footer>元素通常具有不需要位于<nav>元素中的链接列表。 -
文档可能有多个
<nav>元素，可以使用aria-labelledby属性来促进可访问性。 -
浏览器可以使用此元素来确定是否省略此内容的初始呈现。
<main>
<main>元素表示文档<body>的主要内容。主要内容区域由与文档的中心主题或应用程序的中心功能直接相关或扩展的内容组成。
使用说明
-
<main>元素的内容对于文档应该是唯一的。它不应该包含任何在文档中重复的内容，如边栏、导航链接、版权信息、站点标识和搜索表单。并且不得是<article>,<aside>,<footer>,<header>和<nav>元素的后代。 -
<main>元素不影响文档的大纲；也就是说，与<body>等元素以及<h2>等标题不同，<main>不会影响DOM对页面结构的概念。
可访问性问题
<main>元素的行为类似于具有role="main"的元素。辅助技术可以使用role来快速识别和导航到文档的大部分。建议使用<main>元素而不是声明role="main"，除非存在遗留浏览器支持问题。
<footer>
<footer>元素表示其最近的祖先分段内容或分段根元素的页脚。通常包含有关该部分作者的信息、版权数据或相关文档的链接。
使用说明
-
将有关作者的信息包含在
<address>元素中，该元素可以包含在<footer>元素中。 -
当最近的祖先切片内容或分段根元素是正文元素时，页脚将应用于整个页面。
-
<footer>元素不是分段内容，因此不会在大纲中引入新部分。
<article>
<article>元素表示文档、页面、应用程序或站点中的自包含组合。用于独立分发或重用。示例包括：论坛帖子、杂志或报纸文章、博客条目、产品卡、用户提交的评论、交互式小部件、小工具或任何其他独立的内容项。
给定的文档中可以有多篇文章；例如，在读者滚动时一篇接一篇显示每篇文章文本的博客上，每篇文章都包含在一个＜article＞元素中，可能包含一个或多个＜section＞。
使用说明
-
应标识每个
<article>，通常通过将标题（<h1> ~ <h6>元素）作为<article>元素的子元素。 -
嵌套
<article>元素时，内部元素表示与外部元素相关的项目。例如，博客文章的评论可以是嵌套在<article>中的<article>元素，表示博客文章。 -
<article>元素的作者信息可以通过<address>元素提供，但不适用于嵌套<article>元素。 -
可以使用
<time>元素的datetime属性来描述<article>元素的发布日期和时间。
<section>
<section>元素表示文档的通用独立部分，该部分没有更具体的语义元素来表示它。各节应始终有一个标题（标题元素指定），只有极少数例外。
使用说明
<section>是一个通用的分段元素，只有在没有更具体的元素来表示它时才应使用。例如，导航菜单应包装在<nav>元素中，但搜索结果列表或地图显示及其控件没有特定元素，可以放在<section>。
除此之外还需要注意：
-
如果元素的内容表示一个独立的、原子的内容单元，可以作为独立的部分（例如博客文章或博客评论，或报纸文章）联合起来，则
<article>元素将是更好的选择。 -
如果内容代表有用的切入信息，与主要内容一起工作，但不是主要内容直接的一部分（如相关链接或作者简介），请使用
<aside>。 -
如果内容表示文档的主要内容区域，请使用
<main>. -
如果仅将元素用作样式包装器，请改用
<div>。
每个<section>应该尽量被标识出来，通常是将标题（<h1> ~ <h6>作为<section>元素的一个子元素。
使用<section>元素但不包含标题的情况，通常出现在web应用或用户界面的部分，而不是传统的文档结构中。在文档中有独立的内容部分但没有标题来描述其内容，是没有任何意义的。标题对所有的读者都很有用，尤其是对使用屏幕阅读器等辅助技术的用户，同时标题也有利于搜索引擎优化。
示例：
<!-- 如果全局导航已经包装在 <nav> 元素中，则可以想象将上一页/下一页菜单包装在<section> -->
<section>
<a href="#">上一页</a>
<a href="#">下一页</a>
</section>
<!-- 在设置控制应用程序的按钮栏时，需要将其作为文档中单独存在部分，但此时并不需要设置标题。 -->
<section>
<button class="reply">Reply</button>
<button class="reply-all">Reply to all</button>
<button class="fwd">Forward</button>
<button class="del">Delete</button>>
</section>
<aside>
＜aside＞元素表示一个仅与文档的主要内容间接相关或几乎无关的部分。通常显示为侧边栏或标注框。
注意：不要使用
<aside>元素来标记括号中的文本，因为此类文本被视为主流的一部分。
其他HTML语义化元素
<details><figcaption><figure><mark><summary><time>
其实语义元素不止这些，现在绝大部分的HTML元素都已经具有或者被新赋予了具体的语义。
