前言
- 如何理解html语义化
什么是语义元素
语义是指对一个词或者句子含义的正确解释。很多HTML标签也具有语义的意义,也就是说元素本身传达了关于标签所包含内容类型的一些信息。例如,当浏览器解析到<h1></h1>标签时,它将该标签解释为包含这一块内容的最重要的标题。h1标签的语义就是用它来标识特定网页或部分最重要的标题。
为什么要语义化
- 代码结构:使页面没有css的情况下,也能够呈现出很好的内容结构
- 有利于SEO:爬虫依赖标签来确定关键字的权重,因此可以和搜索引擎建立良好的沟通,帮助爬虫抓取更多的有效信息（主要）
- 提升用户体验:例如title、alt可以用于解释名称或者解释图片信息,以及label标签的灵活运用。
- 便于团队开发和维护:语义化使得代码更具有可读性,让其他开发人员更加理解你的html结构,减少差异化。
- 方便其他设备解析:如屏幕阅读器、盲人阅读器、移动设备等,以有意义的方式来渲染网页。
HTML5常用的语义元素
HTML5提供了新的语义元素来定义网页的不同部分,它们被称为为"切片元素",如图所示:
- header:用于定义页面的头部区域,通常包括网站logo、主导航、全站链接以及搜索框。
- nav:定义页面的导航链接部分区域。
- main:定义文档的主要内容,该内容在文档中应当是独一无二的
- article:定义页面独立的内容,它可以有自己的header、footer、section等,专注于单个主题的博客文章,报纸文章或网页文章。
- section:表示文档中的一个区域(或节),比如内容中的一个专题组。
- aside:表示文档的一部分，其内容仅与文档的主要内容间接相关。其通常以侧边栏或标注框（call-out box）的形式出现。
- footer:定义最近一个章节内容或者根节点元素的页脚。一个页脚通常包含该章节作者、版权数据或者与文档相关的链接等信息。
大约有100多个HTML语义元素可供选择，以下是常用的语义元素：
| 内容分区 | 文本 | 内联文本语义 |
|---|---|---|
| header | p | a |
| h1 | ul | strong |
| nav | ol | em |
| footer | li | q |
| header | blockquote | abbr |
| ... | ... | ... |
更多参考developer.mozilla.org/zh-CN/docs/…
无障碍网页
W3C在1997年发起了一项WAI (Web Accessibility Initiative)的计划,该计划的目标是提升网站的易用性(accessibility),而其中有一个很重要的指标,就是能够被残障人士使用的网站才能称得上一个易用的(易访问的)网站。
HTML5在无障碍方面进行了加强,加入了无障碍属性。
所谓HTML5无障碍属性,主要针对的是视觉缺陷,失聪,行动不方便的残疾人以及假装残疾的测试人员。尤其像盲人,眼睛看不到,其浏览网页则需要借助辅助设备,如屏幕阅读器,屏幕阅读机可以大声朗读或者输出盲文。
而HTML5无障碍属性就是可以让屏幕阅读器准确识别网页中的内容、变化、状态的技术规范,可以让盲人这类用户也能无障碍阅读!
更多参考developer.mozilla.org/zh-CN/docs/…
常见的无障碍属性
WAI-ARIA是W3C编写的规范,定义了一组可用于其他元素的HTML特性,用于提供额外的语义化以及改善缺乏的可访问性。以下是规范中三个主要的特性:
-
角色:这定义了元素是干什么的。许多「标志性的角色」,其实重复了HTML5的结构元素的语义价值。例如
role="navigation"(nav)或者role="complementary"(aside) -
属性:我们能通过定义一些属性给元素,让他们具备更多的语义。例如:
aria-required="true"意味着元素在表单上是必填的。然而aria-labelledby="label"允许在元素上设置一个ID,用于labelledby引用作为屏幕阅读器指定的lobel内容,多个也可以。 -
状态:用于表达元素当前的条件的特殊属性,例如
aria-disabled="true",屏幕阅读器就会这个表单禁止输入。状态和属性的差异之处就是:属性在应用的生命周期中不会改变,而状态可以,通常我们用编程的方法改变它,例如Javascript。
关于WAI-ARIA属性重要的一点是它不会对Web页面有任何影响,除了让更多的信息从浏览器暴露给accessibility APIs(无障碍API),这也是屏幕阅读器这一类软件的信息源。WAI-ARIA不会影响网页的结构,以及DOM等等,尽管这些属性可用于作为CSS选择器。
更多参考developer.mozilla.org/zh-CN/docs/…
总结
说说对html语义化的理解
语义化的目的主要有以下几点:
1.去掉或者丢失样式的时候能够让页面呈现出清晰的结构
2.有利于SEO：和搜索引擎建立良好的沟通，有助于爬虫抓取更多有效的信息，爬虫依赖标签来确定上下文和各个关键字的权重
3.方便其他设备解析(如屏幕阅读器、盲人阅读器、移动设备)以异义的方式来渲染网页
4.便于团队开发和维护,语义化更具可读性,可以减少差异化。HTML5中新增加的很多标签,例如:article、nav、header和footer等,就是基于语义化设计原则
