HTML 中的语义
语义 HTML 是使用 HTML 标记来加强网页和 Web 应用程序中信息的语义或意义，而不仅仅是定义其表示或外观。根据 W3C，语义网：
使用恰当语义的 HTML 标签、CSS 类名，让页面具有良好的语义和结构，从而方便人类和机器都能快速理解网页内容
- 文章：
<article> - 边栏：
<aside> - 主要内容：
<main> - 导航：
<nav> - 区域：
<section> - 网页页眉或
<section>的头部：<header> - 网页页脚或
<section>的脚部：<footer> - 段落：
<p> - 标题：
<h1>~<h6> - 标题组：
<hgroup>，包住多个<h1>~<h6> - 时间：
<time><time>9:00</time>、<time datetime="2021-07-17">日期</time>
<b>、<strong>、<i>、<em> 的异同点：
同：<b> 和 <strong> 会让文本变粗；<i> 和 <em> 会让文本斜体。
异：
<b>定义粗体的文本。<strong>把文本定义为粗体语气更强的强调的内容。<i>定义斜体的文本。<em>把文本定义为斜体强调的内容。
语义元素
语义元素清楚地向浏览器和开发者描述其意义。
- 非语义元素的例子：
<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>。
实际网站分析 - developer.mozilla.org
现在让我们看下一个 mdn 网站 - developer.mozilla.org。
如果您访问他们的随便一篇文章，您可以看到这有个内容，在顶部有一些标题，然后还有这种侧边栏。
让我们看看他们是如何编写 HTML 的。
在这里我们可以看到这是 <main>。所以你的页面上只会有一个主标签，因为它是页面上最主要的内容。
而且他们在这个侧边栏上使用了 <aside>，所以您会了解到 <aside> 基本上不应该出现在 <main> 中，因为它并不是真正的主导内容的一部分。
然后，在 <main> 中我们看到一个 <article>。在这里他们选择了 <article> 而不是 <section>，证明了 <article> 实际上更像是还具有额外的要求。
<section> 只是意味着其中的所有内容都彼此相关，或者它具有相同的语义目的。但我现在需要能够把它从这里拿出来放在其他地方，且它仍然具有意义，这里的情况就是这样。
您可以在这里取出所有文本，可以把它放到其它地方，但它仍然保有相同的本质。
举另一个例子，如果他们在这里发布了某种职位征聘，他们可以将职位发布从这个网站上删除，可以把它放在其它地方，例如放在一个职位网站上，它仍然有意义。放在任何其他地方网站，文章标签是独立的，文章可以被诠释，您可以阅读它，您可以使用它，能清楚理解它的目的性是什么，它又代表什么。
但您未来在大多数项目中可能不会经常使用它，您还是会使用 <section> 和一堆 <div>。
而后，他们在这里也有一个导航栏。
这挺有趣的，他们在这使用了 <aside>，还再次使用了 <nav>。这是正确的，也就是说您不仅会在 <header> 中看到导航栏，有时还会在标题之外看到导航栏。
语义化好处
对人：
- 便于团队的开发和维护。
- 在没有加载 CSS 的情况下也能呈现较好的内容结构与代码结构，易于阅读。
对机器：
- 有利于 SEO（搜索引擎优化），搜索引擎的爬虫依赖于标签来确定上下文和各个关键字的权重。
- 方便其他设备的解析（如屏幕阅读器、盲人阅读器等），利于无障碍阅读，提高可访问性。
