HTML语义化标签

语义化的含义就是用正确的标签做正确的事情，html语义化就是让页面的内容结构化，便于对浏览器、搜索引擎解析；在没有样式CCS情况下也以一种文档格式显示，并且是容易阅读的。搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重，利于 SEO。使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。

非语义化的HTML页面

示例

<html>
    <body>
        <div class="article">
            <div class="header">
                <h1>h1 - WEB 语义化</h1>
            </div>
            <div class="nav">
                <ul>
                    <li>nav1 - HTML语义化</li>
                    <li>nav2 - CSS语义化</li>
                </ul>
            </div>
            <div class="section">
                section1 - HTML语义化
            </div>
            <div class="section">
                section2 - CSS语义化
            </div>
            <div class="time">time - 2022年03月23日</div>
            <div class="footer"> footer</div>
        </div>
    </body>
</html>

可以看出使用div做了所有的事情，如果id或者class命名不好的话，很难快速的了解页面内容。

语义化的HTML页面

示例

<html>
    <body>
        <article>
            <header>
                <h1>h1 - WEB 语义化</h1>
            </header>
            <nav>
                <ul>
                    <li>nav1 - HTML语义化</li>
                    <li>nav2 - CSS语义化</li>
                </ul>
            </nav>
            <section>
                section1 - HTML语义化
            </section>
            <section>
                section2 - CSS语义化
            </section>
            <time datetime="2018-03-23" pubdate>time - 2018年03月23日</time>
            <footer> footer</footer>
        </article>
    </body>
</html>

这就是一个语义化的页面，通过语义化标签我们不仅仅能快速了解内容，还能让搜索引擎等爬虫程序精准分析对内容进行提取。