什么是HTML语义化

HTML语义化是HTML5的革新点之一，在HTML5出现之前，我们大多使用div标签，而这些标签没有实际意义，不能清晰的看出代码结构，平常都是通过css来设定他们的样式，如果css样式缺失，这些标签中的内容就会无序地堆砌，页面的可读性极差。HTML5出现后，有了head、article、section、footer等标签，这能够让开发者更恰当地描述所表述的内容是什么，例如，head是用来描述页头的，footer是用来描述页尾的。使得html标签有意义，这便是HTML的语义化概念。

为什么要进行HTML语义化

语义化的主要目的可以概括为用正确的标签做正确的事。
HTML语义化可以让页面的内容结构化，便于浏览器解析和搜索引擎解析，并提高代码的可维护度和可重用性。
根据内容的结构化（内容语义化），选择合适的标签（代码语义化）便于开发者阅读和写出更清晰具有可读性的代码
让浏览器的爬虫和机器很好地解析。

如何进行HTML语义化

尽可能少的使用无语义的标签 div / span 。
在语义不明显时, 既可以使用div或者 p 时, 尽量用 p, 因为 p 在默认情况下有上下间距, 对兼容特殊终端有利。
不要使用纯样式标签, 如: b / font / u 等, 改用 css 设置。
需要强调的文本, 可以包含在 strong 或者 em 标签中(浏览器预设样式, 能用 CSS 指定就不用他们), strong 默认样式是加粗 (不要用 b), em 是斜体(不用 i) 。
使用表格时, 标题要用 caption, 表头用 thead, 主体部分用 tbody 包围, 尾部用tfoot包围。表头和一般单元格要区分开, 表头用 th, 单元格用 td 。
表单域要用 fieldset 标签包起来, 并用 legend 标签说明表单的用途。
每个 input 标签对应的说明文本都需要使用 label 标签, 并且通过为input设置 id 属性, 在 lable 标签中设置 for=someld 来让说明文本和相对应的 input 关联起来。

（摘自t.csdn.cn/2bFlw）

HTML语义化实例分析

以稀土掘金首页为例，就使用了语义化

如图所示分析头部导航栏的部分，只举例大体架构

语义化

<!--头部 -->
<header class="header">

     <div class="container">
         <a class="logo"></a>
         <!-- 导航栏 -->
         <nav class="main-nav">
            <ul>
                <li>
                ...
                </li>
            </ul>
         </nav>
     </div>

</header>

可以看到架构非常清晰，可以知道这部分是头部以及导航栏部分，依据语义化标签可以想象出网站大体构成。

非语义化

<!--头部 -->
<div class="header">

     <div class="container">
         <a class="logo"></a>
         <!-- 导航栏 -->
         <div class="main-nav">
            <ul>
                <li>
                ...
                </li>
            </ul>
         </div>
     </div>

</div>

而非语义化标签就不具有可读性，不知道这部分的代码是表示哪部分的。

常用的语义化标签

header

<header> 元素为文档或节规定页眉。<header> 元素应该被用作介绍性内容的容器。一个文档中可以有多个 <header> 元素。

nav

<nav> 元素定义导航链接集合。<nav>元素旨在定义大型的导航链接块。不过，并非文档中所有链接都应该位于<nav>元素中

article

<article>规定独立的自包含内容，文档有其自身的意义，并且可以独立于网站其他内容进行阅读

section

<action>文档中的节，是有主题的内容组，通常具有标题

main

<main>规定文档的主内容

aside

<aside> 元素页面主内容之外的某些内容（比如侧栏）,aside 内容应该与周围内容相关

footer

<footer> 元素为文档或节规定页脚。<footer> 元素应该提供有关其包含元素的信息。页脚通常包含文档的作者、版权信息、使用条款链接、联系信息等等。

h1~h6

搜索引擎使用标题为网页的结构和内容编制索引，用标题来呈现文档结构，应该将<h1> 用作主标题（最重要的），其后是<h2>（次重要的），再其次是 <h3>，以此类推

文字段落

HTML语义化标签的好处

1.标签语义化有助于构架良好的HTML结构，有利于搜索引擎的建立索引、抓取。简单来说，试想在H1标签中匹配到的关键词和在div中匹配到的关键词搜索引擎会把那个结果放在前面。

2、有利于不同设备的解析（屏幕阅读器，盲人阅读器等）满是div的页面这些设备如何区分哪些是主要内容优先阅读？

3、有利于构建清晰的机构，有利于团队的开发、维护。

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