HTML语义化与非语义化差异 ｜ 青训营

Benediximus
125 阅读3分钟

随着互联网的不断发展，网站的数量呈指数级增长。无论是个人博客、商业网站还是社交媒体平台，它们的共同目标是向用户提供信息，并使其在浏览时获得良好的用户体验。HTML语义化是Web开发中的重要概念，它指的是使用合适的HTML标签来描述内容的结构和含义，从而使网页具有良好的可读性和可访问性。

1. 实例网站一：优秀博客网站

非语义化HTML结构：

<div id="header">
    <div class="logo">
        <img src="logo.png" alt="Logo">
    </div>
    <div class="nav">
        <ul>
            <li><a href="#">首页</a></li>
            <li><a href="#">关于我</a></li>
            <li><a href="#">博客</a></li>
            <li><a href="#">联系我</a></li>
        </ul>
    </div>
</div>
<div id="content">
    <div class="post">
        <h2 class="title">文章标题</h2>
        <div class="meta">发布日期：2023-07-29</div>
        <div class="entry">文章内容...</div>
    </div>
</div>
<div id="footer">
    版权信息 © 2023，All Rights Reserved
</div>

语义化HTML结构：

<header>
    <div class="logo">
        <img src="logo.png" alt="Logo">
    </div>
    <nav>
        <ul>
            <li><a href="#">首页</a></li>
            <li><a href="#">关于我</a></li>
            <li><a href="#">博客</a></li>
            <li><a href="#">联系我</a></li>
        </ul>
    </nav>
</header>
<main>
    <article>
        <h2>文章标题</h2>
        <p>发布日期：2023-07-29</p>
        <div class="content">文章内容...</div>
    </article>
</main>
<footer>
    版权信息 © 2023，All Rights Reserved
</footer>

差异分析：

  • 非语义化HTML结构使用了大量的<div>元素，但并未明确表示它们的作用。这样做虽然可以实现相同的外观效果，但给浏览器和搜索引擎带来了解页面内容的难度，也降低了可访问性。
  • 语义化HTML结构使用了语义化的标签如<header>、<nav>、<main>、<article>和<footer>等，清晰地表达了它们的作用和结构，提高了可读性和可访问性。
  • 非语义化结构的文章标题使用了<h2>标签，但无法确定其在页面中的具体含义，可能与其他部分的标题混淆。而语义化结构则明确使用<h2>标签表示文章标题，使得页面结构更加清晰。

2. 实例网站二：电子商务网站

非语义化HTML结构：

<div class="header">
    <div class="logo">
        <img src="logo.png" alt="Logo">
    </div>
    <div class="navigation">
        <ul>
            <li><a href="#">首页</a></li>
            <li><a href="#">产品</a></li>
            <li><a href="#">关于我们</a></li>
            <li><a href="#">联系我们</a></li>
        </ul>
    </div>
</div>
<div class="content">
    <div class="product">
        <span class="product-name">产品名称</span>
        <span class="product-price">￥99.00</span>
        <div class="product-description">产品描述...</div>
    </div>
</div>
<div class="footer">
    © 2023，版权所有
</div>

语义化HTML结构：

<header>
    <div class="logo">
        <img src="logo.png" alt="Logo">
    </div>
    <nav>
        <ul>
            <li><a href="#">首页</a></li>
            <li><a href="#">产品</a></li>
            <li><a href="#">关于我们</a></li>
            <li><a href="#">联系我们</a></li>
        </ul>
    </nav>
</header>
<main>
    <article>
        <h3>产品名称</h3>
        <span class="price">￥99.00</span>
        <div class="description">产品描述...</div>
    </article>
</main>
<footer>
    © 2023，版权所有
</footer>

差异分析：

  • 非语义化HTML结构同样过度使用了<div>元素，使得页面结构不够清晰，并且缺乏足够的信息来帮助浏览器、搜索引擎和屏幕阅读器理解页面内容。
  • 语义化HTML结构使用了<header>、<nav>、<main>、<article>和<footer>等标签，使得页面的结构更加明确，有助于提高SEO效果和可访问性。
  • 非语义化结构使用了非语义的<span>标签来表示产品名称和价格，这样的标签在不提供适当的角色和语义的情况下可能导致混淆。而语义化结构使用了更具体的<h3>标签表示产品名称，并使用了语义化的<article>标签包裹产品信息，从而使得页面结构更清晰。

结论

语义化的HTML结构不仅有助于提高页面的可读性、可访问性和SEO效果，还能够使开发者更容易理解和维护代码。在Web开发中，始终将语义化视为一项重要的实践，有助于构建更好的用户体验的网站。

avatar
文章
阅读
粉丝