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

引言

本次学习实践笔记将对一些实际网站的HTML结构进行分析，重点比较了语义化标签和非语义化标签之间的差异。在编写网页时，使用语义化标签可以带来许多好处。通过对比实际网站的案例，我们能够更直观地理解和感受到语义化标签的优势与重要性。在接下来的内容中，我们将一起深入分析这些案例，探讨语义化标签在HTML中的运用。

语义化的定义

语义化是指在编写HTML代码时，通过恰当选择合适的标签来明确表示内容的含义和结构。简单来说，就是让HTML标签具备更加准确的语义化含义，就像有一个名字，当你使用其标签时知道这个标签代表着什么含义，适用于怎样的场景。

语义化使用的对比

• 下列是一个非语义化标签的网站结构示例。

<div id="header">
    <div class="logo">This is logo</div>
    <div class="nav">This is nav</div>
</div>
<div id="main">
    <div class="article">article</div>
    <div class="sidebar">sidebar</div>
</div>
<div id="footer">This is footer</div>

此示例中，网站结构都是由div标签构成，div不是一个语义化标签，只是代表一个块，这里看class或者id才能明白起的作用，虽然类、id有相关的说明，但并不直观，总体来说使用div+css的布局的HTML代码不够清晰，人能稍微细看理解，对于浏览器来说，并不利于浏览器的读取。

• 下列是一个使用语义化标签的网站结构示例。

<header>
    <nav>
        <ul>
            <li><a href="#">首页</a></li>
            <li><a href="#">新闻</a></li>
            <li><a href="#">分类</a></li>
        </ul>
    </nav>
</header>
<main>
    <article>
        <h1>新闻标题</h1>
        <p>新闻内容...</p>
    </article>
    <aside>
        <h2>相关新闻</h2>
        <ul>
            <li><a href="#">相关新闻1</a></li>
            <li><a href="#">相关新闻2</a></li>
        </ul>
    </aside>
</main>
<footer>Copyright©2022</footer>

这个示例中，使用了header、nav、article等语义化标签，很直观地展现了代码内容结构以及每一块的对应功能，结构更清晰，便于开发，而且极大地提高了代码可阅读性，仅通过标签结构，就能快速想象出网页的大致样子。

总结

H5新增了很多标签，也更加语义化了，说明语义化的使用需求日渐提高，语义化标签在使用上并没有很复杂没什么特别之处，灵活使用这些标签，也能大大提高网站的可访问性和SEO优化。