语义化与使用场景1、页面整体布局结构的塑造1.1、header元素和footer元素的使用变化1.2、aside元素和main元素的结构关系1.3、nav元素的使用场景1.4、万能的section元素2、文档结构信息的标签使用2.1、比section元素更高一级的article元素2.2、h1h6元素及hgroup元素的使用规则2.3、引用元素blockquote、q和cite的区别2.4、i元素和b元素为何起死回生em元素和strong元素都表示强调吗2.4.1、i和em的使用区别2.4.2、b和strong的使用区别2.4.3、div和span元素是表意元素吗2.5、为何small元素被保留但big元素被废弃了2.6、del元素和s元素、ins元素的关系2.7、养成使用time元素表示日期的习惯2.8、搜索高亮必用元素mark我们常说的“HTML语义化”指的是使用符合当前内容场景的HTML元素构建Web应用可以在看不见的地方提升产品的用户体验间接增加产品的收益。举两个简单的例子。要显示图像效果我们可以使用img元素也可以使用div元素加背景图模拟例如虽然最终的视觉效果是一样的但是用户行为却大为不同。当我们使用img元素的时候在桌面端可以通过鼠标右键菜单复制图片、保存图片等在移动端可以通过长按图片实现类似的处理。但如果是使用背景图实现的那么用户想要对这些图片进行类似操作就无法实现用户体验就会下降。要实现链接跳转的效果可以使用a元素也可以使用span元素加点击事件模拟例如虽然用户点击链接之后都能前往目标页面但是操作体验却有明显区别。例如使用a元素实现的链接不仅可以通过右键复制还能通过键盘访问支持按回车键触发访问行为以及匹配类似any-link这样的CSS选择器。如果是使用span元素实现的则上述这些特性均不存在显然用户体验和开发体验都不好。有人会说图片我都使用img元素链接都使用a元素。对没错这两个元素大家用得其实都挺好的但并不是因为语义而是因为其可替代性弱也就是通过其他方式模拟图片和链接成本更高不如使用这两个元素。如果某个HTML元素的使用成本和div、span元素相当甚至更高那么该元素就往往入不了开发者的法眼。比如列表元素使用li元素更合理但使用元素就意味着需要重置部分CSS样式还需要考虑和第三方组件样式冲突的问题而使用div元素就没有这个烦恼开发成本更低反正最终效果一样于是很多开发人员就选择使用div元素实现列表布局。此现象非常常见由于目前国内对无障碍访问没有大规模强制要求因此HTML语义化的问题并没有得到普遍的重视更多的还是看前端开发人员的自觉性。当然关于HTML语义化还有另外的问题。其一知识储备不足很多人自以为对HTML元素很了解实际上只知道“一小撮”​要知道目前HTML标准元素足有120多个很多前端开发人员怕是连一半数量的HTML元素都不认识。其二语义化滥用开发人员知道HTML语义化好处多多但是没用对地方其反而给自己带来了混乱。1、页面整体布局结构的塑造这里要介绍的块级元素是在任意类型的Web页面中都有机会使用的HTML元素包括header、footer、aside、main、nav等。1.1、header元素和footer元素的使用变化要知道HTML语义化的使用并不是一成不变的会随着时间的推移发生变化。例如在过去a元素里面包含div这样的块级元素是不推荐的但如今这却是常态又例如i元素和b元素曾一度不推荐使用但是随着HTML5赋予了其新的语义后它们又有了用武之地。而header和footer元素也是如此它们的使用也发生了变化。以header元素为例。在过去header元素往往是页面的第一个元素用于表示页面的头部通常包含网站的Logo、导航栏、搜索框等内容。下图就是一个典型的需要使用header元素的结构。但如今header元素的应用场景更加广泛包括在文章中用于表示文章的头部通常包含文章的标题、作者、发布时间等内容。在组件中用于表示组件的头部通常包含组件的标题、操作按钮等内容。因此下面这两种HTML结构的出现也是合理的。footer元素与之类似它不仅可以作为页面的底部元素显示网站的版权信息等还可以作为文章内容或者组件的底部元素使用。1.2、aside元素和main元素的结构关系aside元素通常作为main元素的一部分出现。一个典型的结构关系应该是这样的main表示页面的主内容一个页面中只能有一个main元素其被称为“主元素”​。主元素中又分主内容和次要内容所谓次要内容可被理解为和主要内容间接相关的内容。举个例子在某文章阅读页面其右侧有一个“相关文章”列表此时这个列表整体就可以使用aside元素示意如图所示。注意并不是说只要是侧边栏布局就需要使用aside元素其一定要与主内容间接关联。如果侧边栏的所有模块都是有效内容则可以整体共用一个aside其HTML结构如下所示如果只是部分内容有所关联例如侧边栏有部分模块是广告则可以分别进行设置例如当然上述建议仅仅是建议真实的开发场景往往更加自由。例如你将main元素和aside元素同级呈现也不会有什么问题。1.3、nav元素的使用场景nav元素表示页面的导航通常包含一组链接用于帮助用户在网站中进行跳转。例如网站的导航、标题菜单等都是适合使用nav元素的场景推荐使用的HTML语义结构如下所示但是这并不表示有多个导航链接的场合都适合使用nav元素例如在网站的底部通常会有很多网络安全与备案链接就不适合使用nav元素。反而有些看似不太适合使用nav元素的地方可以使用nav元素比如下面这个例子是带有描述信息的导航场景。1.4、万能的section元素在Web开发中无论是传统的文档类网页还是偏应用的网站section元素一定是出现频率最高的几个块级元素之一适用范围极广。因为只要是带有标题的独立部分都适合使用section元素。换句话说要想看这个模块是否适合使用section元素只需看里面有没有使用h1h6元素即可。这样的独立模块在Web产品中实在太普遍了我随便找了两个页面就看到了很多适合使用section元素的地方如图所示。说极端点在Web开发中如果对于某个功能模块你不知道使用什么语义的元素合适那就使用section元素绝不会有问题。甚至在许多非文档类的网站中即使没有任何标题元素你也可以使用section元素只要这个地方自成一体。2、文档结构信息的标签使用文档结构信息对语义化的要求非常高例如新闻、博客、咨询、论坛、社交网站信息流等这些也是HTML语义化价值最大化的使用场景超过七八成的HTML元素都是为了文档信息展示而设计的。相信有很多HTML元素是大家不知道的或者说可能见过但使用不当这里会给大家详细介绍。2.1、比section元素更高一级的article元素article元素通常用来包裹整个信息模块以常见的博客文章为例其HTML结构应该是这样的article元素的使用场景是“独立的、完整的、可以独立于上下文的内容”​因此如果出现article元素互相嵌套使用的情况一定是不符合语义的内部的article元素请替换成section元素。和main元素不同一个页面中是有可能出现多个article元素的例如无限滚动加载的网络小说每一个独立的章节都可以使用article元素。总结一下就是一个页面只有一个main元素一个main元素内部可能会有多个article元素而每个article元素内部的独立内容则使用section元素。层级关系如下所示2.2、h1h6元素及hgroup元素的使用规则原生的标题元素包括h1、h2、h3、h4、h5和h6分别表示一级标题、二级标题、三级标题、四级标题、五级标题和六级标题。其中一个页面一定只有一个一级标题即h1元素最多只能出现一次且必须最先出现。对于工具类或应用型网站h1元素往往会用在Logo元素上同时设置网站的名称以增加网站名称的SEO识别权重对于信息展示类网站h1元素多用来表示主信息的大标题。例如知名的问答类网站stackoverflow的问题标题使用的就是h1元素如图所示。因为用户多是通过搜索引擎搜索问题来访问stackoverflow网站的因此这些问题的重要性极高必须使用h1元素。在某种程度上h1元素的SEO优先级和title元素有一拼因此一定要谨慎使用h1元素。如果开发网页的时候发现h1元素已经被占用千万不要觉得无所谓又额外设置一个h1元素那样SEO一定会受影响请使用h2元素代替或者将另外的h1元素换成div然后通过设置roleheading来保持标题的语义就像下面这样另外标题一定不能跳级也就是说若标题是h2元素但是子标题用的却是h4元素则也会造成标题的语义混乱影响SEO效果。下面所示的标题元素用法是有问题的。一定要一级一级来就像下面这样下面再说说和标题元素密切相关的hgroup元素。它也是一个非常实用的HTML元素但是很多人却没使用过。乍一看标签的名字会误以为hgroup元素的作用是将多个标题元素包裹起来其实不然hgroup元素是用来包裹标题和补充信息的而补充信息往往是一个或多个p元素。这里举hgroup元素的两个使用案例非文档结构的标题使用文档信息中的标题一定要遵循层级递进的原则但是工具类的模块标题则相对独立使用的标题元素从h3到h6均可至于应该使用哪个级别的标题往往是根据模块的嵌套层级及重要程度决定的。例如dialog弹框的大标题可以使用h3如图所示弹框主体内容中的标题可以使用h4。又如下图所示的某在线图片压缩工具页面的选项标题已经可以用到h5级别了。2.3、引用元素blockquote、q和cite的区别在众多的HTML元素中有三个元素是表示引用的分别是blockquote、q和cite元素。既然被分门别类设计出来那么它们肯定是有区别的。首先blockquote元素表示的是长篇引用通常是一段话或某个章节例如而q元素表示的是短篇引用通常是一句话例如blockquote元素和q元素的语义本质上是一样的标签q其实就是单词“quote”的缩写​区别在于引用内容的数量数量的多寡自然也会对布局产生影响因此默认情况下blockquote是块级元素单词“blockquote”就是块级引用的意思所以表现为块级元素理所当然同时在上下左右都会有默认的margin距离如图所示。而q是内联元素没有默认的margin距离但是会在内联文本的前后添加引号如图所示。至于引号的类型则是由当前网页所设置的语言决定的。如果是中文则引号是中文双引号如果是英文则引号是英文双引号。对了q还支持名为cite的HTML属性此属性的值必须是一个URL用于指定引用信息的源文档或消息例如最后讲一下cite引用。虽然也叫引用但cite引用通常用来表示特殊的名词名称而不是言论引用。例如cite元素可以用来表示书籍、电影、歌曲、专辑、杂志、报纸、戏剧、电视节目、艺术作品、音乐作品、软件、游戏、应用程序、电台或电视广播节目的名称例如cite元素默认会让文字倾斜由于英语字形不规则、体量小所以专门设计倾斜字体样式很方便特殊名称保持倾斜既能被快速标识又不影响阅读是个不错的做法。但是对于东亚语言的文字而言则是灾难以中文为例一个汉字字库少说有几千个汉字再去为每个汉字设计倾斜样式人力成本极大字体包文件的体积也不容小觑而且中文的倾斜其实都是算法强制倾斜并不是那么好看。因此在中文体系下如果要使用cite元素记得设置font-stylenormal。说到倾斜就不得不提及HTML中另外两个默认倾斜的元素i元素和em元素以及与之相对的b元素和strong元素。2.4、i元素和b元素为何起死回生em元素和strong元素都表示强调吗要回答标题中设下的问题就需要先介绍关于HTML语义化的稍深入的知识。HTML中的元素其实可以分为两类一类是表意元素另一类是表象元素。所谓表象元素指的是不含任何语义、只用来控制文字的长相的元素其中i和b元素就是典型的表象元素。i是单词italic斜体字的缩写b是单词bold粗体字的缩写。同时在任意的富文本输入框中可以给div元素设置contenteditabletrue进行模拟​框选一段文字然后按下CtrlB组合键那么文字就会加粗这里的加粗就是通过外包裹b元素实现的。类似地按下CtrlI组合键文字会倾斜这是通过外包裹i元素实现的。对应的效果和HTML源码参见下图。此特性源远流长一直被浏览器继承并保留了下来是i和b归属于表象元素的非常好的证明。在CSS 2.1规范被确立后Web规范推荐HTML的样式和行为分离因此所有的表象元素都不推荐使用虽然浏览器依然支持对应的样式表现​。但是随着HTML 5时代的到来有些表象元素又迎来了“第二春”​i元素和b元素就是其中的代表。在HTML 5中i元素和b元素的语义被重新定义。i原本只用来实现倾斜的效果现在用来体现一种“交替的声音”​。通俗讲就是在普通段落文字中实现看起来和周围文本不同的文本。如外语例如中文文章中混搭一些英文或日语​、科技术语如超氧化物歧化酶SOD或用来排版的斜体文字。b原本用来实现加粗的效果现在用来突出文字。通俗讲就是在普通段落文字中突出不安分的文字。如文档概要中的关键字、评论中的产品名或者代表强调的排版方式。下面是这两个元素的使用案例一段剧本对话节选​上面就使用了i class“voiceover”来表示话外音使用了b class“character”来表示人物。其渲染效果如图所示。再看下面这个例子使用i lang“ja-latn”お箸来表明“不同语言”​使用b class“status”来突出当前的状态。由于i元素和b元素是从表象元素转换为表意元素的而标签本身缺乏语义因此在实际开发过程中为了方便识别建议通过类名或者自定义属性的方式让人知道为什么要使用它们。i和b因为HTML 5的到来而“起死回生”​原本“平替”​仅指使用平替的em和strong元素的意义也跟着发生了细微的变化。在过去em和strong元素都表示强调而现在strong元素的语义已经不是强调而是重要了用来表示内容具有很强的重要性、严肃性或紧迫性而em元素基本保持不变表示重点强调通常仅限于句子中的一个或多个单词并影响句子本身的含义。例如其中​“strong千万不要使用center元素/strong”用来突显这句话的重要性需要引起重视而“embig/em”用来强调big元素比其他几个元素重要会专门介绍。2.4.1、i和em的使用区别i和em元素都可以让文字倾斜且都表示当前文本和周围文本有所不同那么它们的区别是什么呢很简单是否包含感情例如使用em元素包裹的文字会在屏幕阅读设备朗读的时候刻意重音朗读以表示强调而用元素包裹的文字在被朗读的时候不会有明显的语音语调的变化其所体现出来的不同主要是给人看的让人知道这部分文本和周围文本是有所不同的可以是类型的不同、语言的不同或者专业名词上的不同。2.4.2、b和strong的使用区别b和strong默认都会让文字加粗乍一看其作用是一样的其实不然b元素让文字加粗的目的只是吸引别人的注意力但不表示是重要的内容或者说视觉表现的作用要大于语义本身。例如图对应的人名就使用了b元素为的就是让人在阅读的时候迅速找到目标信息从而提高阅读体验。2.4.3、div和span元素是表意元素吗或许有人听到过这样的说法div和span元素没有语义因此可以放心大胆地使用在不知道该使用什么块级元素的时候就使用div在不知道该使用哪个内联元素的时候就使用span于是div和span元素成为Web网页开发中使用频率最高的元素。严格来讲div和span元素并非没有语义而是语义宽泛没有特殊语义​div是内容划分元素是流体内容的通用容器span是内容跨度元素是内联内容的通用容器。语义确实宽泛毕竟所有常见的块级元素都有内容划分的作用所有非控件类的内联元素都可以实现内容跨度的效果……不管怎样这就是div和span元素所扮演的角色默认不含任何额外多余样式的纯粹的容器元素虽然其语义可以忽略不计但它们仍然属于表意元素。2.5、为何small元素被保留但big元素被废弃了这是很多Web开发人员疑惑的一个问题同样都是HTML4时代的表象元素但是到了HTML 5时代为何small元素被保留但big元素却被无情废弃了其实原因很简单参与规范制定的人员思来想去也没有给big元素找到合适的语义场景于是big未能实现从表象元素到表意元素的华丽转身而small元素找到了合适的语义场景那就是旁注和小字体如版权说明和 法律文本。在所有的文档结构场景中并不存在符合放大文字的语义场景所以……时也命也说实话我还是挺喜欢big元素的有时候在一段文本中希望放大一些内容的字号又不想定义类名就可以直接套一层big元素等同于设置font-sizelarger类似地small元素可以让文字的字号小一号等同于设置font-sizesmaller。2.6、del元素和s元素、ins元素的关系del元素和s元素默认都会给文字添加删除线似乎都有“删除”的含义但实际上两者的语义还是有明显的区别的。del元素的语义是删除就是文档内容的增、删、改、查操作中的“删”​支持两个HTML属性分别是cite和datetime它们各自表示的含义如下cite属性的值是解释删除原因的URL引用地址例如对应的渲染效果如图所示。这里的cite属性对样式渲染及交互效果是没有任何影响的只会影响搜索引擎或屏幕阅读器等设备的识别非必需属性可加可不加。datetime表示删除的时间必须是合法的时间格式字符串。而s元素的语义是当前信息已经不再准确或者不再相关这也是HTML 5赋予的新语义例如过期的活动说明、错误的关系说明等例如上述HTML代码的渲染效果如图所示。至于ins元素则表示插入和元素的语义完全相反且使用场景也是一样的都用在文档内容的编辑上支持的属性也是一模一样的都是cite和datetime这两个HTML属性。在实际开发中del元素和ins元素通常结伴出现前者的默认样式是删除线后者的默认样式是下画线。不过对于中文字体无论是删除线还是下画线都不是很明显因此对于删除和插入的内容更推荐使用背景色进行区分。例如提交代码的diff对比效果就特别适合使用这两个HTML元素。配合特定的CSS样式就可以实现如图所示的样式效果。上述效果以及对应的CSS代码可以通过在浏览器中输入地址https://www.htmlapi.cn/5/2-1.html访问来体验。2.7、养成使用time元素表示日期的习惯time元素非常常用至少对我而言是这样的因为不仅是文档类型的网页就连应用程序类型的网页也会频繁地出现时间内容例如数据的提交时间、内容的修改时间等。只要是与时间相关的描述不需要任何多余的思考都请使用time元素例如然后如果数据允许精准的时间值可以使用datetime属性标记例如datetime的属性值格式要求比较松散只要是时间就可以可以仅仅是年份例如2024也可以仅仅是小时和分钟例如1232甚至可以是持续时间例如PT4H18M3S。根据我的使用经验在数据字段的描述信息中时间字段通常只会出现一个因此直接使用time标签选择器进行样式匹配是非常安全的可以让我们的HTML代码更简洁语义也更好。2.8、搜索高亮必用元素mark只要是有文本高亮需求的情况毫无疑问一定要使用mark元素虽然CSS Custom Highlight API也能实现文本的高亮但一方面其兼容性不佳另一方面高亮的文本无法交互因此mark元素依然是最佳选择。在默认状态下嵌套了mark元素的文本会有一个黄色的高亮背景色例如此时文本“张”就有一个纯黄色的背景色效果如图所示。mark元素的默认样式可以轻松自定义例如此时高亮的元素就变成了红底白色。mark元素除全局HTML属性之外不支持任何其他的HTML属性是一个非常简单干净的HTML元素除了可以用在搜索高亮的场景也可以用在希望高亮标注某些信息时。