简述你对html语义化的理解（七爪源码什么是语义）

HTML 标签告诉浏览器如何组织和显示网页的内容。 语义 HTML 是一项功能，我们可以在其中以更具描述性的方式编写 HTML 代码。 它使人们了解这行代码或代码块的作用，而不是它们应该如何构建或外观。 在语义 HTML 之前，我们经常会看到一堆 div 标签、p 标签和 span 标签，它们并没有说明它们的内容，我们通常使用“id”来说明它们的用途（或评论）。 然而，我们可以用一种更加不言自明的方式来做到这一点，而无需使用 id 或类来描述它们的角色。

以下是语义 HTML 之前的代码：

<div id="header"> <div id="nav-bar"> <a href="index.html">Home</a> <a href="about.html">About Us</a> </div> </div> <div id="main"> This is the section where main content goes. <div class="content"> <div>This is for section 1 content.</div> </div> <div class="content"> <div>This is for section 2 content.</div> </div> <div class="content"> <div>This is for section 3 content.</div> </div> </div> <div id="footer"> <div>This is for footer.</div> </div>

这与语义 HTML 的使用有关。

<header> <nav> <a href="index.html">Home</a> <a href="about.html">About Us</a> </nav> </header> <main> This is the section where main content goes. <section> <h2>Section 1</h2> <div>This is for section 1 content.</div> </section> <section> <h2>Section 2</h2> <div>This is for section 2 content.</div> <article> <figure> <img src="/whatever.png" /> <figcaption> This is the image caption. </figcaption> </figure> <p>Article content goes here.</p> </article> </section> <section> <h2>Section 3</h2> <div>This is for section 3 content.</div> </section> </main> <footer> <div>This is for footer.</div> </footer>

这些是 HTML5 中引入的语义 HTML 标记的一些示例，您可以在代码中使用它们：

<header>

• 包含网页和导航菜单的介绍性项目。 它与 <h1> 相似但不同，因为 <header> 用于表示节，而 <h1> 用于放置该节的标题。

<footer>

• 包含页脚信息，例如版权、隐私政策、联系人等。

<nav>

• 包含导航链接

<main>

• 表示主要内容区域，该区域只能在页面中使用一次。 （一个文档不能有多个没有指定隐藏属性的主要元素。）

<section>

• 代表一个独立的通用部分，理想情况下，每个部分都应该有一个该部分本身的标题。

<figure> & <figcaption>

• 这个独立的元素可用于将图像及其标题分组

其中大约有100个……

以下是使用语义 HTML 的一些好处：

1) 可读性

<header>、<footer>、<nav>……它们的作用大多类似于 <div>，但是，这将使您更清楚地了解这些块中的内容是什么。第二个块比上面的两个代码块更容易阅读和理解。作为开发人员，我们经常需要查看其他人的代码。因此，语义 HTML 肯定会改善代码的阅读体验。

2）改善搜索引擎优化

这些关键字将提高您内容的搜索排名，因为它提供了更丰富的信息，而不是 <div> 对搜索引擎没有任何影响。

3) 可访问性

语义 HTML 将提高您网页的可访问性，从而为通过屏幕阅读器或仅依靠键盘导航（使用 tab 键从一个部分跳转到另一个部分）访问这些页面的观众提供更精确的上下文。例如，您可能希望使用 <button> 而不仅仅是按钮的 <a> 标签。有关其他信息，您还可以使用按钮的值将“角色”属性分配给 <a>。这也将被屏幕阅读器识别。

我希望这能让您深入了解什么是语义 HTML，以及它如何提高我们的代码质量。

关注七爪网，获取更多APP/小程序/网站源码资源！

,