HTML5 语义元素
语义学（源自古希腊）可定义为对语言意义的研究。
语义元素是拥有语义的元素。
什么是语义元素？
语义元素清楚地向浏览器和开发者描述其意义。
非语义元素的例子：
和 - 无法提供关于其内容的信息。语义元素的例子：、
以及 - 清晰地定义其内容。
HTML5 中新的语义元素
许多网站包含了指示导航、页眉以及页脚的 HTML 代码，例如这些：
<div id="nav"> <div class="header"> <div id="footer">。
HTML5 提供了定义页面不同部分的新语义元素：
- article
- aside
- detalls
- figcaption
- figure
- footer
- header
- main
- mark
- nav
- section
- summary
- time
HTML5 语义元素
1.0 <section>元素
<section>元素定义文档中的节。
根据 W3C 的 HTML 文献：“节（section）是有主题的内容组，通常具有标题”。
可以将网站首页划分为简介、内容、联系信息等节。
<!DOCTYPE html>
<html>
<body>
<section>
<h1>WWF</h1>
<p>
你好
</p>
</section>
<section>
<h1>WWF's Panda symbol</h1>
<p>
你好
</p>
</section>
</body>
</html>
2.0 <article>元素
<article>元素规定独立的自包含内容。
文档有其自身的意义，并且可以独立于网站其他内容进行阅读。
<article> 元素的应用场景：
- 论坛
- 博客
- 新闻
实例:
<!DOCTYPE html>
<html>
<body>
<article>
<h1>文章标题</h1>
<p>文章内容</p>
</article>
</body>
</html>
3.0 嵌套语义元素
在 HTML5 标准中，
<section>元素被定义为相关元素块。
我们能够使用该定义来决定如何嵌套元素吗？不，我们不能！
在因特网上，您会发现 <section>元素包含 <article>元素的 HTML 页面，还有<article>元素包含 <sections>元素的页面。
您还会发现<section>元素包含 <section> 元素，同时 <article> 元素包含
4.0 <header>元素
一个文档中可以有多个
下例为一篇文章定义了页眉：
<!DOCTYPE html>
<html>
<body>
<article>
<header>
<h1> 元素为文档或节规定页眉。</h1>
<p>WWF's mission:</p>
</header>
<p><header> 元素应该被用作介绍性内容的容器。
一个文档中可以有多个<header>元素。</p>
</article>
</body>
</html>
5.0 <footer>元素
<footer> 元素为文档或节规定页脚。
<footer> 元素应该提供有关其包含元素的信息。
页脚通常包含文档的作者、版权信息、使用条款链接、联系信息等等。
您可以在一个文档中使用多个<footer>元素。
6.0 <nav>元素
<nav> 元素定义导航链接集合。
<nav> 元素旨在定义大型的导航链接块。不过，并非文档中所有链接都应该位于 <nav> 元素中！
7.0 <aside>元素
aside 内容应该与周围内容相关。
8.0 <figure>和 <figcaption>元素
在书籍和报纸中，与图片搭配的标题很常见。
标题（caption）的作用是为图片添加可见的解释。
通过 HTML5，图片和标题能够被组合在<figure>元素中：
为何使用 HTML5 元素？
如果使用 HTML4 的话，开发者会使用他们喜爱的属性名来设置页面元素的样式：
header, top, bottom, footer, menu, navigation, main, container, content, article, sidebar, topnav, …
如此，浏览器便无法识别正确的网页内容。
而通过 HTML5 元素，比如：
根据 W3C，语义网：
“允许跨应用程序、企业和团体对数据进行分享和重用。”
HTML5 中的语义元素
下面列出了以字母顺序排列的 HTML5 新语义元素。
这些链接指向完整的 HTML 参考手册。
| 标签 | 描述 |
|---|---|
| 定义文章。 | |
| 定义页面内容以外的内容。 | |
| 定义用户能够查看或隐藏的额外细节。 | |
|
| 定义
|
|
| 规定自包含内容，比如图示、图表、照片、代码清单等。 |
| 定义文档或节的页脚。 | |
|
| 规定文档或节的页眉。 |
| 规定文档的主内容。 | |
| 定义重要的或强调的文本。 | |
| 定义导航链接。 | |
| 定义文档中的节。 | |
| 定义 元素的可见标题。 | |
| 定义日期/时间。 |
标签：定义,元素,语义,内容,HTML5,文档 来源： https://blog.csdn.net/qq_41076577/article/details/121893281
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。