一、什么是HTML语义化？

HTML语义化是指使用符合标准、合理的HTML标签来描述页面结构和内容的方法。在语义化的HTML中，标签的选择应该根据其含义和用途来决定，以便更好地描述页面的结构、内容和意义。能够使我们在用标签构建HTML页面时避免大篇幅地使用无语义的标签。

二、为什么需要HTML语义化呢？

为什么需要HTML语义化呢？以下是几个重要的原因：

可读性和可维护性：通过使用语义化的标签，代码变得更易读、更易于理解和维护。开发人员可以更快速地理解网页结构和内容，减少错误和混乱。
搜索引擎优化：搜索引擎会根据网页的结构和内容进行分析和索引。使用语义化的HTML能够让搜索引擎更准确地理解和解读网页，提升网页在搜索结果中的排名。
辅助技术和可访问性：语义化的HTML能够让屏幕阅读器、搜索引擎爬虫等辅助技术更好地解读和处理网页。这样，即使是视觉障碍用户或其他有特殊需求的用户也能够更方便地访问和使用网页。

三、常见的HTML语义化标签

使用适当的标题标签：使用<h1>到<h6>标签来表示标题和副标题，根据文档结构的层次嵌套使用。确保页面只有一个<h1>标签，用于表示主要标题。
使用段落标签：使用<p>标签来包裹段落文本，给予内容适当的结构。
列表标签：使用有序列表<ol>和无序列表<ul>标签来表示有序和无序的列表。使用列表项<li>包裹每个列表项的内容。
链接标签：使用<a>标签来创建链接，通过href属性指定链接的目标地址。
图片标签：使用<img>标签来插入图片，使用alt属性提供图片的替代文本，以增强可访问性和搜索引擎优化。
表格标签：使用<table>、<thead>、<tbody>、<tr>和<td>等标签来创建表格结构，并使用<th>标签定义表头单元格。
表单标签：使用<form>标签来创建表单，并使用<input>、<select>、<textarea>等表单元素标签来收集用户输入。
导航标签：使用<nav>标签来定义导航区域，使用<ul>和<li>标签创建导航菜单。
侧边栏标签：使用<aside>标签来定义侧边栏区域，将与主要内容有关但又可以独立存在的内容放在其中。
文章和主要内容标签：使用<article>标签来定义独立的文章内容，使用<main>标签来定义页面的主要内容区域。
地址标签：使用<address>标签来表示联系信息或地址等相关信息。

以下是几个常见的HTML语义化案例：

标题与副标题：

<html>
<head>
  <title>网页标题</title>
</head>
<body>
  <header>
    <h1>主标题</h1>
    <h2>副标题</h2>
  </header>
  ...
</body>
</html>

在这个例子中，使用了<header>标签将页面的标题和副标题包裹起来。这样做不仅可以明确页面的层次结构，还有助于搜索引擎理解网页的内容。

导航栏：

<html>
<head>
  <title>网页标题</title>
</head>
<body>
  <nav>
    <ul>
      <li><a href="#">首页</a></li>
      <li><a href="#">关于我们</a></li>
      <li><a href="#">产品</a></li>
      <li><a href="#">联系我们</a></li>
    </ul>
  </nav>
  ...
</body>
</html>

在导航栏中，使用了<nav>标签来定义整个导航区域。内部的<ul>表示无序列表，每个导航项使用<li>和<a>标签表示。这样，不仅可以清晰地表达出导航的结构，还能让搜索引擎更好地理解网站的导航。

主要内容与侧边栏：

<html>
<head>
  <title>网页标题</title>
</head>
<body>
  <main>
    <article>
      <h2>文章标题</h2>
      <p>文章内容...</p>
    </article>
  </main>
  <aside>
    <h3>侧边栏</h3>
    <p>侧边栏内容...</p>
  </aside>
</body>
</html>

在这个例子中，使用了<main>标签定义整个主要内容区域，内部用<article>标签表示一篇文章，其中包含标题和段落。同时，使用<aside>标签定义侧边栏，内部包含侧边栏的标题和内容。这样的结构更直观地表达了主要内容和侧边栏的关系。

这些是常见的HTML语义化实践，通过合适地选择和使用标签，可以提高代码的可读性、可维护性，并且对搜索引擎优化和可访问性也非常有帮助。

四、语义化标签与非语义化标签的区别

非语义化标签是指使用没有明确含义的HTML标签来布局和样式化网页。这些标签通常没有特定的语义，只是用来实现特定的外观效果。例如，使用<div>标签来创建一个容器，使用<span>标签来应用样式等。

区别如下：

可读性和可访问性：语义化标签使网页的结构更加清晰，使人们更容易理解和阅读网页内容。而非语义化标签则没有明确的含义，不利于网页内容的理解和阅读。
搜索引擎优化：语义化标签有助于搜索引擎对网页内容的理解和索引，提高网页在搜索结果中的排名。而非语义化标签对搜索引擎的理解和索引没有帮助。
样式和布局：非语义化标签更适合用于样式和布局，可以根据需要自由地组织和调整网页的外观效果。而语义化标签更关注网页的结构和意义，对于样式和布局的控制较少。

下面让我们通过一个实际网站的例子，来对比一下语义化结构与非语义化结构。

某财富

<html> 
<head> 
<!-- 省略了一些元数据和样式 --> 
</head>

<body>                                                                                                 
 <!-- 头部导航 -->                                                                                         
 <div class="head-nav">                                                                                
<div class="top-nav-wrap">                                                                              
<div class="main top_nav" id="fixMenuBar">                                                              
<div class="tw-nav">                                                                                    
 <a href="..." id="sethomepage" target="_self" class="sitemap">设首页</a>                  
<a href="..." id="addfavlink" target="_self" class="sitemap">加收藏</a>                      
<div class="down-menu wz5">                                                                           
 <a href="..." class="category red">移动客户端</a>
 <ul><li><a href="..." >iPhone版</a></li>
 <li><a href="..." >Android版</a></li></ul> 
   <ul><li><a href="..." >Pad版</a></li>
 <!-- 省略了一些元数据 --> 
 </div>
 
 </div>
 </div>
 </div> 
 </div>

通过上面的结构，相信我们可以非常直观的感受到，使用了语义化标签之后，html的整体结构变得非常的清晰明了，对页面的维护十分的友好。

总之，语义化标签更加注重网页内容的结构和意义，而非语义化标签更注重网页的样式和布局。在实际开发中，应根据具体情况合理选择使用语义化标签和非语义化标签。

HTML语义化的案例分析 | 青训营

一、什么是HTML语义化？

二、为什么需要HTML语义化呢？

三、常见的HTML语义化标签

四、语义化标签与非语义化标签的区别

某财富