HTML 语义元素

语义元素=具有含义的元素。

什么是语义元素？

语义元素清楚地向浏览器和开发人员描述了其含义。

示例非语义的要素：<div>和<span>- 没有透露其内容。

示例语义要素：<form>,<table>， 和<article>- 明确定义其内容。

HTML 中的语义元素

许多网站都包含 HTML 代码，例如： <div id="nav"> <div class="header"> <div id="footer"> 来指示导航、页眉和页脚。

在 HTML 中，有一些语义元素可用于定义网页的不同部分：

HTML <section> 元素

这个<section>元素定义文档中的一个部分。

根据 W3C 的 HTML 文档："A section is a thematic grouping of content, typically with a heading."

示例<section>可以使用元素：

• 章节
• 简介
• 新闻报道
• 联系信息

网页通常可以分为介绍部分、内容部分和联系信息部分。

HTML <article> 元素

这个<article>元素指定独立的、自包含的内容。

一篇文章本身应该有意义，并且应该可以独立于网站的其余部分进行分发。

示例<article>可以使用元素：

• 论坛帖子
• 博客文章
• 用户评论
• 产品卡
• 报纸文章

将 <article> 嵌套在 <section> 中还是反之亦然？

这个<article>元素指定独立的、自包含的内容。

这个<section>元素定义文档中的部分。

我们可以使用定义来决定如何嵌套这些元素吗？不，我们不可以！

所以，你会发现 HTML 页面<section>元素包含<article>元素，以及<article>元素包含<section>元素。

HTML <header> 元素

这个<header>元素表示介绍性内容或一组导航链接的容器。

<header>元素通常包含：

• 一个或多个标题元素 (<h1> - <h6>)
• 标志或图标
• 作者信息

笔记：你可以有几个<header>一个 HTML 文档中的元素。然而，<header>不能放置在<footer>,<address>或其他<header>元素。

HTML <页脚> 元素

这个<footer>元素定义文档或部分的页脚。

<footer>元素通常包含：

• 作者信息
• 版权信息
• 联系信息
• 站点地图
• 返回顶部链接
• 相关文件

你可以有几个<footer>一个文档中的元素。

HTML <nav> 元素

这个<nav>元素定义一组导航链接。

HTML <aside> 元素

这个<aside>元素定义了除了其所在内容之外的一些内容（如侧边栏）。

这个<aside>内容应该与周围的内容间接相关。

HTML <figure> 和 <figcaption> 元素

这个<figure>标签指定独立的内容，例如插图、图表、照片、代码列表等。

这个<figcaption>标签定义了一个标题<figure>元素。这<figcaption>元素可以放置为第一个或最后一个子元素<figure>元素。

这个<img>元素定义实际图片/插图。

为什么是语义元素？

根据 W3C："A semantic Web allows data to be shared and reused across applications, enterprises, and communities."

HTML 中的语义元素

下面是 HTML 中一些语义元素的列表。