面试题：你怎么理解 HTML 语义化？语义化有什么优点？

面试题：你怎么理解 HTML 语义化？语义化有什么优点？

你怎么理解 HTML 语义化？

（语义化是什么）HTML 语义化要求开发者尽量使用有意义的标签来组织网页 ，而不是像 div、span 等无意义的标签，这里的意义就是语义。

（语义化的作用）通过使用语义化标签，开发者在编写网页的同时，还传达了不同内容的特殊含义。

（语义化举例）如 header 常用于定义头部/顶部 、nav 常用于定义网页导航 、article 常用于定义一篇文章 、section 常用于定义一节或一部分内容 、aside 常用于定义侧边栏 、footer 常用于定义底部 、main 常用于定义主体等等。

语义化有什么优点？

（对于开发者）语义化可以使代码结构清晰，从而可以使人快速理解网页中每个部分的内容。既提高了可读性，又增强了可维护性。

（对于 SEO）语义化可以让搜索引擎更好地理解网页内容 ，从而有利于提高网页在搜索结果中的排名。比如，同样的一篇文章，组织在 article 标签中，可以让搜索引擎知道这是一篇文章；如果组织在 div 中，则不利于搜索引擎的判断。

（对于残障人士）与对 SEO 的作用类似，语义化有助于让屏幕阅读器更好地解释网页内容 ，从而增强残障用户的使用体验。以苹果的 VoiceOver 举例，header、nav、main、footer 这样的语义化标签可以让 VoiceOver 快速定位到网页的不同部分；article、sections、aside 可以让 VoiceOver 更准确地解释和展示网页各部分的内容。语义化的标签既能提供结构上的信息（比如 header 表明是头部），也能提供功能上的信息（比如 nav 表明是导航栏）。

扩展：语义化标签还可以和 ARIA 规范（Accessible Rich Internet Application，丰富的互联网应用程序访问） 相结合，从而进一步提高网页的可访问性（意思是对残障人士更加友好）！

简单说说 ARIA：一组规范，旨在增强网页内容的可访问性，特别是对使用辅助技术（如屏幕阅读器）的用户。ARIA 的原理可以解释为：添加特定属性，从而提供额外的语义信息 ，从而使得辅助技术能更好理解和解释网页内容及其状态。ARIA 主要包括三个主要组件：角色 （Roles）表明元素类型及其作用、属性 （property）描述元素状态（数据）、状态 （state）描述元素的动态变化的状态（布尔值）。此外，所有属性、状态都需要使用 aria-xxx 的形式。

<div role="button" aria-pressed="false">Click me</div>

以上信息使得 div 有了角色、状态信息。即按钮（角色）、没有被按下（状态）。