HTML语义化的案例分析：分析一些实际网站的HTML结构，对比非语义化标签的差异 ｜ 青训营

案例一：新闻网站首页

非语义化标签的HTML结构：

<div id="header">
    <h1>新闻网站</h1>
</div>
<div id="content">
    <div id="article1">
        <h2>标题1</h2>
        <p>正文内容...</p>
    </div>
    <div id="article2">
        <h2>标题2</h2>
        <p>正文内容...</p>
    </div>
</div>
<div id="footer">
    <p>版权信息</p>
</div>

语义化标签的HTML结构：

<header>
    <h1>新闻网站</h1>
</header>
<main>
    <article>
        <h2>标题1</h2>
        <p>正文内容...</p>
    </article>
    <article>
        <h2>标题2</h2>
        <p>正文内容...</p>
    </article>
</main>
<footer>
    <p>版权信息</p>
</footer>

对比分析：

• 非语义化标签的HTML结构使用了<div>标签来表示页面的不同部分，没有明确的语义，开发者需要通过CSS选择器来区分不同的部分。
• 语义化标签的HTML结构使用了<header>、<main>、<article>和<footer>等标签来表示页面的不同部分，具有明确的语义，可以提高代码的可读性和可维护性。
• 语义化标签的HTML结构可以让搜索引擎更好地理解页面内容，提高网站的SEO效果。
• 语义化标签的HTML结构可以让屏幕阅读器等辅助技术更好地理解页面结构，提高网站的可访问性。
• 语义化标签的HTML结构可以让开发者更容易理解页面结构，减少开发和维护的难度。

案例二：电子商务网站商品列表页

非语义化标签的HTML结构：

<div id="header">
    <h1>电子商务网站</h1>
</div>
<div id="content">
    <div class="product">
        <div class="product-image">
            <img src="product1.jpg" alt="商品1">
        </div>
        <div class="product-info">
            <h2>商品1</h2>
            <p>价格：$10</p>
        </div>
    </div>
    <div class="product">
        <div class="product-image">
            <img src="product2.jpg" alt="商品2">
        </div>
        <div class="product-info">
            <h2>商品2</h2>
            <p>价格：$20</p>
        </div>
    </div>
</div>
<div id="footer">
    <p>版权信息</p>
</div>

语义化标签的HTML结构：

<header>
    <h1>电子商务网站</h1>
</header>
<main>
    <section>
        <article>
            <figure>
                <img src="product1.jpg" alt="商品1">
                <figcaption>商品1</figcaption>
            </figure>
            <div class="product-info">
                <h2>商品1</h2>
                <p>价格：$10</p>
            </div>
        </article>
        <article>
            <figure>
                <img src="product2.jpg" alt="商品2">
                <figcaption>商品2</figcaption>
            </figure>
            <div class="product-info">
                <h2>商品2</h2>
                <p>价格：$20</p>
            </div>
        </article>
    </section>
</main>
<footer>
    <p>版权信息</p>
</footer>

对比分析：

• 非语义化标签的HTML结构使用了多个<div>标签来表示商品列表，没有明确的语义，开发者需要通过CSS选择器来区分不同的商品。
• 语义化标签的HTML结构使用了<section>、<article>、<figure>等标签来表示商品列表，具有明确的语义，可以提高代码的可读性和可维护性。
• 语义化标签的HTML结构可以让搜索引擎更好地理解商品列表，提高网站的SEO效果。
• 语义化标签的HTML结构可以让屏幕阅读器等辅助技术更好地理解页面结构，提高网站的可访问性。
• 语义化标签的HTML结构可以让开发者更容易理解页面结构，减少开发和维护的难度。