HTML5 语义
任何语言在交流过程中理解单词的含义都是至关重要的。如果这是计算机通信，那么它将变得更加关键。因此，HTML5提供了更多的语义元素，可以轻松理解代码。
因此，语义定义了单词和短语的含义，即
语义元素=具有含义的元素。语义元素对浏览器和开发人员都具有简单明了的含义。
例如：
在HTML4中，我们看到了<div>，<span>等是非语义元素。他们没有透露任何内容。
另一方面，<form>，<table>和<article>等是语义元素，因为它们清楚地定义了它们的内容。
HTML5语义元素得到了所有的主流浏览器支持。
为什么要使用语义元素？
在HTML4中，开发人员必须使用自己的id/class名称来设置元素的样式：标头，顶部，底部，页脚，菜单，导航，主要内容，容器，内容，文章，侧边栏，topnav等。
对于搜索引擎来说，要识别正确的网页内容非常困难。现在在HTML5元素（<header><footer><nav><section><article>）中，这将变得更加容易。现在，它允许在应用程序，企业和社区之间共享和重用数据。"
语义元素可以增加网站的可访问性，还有助于创建更好的网站结构。
HTML5中的语义元素
| 语义标签 |
说明 |
| <article> |
定义文章 |
| <aside> |
除了页面内容之外，还定义内容 |
| <detail> |
定义用户可以查看或隐藏的其他详细信息 |
| <figcaption> |
定义<figure>元素的标题 |
| <figure> |
指定独立的内容，例如插图，图表，照片，代码清单等。 |
| <footer> |
定义文档或节的页脚 |
| <header> |
指定文档或节的标题 |
| <main> |
指定文档的主要内容 |
| <mark> |
定义标记/突出显示的文本 |
| <nav> |
定义导航链接 |
| <section> |
定义文档中的部分 |
| <summary> |
定义<details>元素的可见标题 |
| <time> |
定义日期/时间 |
HTML5中的一些重要语义元素
HTML5 <article>元素
HTML <article>元素定义了文章内容在文档，页面，应用程序或网站中。它可以用来代表论坛帖子，杂志，报纸文章或大故事。
示例：
<article>
<h2>今天的亮点</h2>
<p>第一个故事</p>
<p>第二个故事</p>
<p>第三个故事</p>
</article>
HTML5 <aside>元素
<aside>元素表示间接向页面主要内容提供信息的内容。它经常表示为侧边栏。
示例：
<body>
<h2>我去年的回忆</h2>
<p>我上个月和朋友们一起去了巴黎。这是一段难忘的旅程，我希望再次去那里。</p>
<aside>
<h4>巴黎</h4>
<p>法国首都巴黎是欧洲主要城市，同时也是 艺术，时尚，美食和文化的全球中心。</p>
</aside>
</body>
HTML5 <section>元素
<section>元素用于表示HTML文档中的独立部分。一个页面可以包含多个部分，每个部分可以包含任何内容，但是每个部分的标题不是必需的。
示例：
<h2>网页设计教程</h2>
<section>
<h3>HTML</h3>
<p>HTML是其代表的缩写 用于 其中使用超文本标记语言 用于 创建web页面和web应用程序。</p>
</section>
<section>
<h3>CSS</h3>
<p>CSS表示 用于 层叠样式表。它是一种样式表语言，用于描述以标记语言编写的文档的外观和格式。它提供了HTML的附加功能。</p>
</section>
将<article>标签嵌套在<section>标签中还是反之亦然？
我们知道<article>元素指定了独立的独立内容，而<section>元素定义文档中的部分。
在HTML中，我们可以在<article>元素中使用<section>元素，在<section>元素中使用<article>元素。
我们还可以在<section>元素内使用<section>元素，在<article>元素内使用<article>元素。
HTML5 <nav>元素
HTML <nav>元素用于定义一组导航链接。
示例：
<!DOCTYPE html>
<html>
<body>
<nav>
<a href="https://www.lidihuo.com/html/html-index.html">HTML</a> |
<a href="https://www.lidihuo.com/python/python-index.html">Python</a> |
<a href="https://www.lidihuo.com/numpy/numpy-index.html">Numpy</a> |
<a href="https://www.lidihuo.com/django/django-index.html">Django</a>
</nav>
</body>
</html>
HTML5 <header>元素
<header>元素表示文档的标题，该标题可以包含介绍性内容或导航链接。
示例：
<header>
<h1>欢迎来到lidihuo.com</h1>
<nav>
<ul>
<li>首页 |</li>
<li>关于我们 |</li>
<li>联系我们</li>
</ul>
</nav>
</header>
HTML5 <footer>元素
<footer>标记定义HTML文档或页面的页脚。
示例：
<footer>
<p>© Copyright 2020. All rights reserved. </p>
</footer>
