深入浅出的web语义化理解

写目录

• 前言
• 一：什么是语义元素？
• 二：为什么要语义化？
• 三：常用的语义元素
• 四：文档结构标签
• 五：参考

前言

很多面试官会问：

谈谈你对 HTML5语义化标签的理解。

那么本篇博客可以对你理解HTML5语义化标签有所帮助。

一：什么是语义元素？

语义元素清楚地向浏览器和开发者描述其意义。

非语义元素的例子：<div> 和 <span> - 无法提供关于其内容的信息。

语义元素的例子：<form>、<table> 以及 <img> 清晰地定义其内容。

二：为什么要语义化？

• 代码结构: 使页面没有css的情况下，也能够呈现出很好的内容结构
• 有利于SEO: 爬虫依赖标签来确定关键字的权重，因此可以和搜索引擎建立良好的沟通，帮助爬虫抓取更多的有效信息
• 提升用户体验： 例如title、alt可以用于解释名称或者解释图片信息，以及label标签的灵活运用。
• 便于团队开发和维护: 语义化使得代码更具有可读性，让其他开发人员更加理解你的html结构，减少差异化。
• 方便其他设备解析: 如屏幕阅读器、盲人阅读器、移动设备等，以有意义的方式来渲染网页。

三：常用的语义元素

HTML5提供了新的语义元素来定义网页的不同部分，它们被称为“切片元素”，如图所示

四：文档结构标签

• <main> 定义文档的主体部分
• <nav> 定义导航链接

HTML 标签列表（功能排序） | 菜鸟教程 .html

五：参考

• HTML5 语义元素 .asp
• html语义化标签_越努力，越幸运！-CSDN博客

深入浅出的web语义化理解

写目录

• 前言
• 一：什么是语义元素？
• 二：为什么要语义化？
• 三：常用的语义元素
• 四：文档结构标签
• 五：参考

前言

很多面试官会问：

谈谈你对 HTML5语义化标签的理解。

那么本篇博客可以对你理解HTML5语义化标签有所帮助。

一：什么是语义元素？

语义元素清楚地向浏览器和开发者描述其意义。

非语义元素的例子：<div> 和 <span> - 无法提供关于其内容的信息。

语义元素的例子：<form>、<table> 以及 <img> 清晰地定义其内容。

二：为什么要语义化？

• 代码结构: 使页面没有css的情况下，也能够呈现出很好的内容结构
• 有利于SEO: 爬虫依赖标签来确定关键字的权重，因此可以和搜索引擎建立良好的沟通，帮助爬虫抓取更多的有效信息
• 提升用户体验： 例如title、alt可以用于解释名称或者解释图片信息，以及label标签的灵活运用。
• 便于团队开发和维护: 语义化使得代码更具有可读性，让其他开发人员更加理解你的html结构，减少差异化。
• 方便其他设备解析: 如屏幕阅读器、盲人阅读器、移动设备等，以有意义的方式来渲染网页。

三：常用的语义元素

HTML5提供了新的语义元素来定义网页的不同部分，它们被称为“切片元素”，如图所示

四：文档结构标签

• <main> 定义文档的主体部分
• <nav> 定义导航链接

HTML 标签列表（功能排序） | 菜鸟教程 .html

五：参考

• HTML5 语义元素 .asp
• html语义化标签_越努力，越幸运！-CSDN博客