HTML语义化的案例分析 | 青训营笔记

50 阅读2分钟

分析一些实际网站的HTML结构,对比非语义化标签的差异

新浪网

语义化标签的使用:在新浪网的HTML结构中,可以看到使用了语义化标签来定义不同的内容区块。例如,使用了header标签来定义网站的头部,nav标签来定义导航栏,section标签来定义不同的内容区域,article标签来定义新闻文章,footer标签来定义网站的底部

淘宝网

语义化标签的使用:在淘宝网的HTML结构中,也可以看到使用了语义化标签来定义不同的内容区块。例如,使用了header标签来定义网站的头部,nav标签来定义导航栏,main标签来定义主要内容区域,aside标签来定义侧边栏等等。

非语义化标签的差异

  • 在新浪新闻的HTML结构中,非语义化标签的使用相对较少,但仍可以观察到一些非语义化标签的存在。例如,使用了div标签来定义一些通用的内容区块,比如广告区域、推荐模块等。这些div标签虽然没有明确的语义,但在整体结构中仍起到了组织和布局的作用。
  • 在淘宝网的HTML结构中,也可以看到一些非语义化标签的使用。例如,使用了div标签来定义一些通用的内容区块,比如商品列表、购物车模块等。这些div标签同样没有明确的语义,但在整体结构中起到了组织和布局的作用。
  • 以下是一些非语义化标签的常见差异:
  1. <div>标签:<div> 是最常见的非语义化标签之一,被广泛用于创建容器和布局。在不同的网站中,开发人员可以根据需要给 <div> 标签添加自定义的 class 或 id 属性,以便应用特定的样式或实现其他功能。
  2. <span>标签:<span> 通常作为内联元素的容器使用,用于包裹小块文本或其他内联元素。类似于 <div>,开发人员可以根据需要添加自定义 class 或 id 属性来控制 <span> 的样式或实现特定的交互效果。
  3. <b><i>标签:这两个标签用于加粗和斜体文本。它们都是非语义化标签,仅用于改变文本的样式。
  • 总体来说,虽然新浪新闻和淘宝网都在一定程度上使用了非语义化标签,但它们的使用较少且更多地侧重于使用语义化标签来定义不同的内容区块。这样做有助于提高网页的可读性、可访问性和搜索引擎的理解能力。