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

Invisibility
50 阅读4分钟

引言： 简要介绍语义化标签，通过实际案例分析语义化标签和非语义化标签的区别，总结语义化标签在浏览器页面中的优势。

HTML语义化标签与非语义化标签的区别及实际案例分析

什么是语义化标签

所谓html语义化标签就是指那些通过标签名称就能够表明其内容含义的标签，如<header>、<footer>、<article>等。相对的，非语义化标签本身不含任何语义信息，仅用来分块。

语义化标签的优点

  • 提高页面的可读性和结构性

语义化标签通过名称直接传达其内容，使得代码结构更加清晰，便于开发者理解页面的结构。

博客网站案例分析

非语义化代码

  <h1>博客标题</h1>
</div>
<div class="nav">
   <!-- 导航栏内容 -->
</div>
<div class="main">
  <div class="post">
    <h2>文章标题</h2>
    <p>文章内容...</p>
  </div>
  <div class="sidebar">
    <!-- 侧边栏内容 -->
  </div>
</div>
<div class="footer">
 <!-- 底部内容 -->
</div>

语义化代码

  <h1>博客标题</h1>
</header>
<nav>
  <ul>
    <!-- 导航内容 -->
  </ul>
</nav>
<main>
  <article>
    <h2>文章标题</h2>
    <p>文章内容...</p>
  </article>
  <aside>
    <!-- 侧边栏内容 -->
  </aside>
</main>
<footer>
  <p>尾部内容</p>
</footer>

从上面两段代码对比来看就会发现，语义化的代码明显比非语义化的代码结构更加清晰，便于让人理解页面的结构，而非语义化的代码则需要额外添加css类名来描述其功能。

  • SEO优化（搜索引擎优化）

    • 使用<header>、<nav>、<article>等标签可以帮助搜索引擎识别页面的不同部分，从而提高页面的可读性和索引效率。
    • 语义化标签改善了网站的结构和导航，使用户更容易找到他们需要的信息。这种改善用户体验的做法也间接提升了SEO效果，因为搜索引擎倾向于优先展示用户体验好的网站。
    • 语义化标签使得页面的关键内容（如标题、导航、主要文章内容）更加突出，这有助于搜索引擎更好地理解页面的主题和上下文，从而在相关的搜索中，网站的表现会更好。

  • 不依赖CSS和JavaScript

    • 语义化标签本身就传达了内容的结构和意义，因此减少了对CSS来定义内容结构的依赖。
    • 语义化标签通常定义了内容的结构，但不需要额外的JavaScript来解释其行为。
    • 语义化标签改善了页面的可访问性，因为它们为辅助技术如屏幕阅读器提供了明确的语义信息，减少了对额外JavaScript的依赖来解释内容的结构。
还是上面博客的例子

在非语义化的例子中，所有的结构都是通过<div>标签和CSS类来定义的。这要求CSS来提供所有的视觉和布局信息，例如.header、.nav、.content和.footer类需要定义背景颜色、边距、字体样式等。同时，JavaScript可能需要用来增加交互性，比如响应式导航或动态内容加载。
而在语义化的例子中，HTML标签本身就传达了页面结构的信息。例如，<header>表示页面的头部，<nav>表示导航链接，<article>表示独立的文章内容，<footer>表示页面底部。这些标签使得页面结构更加清晰，减少了对CSS和JavaScript的依赖。CSS仍然用于美化页面，但不再需要定义每个部分的基本结构。JavaScript的使用也更加专注于增强用户体验，而不是创建页面的基本结构。

  • 关于语义化的其他优点
    • 改善无障碍访问
    • 便于团队开发和维护
    • 方便其他设备解析
    • 等等

非语义化标签的局限性

结合上面与语义化标签的对比，不难看出，基本上语义化标签优点的对立面就是非语义化标签的局限性😁。 那就来总结一下：

  • 缺乏描述性：这些标签不提供关于内容的任何信息，使得理解和维护变得更加困难。
  • 不利于SEO：搜索引擎可能无法准确识别内容的重要性和结构，影响网站的搜索表现
  • 依赖CSS和JavaScript：非语义化标签通常需要额外的CSS和JavaScript来定义其结构和行为，增加了页面的复杂性。

总结

语义化标签提供了更清晰的内容结构和更好的无障碍支持。它们不仅有助于开发者和设计师理解页面布局，还对搜索引擎优化和屏幕阅读器用户至关重要，同时，减少对CSS和JavaScript的依赖意味着即使在这些资源未能加载或被禁用的情况下，网页的基本结构和内容仍然可以被用户理解和访问，提高了页面的健壮性。因此，推荐在构建网站时尽可能使用HTML5的语义化标签，以提升网页的整体质量和用户体验。

avatar
文章
阅读
粉丝