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 中的语义化元素

一些重要的 HTML5 语义化元素

HTML5 <article> 元素

HTML <article> 元素定义文档、页面、应用程序或网站中的文章内容。它可以用于表示论坛帖子、杂志、报纸文章或重大新闻。

示例

HTML5 <aside> 元素

The <aside> 元素代表间接提供页面主要内容信息的内容。它经常被表示为侧边栏。

示例

HTML5 <section> 元素

The <section> 元素用于表示 HTML 文档中的独立部分。一个页面可以有多个部分，每个部分可以包含任何内容，但每个部分的标题不是强制的。

示例

嵌套 <article> 标签在 <section> 标签内或反之？

我们知道 <article> 元素指定独立、自包含的内容，而 <section> 元素定义文档中的一个部分。

在 HTML 中，我们可以在 <article> 元素中使用 <section> 元素，也可以在 <section> 元素中使用 <article> 元素。

我们也可以在 <section> 元素中使用 <section> 元素，以及在 <article> 元素中使用 <article> 元素。

例如

在一份报纸上，体育版的体育 <article>，可以在每个 <article> 中有一个技术部分。

HTML5 <nav> 元素

HTML <nav> 元素用于定义一组导航链接。

示例

HTML5 <header> 元素

The <header> 元素代表文档的页眉，其中可以包含介绍性内容或导航链接。

示例

HTML5 <footer> 元素

The <footer> 标签定义 HTML 文档或页面的页脚。

示例