实践记录以及工具使用|豆包MarsCode AI刷题

用户77751491302
63 阅读7分钟

实际网站 HTML 结构分析与非语义化标签差异对比

一、案例选取与 HTML 结构分析

  1. 豆瓣电影网站（movie.douban.com/）

    • 整体结构：

      • <html>标签作为根元素，包裹整个页面内容。
      • <head>部分包含了页面的元信息，如<title>标签设置了页面标题为 “豆瓣电影”，<meta>标签用于定义字符编码、页面描述等信息。
      • <body>部分是页面的主要内容区域。

    • 导航栏结构：

      • 使用<nav>元素来构建导航栏，这是语义化的体现。导航栏内部的链接列表使用<ul>（无序列表）和<li>（列表项）来组织，每个<li>元素中包含<a>标签用于链接到不同的页面，如 “电影”“电视”“综艺” 等分类页面。这种结构清晰地表明了导航栏的功能和内容组织方式。

    • 电影列表部分：

      • 整体的电影列表可能被包裹在一个<div class="movie-list">（假设的类名）这样的容器元素中，用于区分页面其他部分。
      • 每个电影条目可能使用<article>元素来表示，因为每个电影条目可以看作是一个独立的、完整的内容块。在<article>内部，有电影海报的<img>标签，电影标题使用<h3>标签，评分信息可能使用<span class="rating">（假设的类名）等元素来展示，评论数量可能使用<span class="comment-count">等。这种结构清晰地划分了不同电影的信息，并且通过合适的语义化标签（如<article>）增强了内容的可读性和可维护性。

    • 页脚部分：

      • 使用<footer>元素来定义页脚区域，其中包含版权信息、网站相关链接等内容，如<p>标签用于显示版权声明，<ul>和<li>用于组织友情链接等。

  2. 百度搜索结果页面（www.baidu.com/s?wd=exampl…） （以搜索关键词 “example” 为例）

    • 整体结构类似豆瓣电影网站，有<html>、<head>和<body>基本结构。

    • 搜索结果区域：

      • 搜索结果列表可能被包裹在一个<div class="result-list">（假设的类名）中。
      • 每个搜索结果项使用<div class="result-item">（假设的类名）来表示，在其中有标题部分使用<h3>标签包含<a>链接到相关页面，摘要信息使用<p>标签展示。这里虽然没有使用像<article>这样更具语义化的标签来表示每个结果项，但整体结构通过类名也能一定程度上区分不同部分内容。

    • 相关搜索部分：

      • 可能使用<div class="related-search">（假设的类名）来包含相关搜索关键词列表，内部使用<ul>和<li>组织关键词，每个关键词也是通过<a>标签链接到相应搜索结果页面。

二、与非语义化标签的差异对比

  1. 可读性和可维护性方面

    • 语义化标签优势：

      • 在豆瓣电影网站中，使用<nav>、<article>、<footer>等语义化标签，使得代码结构清晰易懂。对于开发者来说，一眼就能明白各个部分的功能和内容类型。例如，在后期维护中，如果需要修改导航栏样式或添加新的导航链接，很容易定位到<nav>元素相关的代码。对于其他开发者接手项目或者团队协作时，也能快速理解代码意图。
      • 在百度搜索结果页面中，如果使用语义化标签来改进，比如将搜索结果项使用<article>标签包裹，会使代码结构更加清晰，而不是仅仅依靠类名来区分。这样在未来需求变更，如需要调整搜索结果的展示方式或添加新的信息到结果项中时，更容易进行修改，因为语义化标签明确了内容的含义。

    • 非语义化标签劣势：

      • 如果在豆瓣电影网站中不使用语义化标签，比如导航栏直接使用<div>来构建，在代码量较大时，很难快速区分哪些<div>是用于导航的，哪些是用于其他内容区域的。这会增加维护成本，开发者需要花费更多时间去理解代码逻辑。
      • 对于百度搜索结果页面，如果一直使用非语义化的<div>标签来构建各种结构，当需要进行搜索引擎优化（SEO）或者提升页面可访问性时，会遇到困难。因为搜索引擎和辅助技术（如屏幕阅读器）难以理解非语义化标签的含义，无法准确地为用户提供相关信息或导航。

  2. 搜索引擎优化（SEO）方面

    • 语义化标签优势：

      • 搜索引擎在抓取网页内容时，能够更好地理解语义化标签所代表的内容。例如，在豆瓣电影网站中，<article>标签内的电影信息对于搜索引擎来说更易识别为重要的内容块，可能会给予更高的权重。这样在用户搜索电影相关关键词时，豆瓣电影网站的相关页面更有可能出现在搜索结果的前列。
      • 语义化标签中的标题标签（如<h1> - <h6>）在 SEO 中也非常重要。合理使用这些标签可以让搜索引擎了解页面内容的层次结构，从而更好地判断页面的主题和相关性。在百度搜索结果页面中，如果将搜索结果标题使用更合适的标题标签（如<h2>等，根据实际层级确定），而不是统一的<div>或<p>标签，可能会提升页面在搜索引擎中的排名。

    • 非语义化标签劣势：

      • 大量使用非语义化标签会使搜索引擎难以准确判断页面内容的重要性和相关性。例如，如果百度搜索结果页面中的关键信息都被包裹在普通的<div>标签中，搜索引擎可能无法有效识别出标题、摘要等重要信息，从而影响页面在搜索结果中的排名。
      • 非语义化标签不利于搜索引擎构建页面的语义图谱。语义化标签可以帮助搜索引擎理解页面不同部分之间的关系，如<nav>与页面内容的导航关系，<footer>与页面底部信息的关系等。而使用非语义化标签会模糊这些关系，导致搜索引擎在理解页面整体结构和内容关系时存在困难。

  3. 可访问性方面

    • 语义化标签优势：

      • 对于使用辅助技术（如屏幕阅读器）的用户来说，语义化标签能够提供更好的体验。在豆瓣电影网站中，屏幕阅读器可以识别<nav>元素为导航区域，当用户浏览页面时，可以快速跳转到导航部分进行操作。<article>元素也能让屏幕阅读器更好地识别独立的内容块，方便用户逐篇阅读电影信息。
      • 语义化标签中的一些属性也有助于可访问性。例如，<img>标签的alt属性（在语义化使用时）可以为图像提供文字描述，当图像无法显示时，屏幕阅读器可以读取alt属性内容给用户，让用户了解图像的大致内容。在百度搜索结果页面中，如果为搜索结果中的图片添加准确的alt属性，将提升页面对于视障用户的可访问性。

    • 非语义化标签劣势：

      • 没有语义化标签，辅助技术难以理解页面内容的结构和含义。例如，如果导航栏使用非语义化标签构建，屏幕阅读器可能无法准确识别其为导航区域，用户在浏览页面时可能会遇到困难，无法快速找到导航链接。

      • 在非语义化标签构建的页面中，对于表单元素等的可访问性也会受到影响。如果表单没有使用语义化的<form>、<label>等标签，屏幕阅读器可能无法正确关联表单字段和标签，导致用户在填写表单时无法获得准确的提示信息，降低了表单的可用性。

综上所述，在实际网站开发中，使用 HTML 语义化标签能够在可读性、可维护性、搜索引擎优化和可访问性等多方面带来显著优势，相比非语义化标签更有利于构建高质量的网页。

avatar
文章
阅读
粉丝