语义 HTML 及其重要性

您是否使用 div 标签来封闭网页的每个重要部分，并且厌倦了事后维护整个代码库，那么我强烈建议您开始在代码中使用语义 HTML。

那么，什么是语义HTML

语义 HTML 是一种编写可读 HTML 代码的方式，它赋予网页以含义，而不仅仅是呈现部分。

它不会影响您的网页的外观，但肯定会使您的代码更易于访问，使人类和机器更容易阅读。

例如，<p>标签 A 表明它是一个段落，因此您可以猜测其内容肯定是一个段落。

但另一方面，一个<div>标签可以是导航栏、页脚或主页面。你无法仅凭外观就能猜出它的含义，这就是语义标签的概念的由来。

你可以编写标签来传达一些信息，例如

• <strong>
• <em>
• <nav>
• <header>
• <section>

还有更多...

但这有何影响？

你可能会问，既然这些标签对我的页面呈现效果没有太大影响，那为什么还要费心费力地去关注它们呢？
没错，对一部分用户来说，标签无关紧要，但对于使用屏幕阅读器、浏览代码的用户，甚至网络爬虫来说，标签就很重要了。

使用语义标签的好处

• 提高代码的可读性和可访问性
• 帮助您在搜索引擎结果中排名更高
• 在大型代码库中更易于维护

如何转向编写语义 HTML

从现在开始，每次构建新网站时都应该使用一些基本的语义标签，以取代将所有内容包含在 div 或 span 中的旧方法。

例如，不要像这样编写导航栏：

<div class="nav"> ...... </div>

尽可能使用这个

<nav> ..... < /nav>

看到它任何人都可以看出这是页面的导航部分，同样，您可以使用其他语义标签，例如将代码分成不同的部分，以便于管理 -

• <header> .... </header>将包含页面的标题部分

• <footer> .... </footer>页面的页脚

• 您可以使用<section>标签将页面内容分成不同的部分

• <article>每当您需要撰写文章或长段落时，标签

• <aside>内容旁边或侧边栏的附加信息标签

• 用于<figure>包装图像内容，并<figcaption>为该图像写一个标题。

现在让我们来讨论一些鲜为人知的 HTML 标签，它们可能在各种情况下对你有帮助 -

• <pre>- pre 代表预格式化文本。有时您希望文本之间有空格或换行符，而这无法通过简单的段落标签实现。因此，pre 元素内的文本会同时保留空格和换行符，并按照 HTML 源代码中的格式准确显示。

• <picture>- 当您需要为不同的媒体查询使用不同的图片时，可以使用此标签；它最常用于响应式设计。这样，您无需再根据视口缩放一张图片，而是可以放置多张图片以适应浏览器视口。

• <details> & <Summary>- 用于显示/隐藏可折叠标题下的内容，无需使用 JS。details 标签允许您添加额外的详细信息，以便用户根据需要打开和关闭。summary
  标签与 detail 标签配合使用，用于指定详细信息的可见标题。

例如
<details open>
<summary>Heading</summary>
<p>The content will go here…</p>
</details>

• <datalist> & <option>- 用于为输入元素指定预定义选项列表。因此它用于为输入元素提供自动完成功能。

例如
<datalist>
<option value="Option 1">
<option value="Option 2">
<option value="Option 3">
<datalist>

• <dialog>- 用于显示弹出窗口或模式窗口此元素可以轻松地在任何网页上创建弹出对话框和模式窗口。

例如
<dialog open>
<p>Content goes here...</p>
</dialog>

• <cite> and <q>-<q>标签用于指定引用，而 cite 标签定义作品的标题。我们经常需要引用某些内容，而仅仅将引用放在“ ”标签内并不能赋予其意义，因此最好将引用放在标签内<q>，将标题放在 cite 标签内。

• <time>- 时间标签用于定义特定的时间或日期。
  世界各地的日期和时间格式各不相同，因此很难通过搜索引擎或电子邮件客户端进行解析。因此，将页面上的时间信息封装在时间标签中，可以使代码更易于机器读取。

你可以看到 div 和 span 的使用量大幅减少，代码也变得更加简洁。这就是语义化 HTML 的强大之处。

编写 HTML 很容易，但代码的结构比内容本身更重要，这样才能让代码更容易被所有人理解，并且当页面代码库规模扩大时，代码也更容易维护。因此，语义化 HTML 不仅仅是一种选择，而是一种必需品，更多人在构建任何 Web 项目时都应该开始考虑这一点。

daily.dev在每个新标签页发布最棒的编程新闻。我们将为您筛选数百个优质资源，助您掌控未来。