HTML中的语义化元素

语义元素

HTML5的主要进步之一是引入了一组标准化的语义元素。术语“语义”指的是单词或事物的含义，因此”语义元素“是用于以更有意义的方式标记文档结构的元素，这种方式可以清楚地表明它们的用途和它们在文件中服务的目的是什么。而且重要的是，由于它们是标准化的，定义文档的这些元素可以被每个人使用并理解，包括机器人。

语义化的优点

  • 可以在没有 CSS 样式表的情况下也能呈现出很好的内容结构
  • 有利于 SEO 优化（爬虫依赖 HTML 的标签来确定渲染关键字的权重）
  • 方便其他设备解析（屏幕阅读器、盲人阅读器）提升用户体验
  • 增强了代码的可读性和可维护性

常用语义化标签

<article>

表示一个独立的、完整的文章或内容块，如新闻文章、博客帖子等。

<aside>

表示与页面主要内容不相关的部分，如侧边栏、广告。

<details>

表示详细信息展现元素，<details> 元素可创建一个组件，当切换至展开状态时，它才会显示内含的信息。<summary> 元素作为详情信息的摘要或者标签。

<figure>

表示一段独立的内容，可能包含 <figcaption> 元素定义的说明元素。该插图、标题和其中的内容通常作为一个独立的引用单元。

通常，<figure> 的内容为图像、插图、图表、代码片段等，在文档的主内容流中引用，但可以移动到文档的另一部分或附录而不影响主内容流。

表示导航或者介绍性的内容。

表示最近一个章节内容或者根节点（sectioning root）元素的页脚。包含作者信息、相关链接、版权信息等。

<h1> ~ <h6>

表示文章中不同层级的标题。

<main>

表示文档的主要内容区域，<main>元素内容应当是独一无二的，一个页面通常只能有一个 <main> 元素。

表示导航。

  • 在 header 中大多表示文章目录
  • 在 aside 中大多是关联页面或者是整站地图

<section>

表示 HTML 文档中一个通用独立章节，它没有更具体的语义元素来表示。一般来说会包含一个标题。

<time>

表示 24 小时制时间或者公历日期，若表示日期则也可包含时间和时区。

此元素意在以机器可读的格式表示日期和时间。有安排日程表功能的应用可以利用这一点。

> cd ..