HTML语义化的案例分析 青训营X豆包MarsCode 技术训练营AI｜ 豆包MarsCode AI 刷题

用户182059969597
128 阅读6分钟

北京大学网站（www.pku.edu.cn/）HTML 结构分析

整体结构

  • 网站的 HTML 文档以<!DOCTYPE html>声明开始，表明这是一个 HTML5 文档。
  • <html>标签作为根元素，包裹了整个页面的内容，其内部包含<head>和<body>标签。

<head>部分

  • <meta charset="UTF-8">：指定了文档的字符编码为 UTF - 8，确保页面能够正确显示各种字符。
  • <meta name="viewport" content="width=device-width, initial-scale=1.0">：用于设置视口，使页面在移动设备上能够自适应显示，初始缩放比例为 1.0。

Snipaste_2024-11-23_13-54-22.png

  • 多个<link>标签用于引入外部样式表文件，如bootstrap.min.css、swiper-bundle.min.css等，这些样式表用于定义页面的布局、样式和交互效果，增强了页面的视觉呈现和用户体验。
  • <script>标签用于引入外部 JavaScript 文件，如bootstrap.bundle.min.js、swiper-bundle.min.js等，这些脚本文件实现了页面的各种动态功能，如轮播图效果、菜单交互等，提升了页面的交互性和功能性。

Snipaste_2024-11-23_13-49-41.png

  • <title>标签设置了页面的标题为 “北京大学”，该标题会显示在浏览器的标题栏中，对于搜索引擎优化（SEO）和用户识别页面内容也有重要作用。

<body>部分

111.png

  • 导航栏：

    • 页面顶部的导航栏使用了<nav>标签，这是 HTML5 中的语义化标签，用于表示页面的导航链接区域，清晰地划分了导航功能部分，提高了代码的可读性和可维护性。
    • 导航栏内部包含了多个<a>标签用于链接到不同的页面部分，如 “北大概况”、“招生”、“学部与院系” 等，这些链接明确了导航的目的地，方便用户进行页面跳转。

  • 轮播图和主要内容区域： Snipaste_2024-11-23_13-52-50.png

    • 使用了<div class="swiper-container">等一系列相关的<div>标签来构建轮播图组件，这里虽然使用了<div>标签，但结合了特定的类名（如swiper-container等）来实现特定的功能和样式，这种方式在一定程度上通过类名传达了结构的用途。然而，相较于更语义化的方式，如果使用<figure>或<section>标签来包裹轮播图相关内容，并结合适当的 ARIA 角色（如role="group"等）来表示其为一个功能组，会使结构更加语义化，有助于屏幕阅读器等辅助技术更好地理解和传达内容给有视觉障碍的用户。
    • 在轮播图下方的主要内容区域，使用了<div class="container-fluid">和<div class="row">等<div>标签来构建页面布局，这种方式是基于 Bootstrap 框架的栅格系统，通过类名来控制列的宽度和布局。虽然实现了灵活的布局，但从语义化角度看，使用<section>或<article>标签来划分不同的内容板块（如新闻公告、学术科研成果展示等）会更合适，能够更清晰地传达文档结构和内容层次。

  • 新闻公告和其他内容模块：

    • 对于新闻公告部分，如 “北大・要闻”、“通知公告・北大声明” 等，目前使用了<div>标签来包裹列表项。如果使用<ul>（无序列表）或<ol>（有序列表）标签来包裹新闻列表，再结合<li>标签表示每个新闻项，会更符合语义化的要求，因为新闻列表本质上是一组相关的信息项。同时，对于每个新闻项中的标题（如<h3>标签包裹的新闻标题），可以考虑使用<hgroup>标签将标题和相关的副标题（如果有的话）组合在一起，增强标题部分的语义结构。

Snipaste_2024-11-23_13-59-21.png - 在 “学术・科研”、“北大・人物” 等模块中，同样是使用<div>标签来构建布局和包裹内容。这里可以使用<section>标签来表示每个独立的主题模块，使页面结构更清晰，便于搜索引擎和辅助技术理解页面内容的组织和层次。

  • 页脚：

Snipaste_2024-11-23_13-57-52.png - 网站的页脚部分使用了<footer>标签，这是一个语义化标签，用于表示页面的底部区域，通常包含版权信息、联系方式、网站地图等相关内容。在北京大学网站的页脚中，包含了版权声明、地址、邮编、反馈邮箱、备案号等信息，使用<footer>标签符合语义化要求，明确了该部分内容的性质和用途。

与非语义化标签差异对比

可读性和可维护性

  • 如果大量使用非语义化标签（如过多使用<div>标签而不结合语义化的方式），代码结构会变得扁平且难以理解。例如，在没有适当语义化标签的情况下，很难一眼看出页面中不同区域的功能和内容层次关系。而北京大学网站中合理使用了一些语义化标签（如<nav>、<footer>等），使得代码结构在一定程度上更易于阅读和维护，开发人员和维护人员能够更快地理解页面的布局和功能划分。

搜索引擎优化（SEO）

  • 搜索引擎在爬取网页时，更倾向于理解具有语义化结构的页面。语义化标签能够帮助搜索引擎更好地识别页面的关键内容、标题层次、导航结构等信息。例如，使用<h1> - <h6>标签来表示标题层次，搜索引擎可以更准确地判断页面的主题和内容重点。如果使用非语义化标签，搜索引擎可能需要更多的努力来解析页面内容，从而影响网站在搜索结果中的排名。北京大学网站中部分合理使用的语义化标签有助于搜索引擎优化，但在一些内容模块中如果能进一步优化语义化结构，将对 SEO 有更大的帮助。

可访问性

  • 对于使用屏幕阅读器等辅助技术的用户来说，语义化标签能够提供更好的体验。例如，<nav>标签可以让屏幕阅读器快速识别导航区域，方便用户跳转到不同页面部分；<footer>标签可以让用户知道页面底部包含重要的附加信息。非语义化标签可能无法提供这样明确的信息，使得有视觉障碍或其他特殊需求的用户在浏览页面时遇到困难。北京大学网站在一些部分（如导航和页脚）已经考虑到了可访问性通过使用语义化标签，但在内容区域（如轮播图、新闻列表等）如果能进一步改进为更语义化的结构，将能更好地满足所有用户的需求。

总结，北京大学网站在 HTML 结构中已经开始使用一些语义化标签，但某些部分仍有改进空间，可以进一步优化 HTML 结构，提高语义化程度，以提升代码可读性、搜索引擎优化效果和网站的可访问性。

avatar
文章
阅读
粉丝