HTML语义化

HTML语义化

HTML语义化，顾名思义，就是让HTML标签富有语义，让HTML结构更加清晰易懂，便于开发者阅读和书写，让浏览器的爬虫和机器很好的解析。

HTML语义化优点，为什么要语义化

1. 增加页面可读性在去掉CSS样式的情况下，HTML页面仍然能呈现良好的内容结构与代码结构
2. 提高用户体验，比如：title，alt用于解释名词和图片信息、
3. 方便其他设备解析（屏幕阅读器、盲人阅读器、移动设备）
4. 利于SEO，语义化能和搜索引擎建立良好的联系，有利于爬虫抓取更多的有效信息。爬虫依赖于标签来确定上下文和各个关键字的权重。
5. 便于团队开发和维护，利于规范化。

语义化常用方法

• 少用没有语义的<div>和<span>。

• 正确使用<h> 标签。
  根据重要性逐级递减，没有断层。并且一个页面只能有一个<h1>标签

• 不要使用纯样式标签，如：<b>、<font>、<u>等，改用css设置。

• 加粗用<strong>不用<b>，斜体用<em>不用<i>。

• 正确使用表格标签。
  标题用<caption>，表头<thead>主体部分用<tbody>包围，尾部用<tfoot>包围。表头和一般单元格要区分开，表头标题用<th>，内容单元格用<td>。

  <table>
    <caption>这是表格标题</caption>
    <thead>
      <tr>
        <th>这是表头1</th>
        <th>这是表头2</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>这是单元格1</td>
        <td>这是单元格2</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <td>这是页脚1</td>
        <td>这是页脚2</td>
      </tr>
    </tfoot>
  </table>

• 正确使用内容容器，如段落<p>，列表<ul>,<ol>, <li>, <dl>, <dt>, <dd>。

  <!-- 列表 -->
  <dl>
    <dt>衬衫</dt>
    <dd>短袖衬衫</dd>
    <dd>长袖衬衫</dd>
    <dd>无袖衬衫</dd>
    <dt>裤子</dt>
    <dd>休闲裤</dd>
    <dd>牛仔裤</dd>
    <dd>卡其裤</dd>
    <dd>运动裤</dd>
  </dl>
  
  <!-- 无序列表 -->
  <ul>
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
  </ul>
  
  <!-- 有序列表 -->
  <ol>
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
  </ol>

• 需要为<form>表单分组时，每个分组领域用<fieldset>标签包起来，并用<legend>标签说明对分组内容说明。

  <form>
    <fieldset>
      <legend>健康信息</legend>
      身高：<input type="text" />
      体重：<input type="text" />
    </fieldset>
  </form>

• 需要对<input> 标签进行说明时，使用<label> 标签

  <!-- 带label的input标签 -->
  <label for="user-name">Female</label>
  <input type="text" name="user-name" id="user-name" />

• 提高关键词密度，如图片替换alt属性，链接说明title属性等。

  <!-- 超链接title属性说明 -->
  <a href="https://www.csdn.net/" title="点击跳转至CDDN首页" target="_blank">CSDN</a>
  
  <!-- img标签alt属性：如果无法显示图像，浏览器将显示替代文本, title属性对图片说明  -->
  <img src="" alt="图片替换" title="这是**图片">

常见的HTML5语义化标签

HTML5新增的语义化标记元素

元素名称	说明
<header>	标记头部区域的内容
<footer>	标记脚步区域的内容
<section>	Web页面中的一块区域
<article>	独立的文章内容
<aside>	相关内容或者引文
<nav>	导航类辅助内容

<!-- HTML5语义化标签的使用 -->
<header>
  网页标题
</header>  
<nav>
  <h3>导航</h3>
  <a href="#">链接</a><a href="#">链接2</a><a href="#">链接3</a>
</nav>
<section>
  <article>
    <header>
        <h1>文章标题</h1>
    </header>
    <p>文章内容</p>
    <footer>
        <h2>文章注脚</h2>
    </footer>
  </article>
</section>
<aside>
  <h3>相关内容</h3>
  <p>相关辅助信息或者服务</p>
</aside>
<footer>
  页脚底部说明
</footer>

---

参考资料：
Web语义化
W3Cschool HTML 参考手册