HTML教程-HTML5语义化
在任何语言中，理解单词的含义对于交流都是至关重要的。如果是计算机通信，这就更加关键。因此，HTML5提供了更多的语义化元素，使代码更易于理解。
因此，语义化定义了单词和短语的含义，即
语义化元素=带有含义的元素。语义化元素对于浏览器和开发者都有简单而清晰的含义。
例如：
在HTML4中，我们已经看到<div>，<span>等非语义化元素。它们对其内容没有提供任何信息。
另一方面，<form>，<table>和<article>等语义化元素能够清晰地定义它们的内容。
HTML5语义化元素被所有主要的浏览器支持。
为什么使用语义化元素？
在HTML4中，开发人员必须使用自己的id/class名称来为元素设置样式：header，top，bottom，footer，menu，navigation，main，container，content，article，sidebar，topnav等等。
这对于搜索引擎来识别正确的网页内容是非常困难的。现在在HTML5元素（<header> <footer> <nav> <section> <article>）中，这将变得更加容易。它现在允许数据在应用程序、企业和社区之间共享和重复使用。
语义化元素可以增加网站的可访问性，并有助于创建更好的网站结构。
HTML5中的语义化元素
| 索引 | 语义标签 | 描述 |
|---|---|---|
| 1. | <article> | 定义文章 |
| 2. | <aside> | 定义除页面内容之外的内容 |
| 3. | <details> | 定义用户可以查看或隐藏的附加详细信息 |
| 4. | <figcaption> | 为<figure>元素定义标题 |
| 5. | <figure> | 指定独立的内容，如插图、图表、照片、代码列表等 |
| 6. | <footer> | 为文档或部分定义页脚 |
| 7. | <header> | 为文档或部分定义标题 |
| 8. | <main> | 指定文档的主要内容 |
| 9. | <mark> | 定义标记/高亮文本 |
| 10. | <nav> | 定义导航链接 |
| 11. | <section> | 定义文档中的一个部分 |
| 12. | <summary> | 为<details>元素定义可见标题 |
| 13. | <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>Web设计教程</h2>
<section>
<h3>HTML</h3>
<p>HTML是超文本标记语言的缩写，用于创建网页和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.javatpoint.com/html-tutorial">HTML</a> |
<a href="https://www.javatpoint.com/java-tutorial">Java</a> |
<a href="https://www.javatpoint.com/php-tutorial">PHP</a> |
<a href="https://www.javatpoint.com/css-tutorial">CSS</a>
</nav>
</body>
</html> HTML5 <header> 元素
<header> 元素表示文档的页眉，可以包含引言内容或导航链接。
示例：
<header>
<h1>欢迎访问 Web123.com</h1>
<nav>
<ul>
<li>首页 |</li>
<li>关于我们 |</li>
<li>联系我们</li>
</ul>
</nav>
</header> HTML5 <footer> 元素
<footer> 标签定义HTML文档或页面的页脚。
示例：
<footer>
<p>版权所有 2019。保留所有权利。</p>
</footer> 
