HTML标签的语义化,语义化标签的常用操作

来源：喔唷网编辑：喔唷教程时间：2025-04-02 浏览：

HTML标签的语义化这个词听着很陌生，很多人并不理解什么是语义化，针对HTML来说HTML标签语义化就是指使用HTML标签来传达内容的结构和含义而不是仅仅的用样式来呈现，语义化的HTML标签

HTML 标签的语义化

HTML语义化标签

HTML 语义化是指使用恰当的 HTML 标签来传达内容的结构和含义，而不仅仅是用于样式呈现。语义化的 HTML 使网页内容对浏览器、开发者、搜索引擎和辅助技术（如屏幕阅读器）更具可读性和可理解性。HTML标签语义化以后主要有以下优点：

更好的可访问性：屏幕阅读器等辅助技术可以更好地解释页面内容
SEO 优化：搜索引擎更容易理解页面结构和内容重要性
代码可维护性：开发者更容易理解代码结构和意图
未来兼容性：语义化标签更可能在未来浏览器和设备上保持良好表现

那么正常情况下那些标签可以具体的语义化呢？下面我们列举了一些常用的语义化标签：

常用的HTML标签	解释说明
<header>	页面或部分的页眉
<footer>	页面或部分的页脚
<nav>	导航链接
<main>	文档主要内容
<article>	独立的自包含内容（如博客文章）
<section>	与主要内容间接相关的内容（如侧边栏）
<h1>-<h6>	标题层级,标签从小到大的层级。
<p>	段落
<ul>, <ol>, <li>	列表标签
<figure>	自包含内容（如图像、图表）
<figcaption>	<figure>的标题标签
<blockquote>	块引用
<cite>	引用来源
<time>	时间或日期
<address>	联系信息
<strong>	重要的文本信息、加粗功能
<em>	强调文本（通常斜体）
<mark>	标记/高亮文本
<small>	小号文本（如免责声明）
<code>	计算机代码,包含其他语言代码
<pre>	预格式化文本,用于格式化代码

语义化的HTML标签能够让开发者尽量在HTML开发中尽量减少<div>的堆砌使用，当在没有语义化的标签时才选择使用<div>,使用语义化标签还能够保持标题层级逻辑性比如标题标签（h1 > h2 > h3 等）使用 <label> 关联表单控件能够让表单更好的表述。如果当语义不足的时候尽量使用 ARIA 属性来补充，语义化的标签能够更好的表现内容的意义而不是用于表现外观显示。

下面我们用一个未定义语义化的html文件和一个定义语义化的标签来作为对比。

未定义语义化-非语义化代码

<div id="header">
  <div class="nav">
    <span class="item">首页</span>
    <span class="item">关于</span>
  </div>
</div>
<div class="main-content">
  <div class="post">
    <div class="title">文章标题</div>
    <div class="text">文章内容...</div>
  </div>
</div>

下面是定义了语义化的标签-语义化的代码

<header>
  <nav>
    <ul>
      <li><a href="/">首页</a></li>
      <li><a href="/about">关于</a></li>
    </ul>
  </nav>
</header>
<main>
  <article>
    <h1>文章标题</h1>
    <p>文章内容...</p>
  </article>
</main>

通过对比我们就能很清楚和直观的看到语义化的标签在实际使用中更加能够体现结构的展现，而并非以为的使用<div>标签来操作内容，让html代码看起来没有层级感。当然这只是一种个人感觉，用任何一种方式都能达到设计的效果，这个因人而定。