案例：一篇博客文章的HTML结构

假设有一篇博客文章，我将分别展示使用语义化标签和非语义化标签编写的两种HTML结构。

语义化标签的HTML结构：

<!DOCTYPE html>
<html>
<head>
    <title>示例博客文章</title>
</head>
<body>
    <header>
        <h1>标题：如何实践HTML语义化</h1>
        <p>作者：Kyrie Lee</p >
        <p>发布日期：2023年8月23日</p >
    </header>
    <nav>
        <ul>
            <li>首页</li>
            <li>归档</li>
            <li>关于我们</li>
        </ul>
    </nav>
    <article>
        <h2>引言</h2>
        <p>在今天的文章中，我们将探讨HTML语义化的重要性以及如何在网站中实践它。</p >
        <!-- 此处省略正文内容 -->
    </article>
    <aside>
        <h3>相关链接</h3>
        <ul>
            <li>相关文章1</li>
            <li>相关文章2</li>
        </ul>
    </aside>
    <footer>
        <p>&copy; 2023 示例博客</p >
    </footer>
</body>
</html>

非语义化标签的HTML结构：

<!DOCTYPE html>
<html>
<head>
    <title>示例博客文章</title>
</head>
<body>
    <div id="header">
        <div id="title">标题：如何实践HTML语义化</div>
        <div id="author">作者：Kyrie Lee</div>
        <div id="date">发布日期：2023年8月23日</div>
    </div>
    <div id="nav">
        <ul>
            <li>首页</li>
            <li>归档</li>
            <li>关于我们</li>
        </ul>
    </div>
    <div id="article">
        <div id="article-title">引言</div>
        <div id="article-content">在今天的文章中，我们将探讨HTML语义化的重要性以及如何在网站中实践它。</div>
        <!-- 此处省略正文内容 -->
    </div>
    <div id="aside">
        <div id="aside-title">相关链接</div>
        <ul>
            <li>相关文章1</li>
            <li>相关文章2</li>
        </ul>
    </div>
    <div id="footer">
        <div id="footer-content">&copy; 2023 示例博客</div>
    </div>
</body>
</html>

差异解释：

在上述案例中，语义化标签版本使用了语义化的HTML元素（如header、nav、article、aside、footer等），这些元素能够清晰地表达其所包含内容的意义。这有助于搜索引擎理解页面的结构和内容，也方便了屏幕阅读器等辅助技术的使用。

相比之下，非语义化标签版本使用了一些div元素，通过id属性来标识不同的部分。这样的结构在没有样式和脚本的情况下可能不易理解，同时也不利于可访问性和SEO。

语义化标签的版本更加清晰、易读，并且有助于网站的可维护性和拓展性。非语义化标签版本则显得较为混乱，不易理解和维护。

案例1：在线商城网站

非语义化标签：

<div class="product">
   <div class="product-title">iPhone 12 Pro</div>
   <div class="product-description">这是一款强大的智能手机</div>
   <div class="product-price">价格：$999</div>
   <div class="product-rating">评分：4.5/5</div>
</div>

语义化标签：

<article class="product">
   <h2 class="product-title">iPhone 12 Pro</h2>
   <p class="product-description">这是一款强大的智能手机</p >
   <footer>
      <div class="product-price">价格：$999</div>
      <div class="product-rating">评分：4.5/5</div>
   </footer>
</article>

对比差异：

非语义化标签的结构没有明显的语义，通过class属性来区分不同的元素。
语义化标签使用了article、h2、p和footer等具有明确语义的标签，能够更清晰地表达商品的结构和内容层次关系，同时方便浏览器和搜索引擎解析和理解。

案例2：博客网站

非语义化标签：

<div class="blog-post">
   <div class="blog-title">我的旅游日记</div>
   <div class="blog-content">这是我最近的旅行经历</div>
   <div class="blog-author">作者：小明</div>
   <div class="blog-date">发布日期：2021-07-01</div>
</div>

语义化标签：

<article class="blog-post">
   <h1 class="blog-title">我的旅游日记</h1>
   <div class="blog-content">这是我最近的旅行经历</div>
   <footer>
      <div class="blog-author">作者：小明</div>
      <time class="blog-date">发布日期：2021-07-01</time>
   </footer>
</article>

对比差异：

非语义化标签的结构较为混乱，没有明确的语义信息。
语义化标签使用了article、h1、footer和time等标签，能够更清晰地表示博客文章的结构和内容信息，方便浏览器和搜索引擎解析和理解。

总结：从以上两个案例的对比可以看出，语义化标签的优势在于：

提供清晰的结构和层次关系：语义化标签能够更好地表示网页的结构和内容层次，使页面更易于阅读和理解。
提升网页的可访问性：语义化标签有助于屏幕阅读器和其他辅助技术解析和传达页面的内容，提高了网页的可访问性。
有利于SEO优化：搜索引擎能够更好地理解和索引语义化标签的内容，提高网页的搜索排名。
更好的可维护性和可扩展性：语义化标签使页面结构更清晰，易于维护和扩展。

总结

HTML标签分为语义标签和非语义标签，它们之间的主要差异在于是否传达了内容的含义和结构。以下是语义标签和非语义标签的对比差异：

语义标签：

传达含义： 语义标签是设计用来传达特定含义和结构的标签，从标签本身就可以理解内容的类型和作用。
可读性： 语义标签使HTML代码更加易读和可理解，代码阅读者能够更快地理解页面结构和内容。
搜索引擎优化： 搜索引擎能够更准确地理解页面内容，从而提高搜索引擎排名。
可访问性： 语义标签有助于屏幕阅读器等辅助技术解读页面，使网站更易于残障人士访问。
维护性： 由于语义标签清晰传达了内容结构，代码维护更加方便，新的开发人员也能更快地理解和参与项目。

非语义标签：

缺乏含义： 非语义标签（如div、span）本身并不传达特定的含义，需要通过类名、ID等属性来解释其作用。
可读性： 非语义标签的代码可能相对较难阅读和理解，尤其是对于复杂的页面结构。
搜索引擎优化： 非语义标签可能不如语义标签那样有助于搜索引擎优化，因为搜索引擎难以理解页面的实际内容和结构。
可访问性： 非语义标签可能使屏幕阅读器等辅助技术难以解读页面，导致可访问性问题。
维护性： 缺乏明确的含义，非语义标签可能使代码维护变得更加困难，阅读和理解代码需要更多的时间。

总之，使用语义标签能够使HTML代码更具有含义、可读性、可访问性和维护性。在构建网站时，优先选择语义标签有助于提高页面质量和用户体验。

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

总结