HTML 语义元素

语义元素=有意义的元素。

语义学（源自古希腊）可定义为对语言意义的研究。

什么是语义元素?

语义元素清楚地向浏览器和开发者描述其意义。

非语义元素的例子： <div> , <span> - 无法提供关于其内容的信息。

语义元素的例子： <form>, <table>, <article> - 清晰地定义其内容。

HTML 中的语义元素

许多网站包含了指示导航、页眉以及页脚的 HTML 代码，例如这些： <div id="nav"> <div class="header"> <div id="footer">

HTML 提供了定义页面不同部分的语义元素：

HTML <section> 元素

<section> 元素定义文档中的节。

根据 W3C 的 HTML 文献："节（section）是有主题的内容组，通常具有标题"。

可以将网站首页划分为简介、内容、联系信息等节。

HTML <article> 元素

<article> 元素规定独立的自包含内容。

文档有其自身的意义，并且可以独立于网站其他内容进行阅读。

<article> 元素的应用场景：

• 论坛
• 博客
• 新闻

在 <section> 中嵌套 <article>?

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

<section> 元素定义文档中的节。

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

在因特网上，您会发现 <section> 元素包含 <article> 元素的 HTML 页面，还有 <article> 元素包含 <sections> 元素的页面。

您还会发现 <section> 元素包含 <section> 元素，同时 <article> 元素包含 <article> 元素。

HTML <header> 元素

<header> 元素为文档或节规定页眉。

<header> 元素应该被用作介绍性内容的容器。元素通常包含：

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

注释: 在一个HTML文档中可以有多个 <header> 元素。但是, <header> 不能放在 <footer>, <address> 或其 <header> 元素中。

HTML <footer> 元素

<footer> 元素为文档或节规定页脚。

<footer> 元素应该提供有关其包含元素的信息。

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

一个文档中可以有多个 <footer> 元素。

HTML <nav> 元素

<nav> 元素定义导航链接集合。

HTML <aside> 元素

<aside> 元素页面主内容之外的某些内容（比如侧栏）。

<aside> 内容应该与周围内容相关。

HTML <figure> 和 <figcaption> 元素

<figure> 指定自包含的内容，如插图、图表、照片、代码列表等。

<figcaption> 定义 <figure> 元素的标题。

通过 HTML5，图片和标题能够被组合在 <figure> 元素中：<img> 元素定义图像，<figcaption> 元素定义标题。

为什么使用语义元素?

根据 W3C，语义网："允许跨应用程序、企业和团体对数据进行分享和重用。"

HTML 中的语义元素

下面列出了以字母顺序排列的 HTML 新语义元素。