HTML语义化的案例分析| 豆包MarsCode AI刷题

宸玚
79 阅读6分钟

虽然学的是AI方向，用的python，但是由于本人对前端更为熟练（其实是python还没那么熟练），所以又去学习了一下前端，学习过程中发现自己网站在好多地方其实写得相当不规范，于是便有了这篇笔记

1、什么是HTML语义化

HTML语义化是指根据内容的结构和含义，选择合适的HTML标签来标记文档，以更好地表达内容的意义和层次。

HTML提供了许多具有语义的标签，例如：

  1. <header> ：定义页面或章节的头部。
  2. <nav> ：定义导航链接。
  3. <article> ：定义独立的文章内容。
  4. <section> ：定义文档中的节。
  5. <aside> ：定义页面内容之外的内容（如侧边栏）。
  6. <footer> ：定义页面或章节的尾部。

此外，还有表示文本段落（<p>）、标题（<h1>到<h6>）、无序列表（<ul>）和有序列表（<ol>）等标签，这些标签为页面内容提供了清晰的结构。

假设要创建一个简单的博客文章页面，不使用语义化标签的代码可能如下所示：

	<div class="header">博客标题</div>

	<div class="nav">导航链接</div>

	<div class="content">

	    <div class="title">文章标题</div>

	    <div class="body">文章内容...</div>

	</div>

使用语义化标签后，代码可以改进为：

	<header>博客标题</header>

	<nav>导航链接</nav>

	<article>

	    <h1>文章标题</h1>

	    <p>文章内容...</p>

	</article>

可以看出，语义化后的代码更加简洁明了，也更容易被搜索引擎和用户理解。

综上所述，HTML语义化是现代网页开发的重要实践，它不仅能够提升网站的可访问性和用户体验，还能显著提高SEO效果。因此，在开发网站时，应遵循HTML语义化的原则。

2、语义化标签的作用

正确的使用这些语义化标签可以

  • 改善用户体验：语义化的HTML代码使得页面结构更加清晰，有助于用户通过浏览器自带的辅助功能（如屏幕阅读器）更好地理解和使用网站。
  • 提升SEO：搜索引擎通过分析HTML标签来理解网页内容，语义化的标签能够帮助搜索引擎更准确地抓取和索引页面内容，从而提高网站在搜索结果中的排名。
  • 增强代码可读性：语义化标签增强了代码的可读性，开发者可以更清晰地理解网页结构和内容，这有助于团队协作和项目维护。
  • 减少CSS和JavaScript的依赖：良好的HTML结构可以减少对CSS和JavaScript的依赖，使得网页内容在禁用这些技术时仍然能够保持良好的可读性和可访问性。

3、浅谈语义化与非语义化标签的区别

3.1 SEO的影响

使用语义化标签，能让网站更容易被搜索引擎收录和索引，从而在用户搜索相关关键词时获得更高的排名。

举个例子，使用 <article> 标签来标识一篇文章，搜索引擎能够明确知道该内容是文章，而不是页面的导航或其他部分。相对而言，如果使用 <div> 来包裹文章内容，搜索引擎则不能理解该部分的具体意义，影响网页的排名。

案例分析

在学习过程中，我发现有一部分网站使用了语义化标签，另一部分网站并没有使用。

比如 极客教程 的文章页面就使用了使用了语义化标签来包装文章内容，使用 <article> 标签来标识每一篇文章，并且文章内部的段落使用了 <section> 和 <header> 来增强结构化。这使得 极客教程 的页面在搜索引擎优化方面表现得更为优秀，用户搜索相关内容时，能更容易找到准确的文章。

而在一些使用非语义化标签的站点（就比如我的个人网站）中，文章内容和其他信息可能会全部包裹在 <div> 中，这种方式让搜索引擎难以区分页面的主要内容和其他不相关的部分，导致SEO效果差。

3.2 可阅读性的提升

可能我们平时用不上，但是在需要使用辅助工具的用户来说，HTML语义化标签对可访问性有着重要作用。屏幕阅读器可以通过识别语义化标签帮助用户更好地理解页面内容的结构和功能。如果一个网页结构不清晰或者过于依赖 <div> 和 <span>，屏幕阅读器用户就无法准确获取信息。

案例分析

在分析 W3C 的官方网站时，可以看到该他们的HTML结构使用了大量语义化标签，如 <nav> 用于导航部分，<header> 用于页面头部，<article> 用于每个内容块。这些标签帮助屏幕阅读器用户快速识别网页的结构，从而提高了网站的可访问性。

相反，一些老旧的企业网站或者个人博客（还是严重批评我的博客），往往使用大量的 <div> 来定义网页结构，这会让屏幕阅读器的用户难以区分不同部分的内容。特别是在没有正确使用 <header>, <main>, <footer> 等标签时，用户无法清晰理解网页的整体布局。

3.3 可维护性的提升

语义化代码使得网页的结构更加清晰，在我们后期维护的时候可以快速理解各个部分的功能。对于一个团队协作的项目而言，使用语义化标签意味着开发者可以快速上手并且减少错误。

案例分析

在 BBC News 的网页中，文章内容使用了 <article> 标签，而每个文章的标题和段落内容则使用了 <header> 和 <section> 标签。这种结构使得开发者在需要修改页面时，可以很容易地定位到每个模块。相比之下，如果使用过多的 <div> 标签来划分页面，则不仅难以理解，而且修改时容易出错。

4. 语义化标签在实际网站中的应用

<header>
    <h1>标题</h1>
    <nav>
        <ul>
            <li><a href="/home">首页</a></li>
            <li><a href="/about">关于本站</a></li>
        </ul>
    </nav>
</header>

<main>
    <section>
        <article>
            <header>
                <h2>文章标题</h2>
                <p>作者：xxx</p>
            </header>
            <p>内容概述</p>
        </article>
    </section>
</main>

<footer>
    <p>&copy; 2024 xxx</p>
</footer>

像这种使用了大量的语义化标签来组织内容。页面中的头部、导航、文章和底部都用适当的标签进行了标记。搜索引擎和屏幕阅读器都能够更好地理解页面的结构，从而提供更好的用户体验。

avatar
文章
阅读
粉丝