今天我们来讨论一下HTML语义化在网站实际应用中的用处和操作规范

HTML 语义化

一、什么是HTML语义化？

HTML 语义化是指在创建 HTML 页面时，使用正确的HTML标签来正确地描述内容的含义和结构。使得页面的结构能够被搜索引擎和浏览器等解析和理解。

二、HTML语义化标签

HTML语义化标签往往能直接表达出代码标签的具体功能和含义，常见的有<title> <hn> <ul> <li>等等，HTML5 新增了许多新功能的语义化标签，极大的丰富了HTML布局的功能性。例如

<heder>:整个页面，或部分区域的头部。
<footer>:整个页面，或部分区域的底部。
<nav>: 导航。
<article>:文章，帖子，杂志，新闻，博客，评论等。可以包含多个<section>。比<section>更强调独立性，一块内容如果比较独立，比较完整，应该使用<article>元素。
<section>:页面中的某段文字，或文章中的某段文字（里面文字通常会包含标题）。
<aside>:侧边栏。
<main>:文档的主要内容。
<hgroup>:包含连续的标题，如文章主标题，副标题的组合。
<mark>：使用黄色突出显示部分文本。
<address>：作者、相关人士或组织的联系信息（电子邮件地址、指向联系信息页的链接）。
<video>：定义视频播放器,实现自定义播放、暂停、进度和控制等控制栏的功能。
<audio>：添加音频播放器。
<details>:定义用户可以查看或隐藏的额外细节。
<summary>:为 <details> 元素定义一个可见的标题。当用户点击标题时会显示出详细信息。

三、语义化布局的优点

提高用户体验，在样式加载失败时，页面结构清晰。
有利于搜索引擎优化（SEO），搜索引擎爬虫会根据不同的标签来赋予不同的权重。
方便其他设备解析（如屏幕阅读器）根据语义渲染网页。
代码结构清晰，易于阅读，利于开发和维护。

四、HTML语义化布局

<html>
<head>
    <title>语义化布局</title>
</head>
<body>
    <header>
        header
    </header>
    <nav>
        nav
    </nav>
    <div>
        <article>
            article
            <section>
                section
            </section>
        </article>
        <aside>
            aside
        </aside>
        <div style="clear: both;"></div>
        <!-- 清浮动 -->
    </div>
    <footer>
        footer
    </footer>
</body>
</html>

可以清楚看到，在不大量使用div标签的前提下，使用语义化标签一样可以搭建HTML框架，这种布局方式，使开发者在不运行代码的前提下就可以知道网页布局。

具体案例

MDN网站

使用谷歌浏览器的开发者工具我们可以看到 MDN 网站在搭建HTML框架的时候使用了大量语义化标签。
在控制台输入 new Set( [...document.querySelectorAll('*')].map(v=>v.tagName)) ，打印出一个set对象。我们可以看到网页使用的标签。
通过上面的图片，我们很容易就在代码中找到网页中对应的内容，如果一个开发者去修改补充代码，即使不是你写的代码，你也可以很轻松的理解这些代码，并很快的去修改它，这是语义化布局的一大优点。
语义化布局把网页区域模块化，不同区域的功能区分开，像是section部分独立出来，如果网页内容需要更改的时候，我们可以很容易在section里面添加不同的内容，使兄弟，父子元素更加容易管理。
header是网页头部区域，里面的内容标题，在浏览器中更容易被搜索引擎捕获，提高了网页的曝光度。除此之外，像是main，section也是一样。

Redux网站

Redux 是 JavaScript 应用的状态容器，提供可预测的状态管理。
在 nav 部分定义页面的导航链接部分区域，包含了一部分页面链接，使用div和button标签做了一个导航栏。如果使用非语义标签的话也可以，但是在添加样式的时候更加复杂，代码量更大。
heder和main部分，使用h1和p标签做标题，main部分，定义页面的主要内容，一个页面只能使用一次。如果是web应用，则包围其主要功能，section划分内容用于标记文档的各个部分，例如长表单文章的章节或主要部分。一眼明了，这就是语义化标签的好处。
footer部分定义文档的底部区域，通常包含文档的作者，著作权信息，链接的使用条款，联系信息等，使用大量div标签和超链接，如果使用非语义化标签，大量div的嵌套会增加代码理解难度。

⁉️谈一谈

相较于国外网站，国内网站的网页HTML语义化普及度不算很高，不知道是不是国内外行业需求不一样还是一些别的原因，此文章仅代表作者个人观点，如有错误，请读者老爷多多指正。

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