HTML语义化的案例分析 | 青训营什么是语义化？语义是指对一个词或者句子含义的正确解释。很多html标签也具有语义的

什么是语义化？

语义是指对一个词或者句子含义的正确解释。很多html标签也具有语义的意义，也就是说元素本身传达了关于标签所包含内容类型的一些信息。例如，当浏览器解析到标签时，它将该标签解释为包含这一块内容的最重要的标题。h1标签的语义就是用它来标识特定网页或部分最重要的标题。语义化的标签，旨在让标签有自己的含义。

语义化标签

<h1>~<h6>元素：定义页面的标题，h1元素具有最高等级，h6元素具有最低的等级

<header>元素：用于定义页面的介绍展示区域，通常包括网站logo、主导航、全站链接以及搜索框。也适合对页面内部一组介绍性或导航性内容进行标记。

<nav>元素：定义页面的导航链接部分区域，不是所有的链接都需要包含在nav中，除了页脚再次显示顶级全局导航、或者包含招聘信息等重要链接。

<main>元素：定义页面的主要内容，一个页面只能使用一次。如果是web应用，则包围其主要功能。

<aside>元素：定义与主要内容相关的内容块。通常显示为侧边栏。

<footer>元素：定义文档的底部区域，通常包含文档的作者，著作权信息，链接的使用条款，联系信息等。

<abbr>元素：解释缩写词。使用title属性可提供全称。

以百度网页为例分析语义化和非语义化

百度网页可大致分为导航区，搜索区，内容区以及页脚部分。导航区包括用户登录设置按钮，新闻，地图，贴吧，视频，图片，网盘等等；搜索区主要包括百度logo和搜索框；内容区就是一些百度热搜；最后是页脚部分。如下图所示：

百度.png

若分析其HTML的语义化结构：

<body>

  <nav>导航区</nav>

  *<!--* *搜索区* *-->*
  <div class="imgdiv">
        <img class="img1" src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="">
   </div>

   <div class="inputdiv">
        <input class="leftinput" placeholder="请输入您要搜索的内容" ></input>
        <div class="rightinput">百度一下</div>
    </div>

    <main>内容区</main>

    *<!--* *页脚* *-->*
    <footer>页脚</footer>

</body>

若用非语义化标签：

<body>

  <div>导航区</div>

  *<!--* *搜索区* *-->*
  <div class="imgdiv">
        <img class="img1" src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="">
    </div>
    <div class="inputdiv">

        <input class="leftinput" placeholder="请输入您要搜索的内容" ></input>

        <div class="rightinput">百度一下</div>
    </div>

    <div>内容区</div>

    <div>页脚</div>

</body>

由以上代码可知，非语义标签<div>是没有特定含义的。相比之下，语义标签更有利于用户理解其结构内容，具有更强的可读性。

对比非语义化标签的语义化的优点：

1. 代码结构: 使页面没有css的情况下，也能够呈现出很好的内容结构

2. 有利于SEO: 爬虫依赖标签来确定关键字的权重，因此可以和搜索引擎建立良好的沟通，帮助爬虫抓取更多的有效信息

3. 提升用户体验：例如title、alt可以用于解释名称或者解释图片信息，以及label标签的灵活运用。

4. 便于团队开发和维护: 语义化使得代码更具有可读性，让其他开发人员更加理解你的html结构，减少差异化。