HTML 结构化语义元素

语义元素理解

语义 = 意义
语义元素 = 有意义的元素
语义元素能够清楚的描述其意义给浏览器和开发者。

无语义元素实例: <div> 和 <span> - 无需考虑内容.
语义元素实例: <header>, <table>, and <img> - 清楚的定义了它的内容.

HTML5提供了新的语义元素来明确一个Web页面的不同部分:

1.<header> 元素

<header> 元素为文档或节规定页眉，一般是由导航, logo 等元素组成。
<header> 元素应该被用作介绍性内容的容器。

<footer> 元素为文档或节规定页脚。
一个页脚通常包含文档的作者，著作权信息，链接的使用条款，联系信息等

3.<aside> 元素

<aside> 标签定义页面主区域内容之外的内容（比如与主体无关的信息，广告位, 相关推荐, 阅读排行等）。

4.<section> 元素

<section> 标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分，是文档或主体中的通用小组件

5.<main> 元素

<main> 标签展示页面主体内容,建议一个页面,只出现一次。

示例代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>结构化语义元素</title>
  </head>
  <body>
    <!-- <header>元素 规定页眉 -->
    <header>
      <h1>&lt;header&gt;</h1>
    </header>
    <div class="container">
      <!-- <aside>元素 设置边栏 -->
      <aside>
        <h1>&lt;aside&gt;</h1>
      </aside>
      <!-- <main>元素 设置主体 -->
      <main>
        <h1>&lt;main&gt;</h1>
      <div>
      <!-- <section> 元素 定义文档中的节-->
        <section>
          <h1>&lt;section&gt;</h1>
        </section>
        <section>
          <h1>&lt;section&gt;</h1>
        </section>
      </div>
    </main>
    </div>
    <!-- <footer>元素 规定页脚 -->
    <footer>
      <h1>&lt;footer&gt;</h1>
    </footer>
  </body>
</html>

HTML5 中其他的语义元素

标签	描述
<article>	定义文章
<details>	定义用户能够查看或隐藏的额外细节
<figure>	规定自包含内容，比如图示、图表、照片、代码清单等
<figcaption>	定义 <figure> 元素的标题
<mark>	定义重要的或强调的文本
<nav>	定义导航链接
<summary>	定义 <details> 元素的可见标题
<time>	定义日期/时间