https://houdunren.gitee.io/note/html/2%20%E9%A1%B5%E9%9D%A2%E7%BB%93%E6%9E%84.html#语义标签

语义化标签是HTML5新特性

网站导航和搜索栏通常会放在<header>里面。 一个页面可能包含多个<header>，但是一个具体的场景里面只能包含一个，比如网页的页眉只能有一个。另外，<header>里面不能包含另一个<header>或<footer>。

通常包含版权信息或者其他相关信息。

<footer>不能嵌套，即内部不能放置另一个<footer>，也不能放置<header>。

header和footer都不可以与自身嵌套,彼此之间也不能互相嵌套

一个页面只能有一个<main> <font style="color:#F5222D;"><main></font>是顶层标签，不能放置在<header>、<footer>、<article>、<aside>、<nav>等标签之中。 另外，功能性区块（比如搜索栏）不适合放入<font style="background-color:#FADB14;"><main></font>，除非当前页面就是搜索页面。

<article>标签表示页面里面一段完整的内容，即使页面的其他部分不存在，也具有独立使用的意义，通常用来表示一篇文章或者一个论坛帖子。

一个网页可以包含一个或多个<article>，比如包含多篇文章。

<aside>标签用来放置与网页或文章主要内容间接相关的部分。网页级别的<aside>，可以用来放置侧边栏，但不一定就在页面的侧边；文章级别的<aside>，可以用来放置评论或注释。

下面是网页级别的<aside>的例子。

  1. <body>
  2.   <main>主体内容</main>
  3.   <aside>侧边栏</aside>
  4. </body>

下面是文章评注的例子。

  1. <p>第一段</p>
  2. <aside>
  3.   <p>本段是文章的重点。</p>
  4. </aside>

<section>标签表示一个含有主题的独立部分，通常用在文档里面表示一个章节，比如<article>可以包含多个<section>。<section>总是多个一起使用，一个页面不能只有一个<font style="color:#F5222D;"><section></font>。

  1. <article>
  2.   <h1>文章标题</h1>
  3.   <section>
  4.     <h2>第一章</h2>
  5.     <p>...</p>
  6.   </section>
  7.   <section>
  8.     <h2>第二章</h2>
  9.     <p>...</p>
  10.   </section>
  11. </article>

上面代码中，<article>包含了两个<section>，代表两章。

<section>很适合幻灯片展示的页面，每个<section>代表一个幻灯片。

一般来说，<section>都应该有标题，即包含<h1>~<h6>标签。多个<font style="background-color:#FADB14;"><section></font>可以放置在同一个<font style="background-color:#FADB14;"><article></font>里面，一个<font style="background-color:#FADB14;"><section></font>里面也可能包含多个<font style="background-color:#FADB14;"><article></font>，这取决于<section>和<article>在当前页面的含义。

<nav>标签用于放置页面或文档的导航信息。

一般来说，<nav>往往放置在<header>里面，不适合放入<footer>。另外，一个页面可以有多个<nav>，比如一个用于站点导航，另一个用于文章导航。

如果主标题包含多级标题（比如带有副标题），那么可以使用<hgroup>标签，将多级标题放在其中。

  1. <hgroup>
  2.   <h1>Heading 1</h1>
  3.   <h2>Subheading 1</h2>
  4.   <h2>Subheading 2</h2>
  5. </hgroup>

注意，<hgroup>只能包含<h1>~<h6>，不能包含其他标签。

拓展：

CSS语义化

如果说 HTML 语义化是给机器看的，那么 CSS 命名的语义化就是给人看的。

ARIA

ARIA 即 Accessible Rich Internet Application，中文译为无障碍富互联网应用。其主要目的是为一些有功能障碍（如听力，视力）的人群通过屏幕阅读器例如 voiceover 等，提供无障碍访问动态、可交互Web内容。

其中应用于 HTML 的有两个关键属性：

  • role：标识了一个元素的作用
  • aria-*：描述了与之有关的事物特征及其状态

面试题

对语义化的了解

  • 用正确的标签做正确的事情！
  • HTML语义化就是让页面的内容结构化，便于对浏览器、搜索引擎解析；
  • 在没有样式CSS情况下也以一种文档格式显示，并且是容易阅读的。网页加载慢导致CSS文件还未加载时（没有CSS），页面仍然清晰、可读、好看。
  • 搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重，利于 SEO。
  • 使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解