企业官网建设流程全解析

我们常说的“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>元素，只需看里面有没有使用<h1>～<h6>元素即可。

  这样的独立模块在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、<h1>～<h6>元素及<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>，然后通过设置role="heading"来保持标题的语义，就像下面这样：
  
  另外，标题一定不能跳级，也就是说，若标题是<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-style：normal。

  说到倾斜，就不得不提及HTML中另外两个默认倾斜的元素，<i>元素和<em>元素，以及与之相对的<b>元素和<strong>元素。

  2.4、<i>元素和<b>元素为何起死回生？<em>元素和<strong>元素都表示强调吗

  要回答标题中设下的问题，就需要先介绍关于HTML语义化的稍深入的知识。

  HTML中的元素其实可以分为两类，一类是表意元素，另一类是表象元素。所谓表象元素，指的是不含任何语义、只用来控制文字的长相的元素，其中<i>和<b>元素就是典型的表象元素。

  i是单词"italic"（斜体字）的缩写，b是单词"bold"（粗体字）的缩写。同时，在任意的富文本输入框中（可以给<div>元素设置contenteditable="true"进行模拟）​，框选一段文字，然后按下Ctrl+B组合键，那么文字就会加粗，这里的加粗就是通过外包裹<b>元素实现的。类似地，按下Ctrl+I组合键，文字会倾斜，这是通过外包裹<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>”用来突显这句话的重要性，需要引起重视，而“<em>big</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-size：larger，类似地，<small>元素可以让文字的字号小一号，等同于设置font-size：smaller。

  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，也可以仅仅是小时和分钟，例如12：32，甚至可以是持续时间，例如PT4H18M3S。

  根据我的使用经验，在数据字段的描述信息中，时间字段通常只会出现一个，因此，直接使用time标签选择器进行样式匹配是非常安全的，可以让我们的HTML代码更简洁，语义也更好。
  

  2.8、搜索高亮必用元素<mark>

  只要是有文本高亮需求的情况，毫无疑问，一定要使用<mark>元素，虽然CSS Custom Highlight API也能实现文本的高亮，但一方面其兼容性不佳，另一方面高亮的文本无法交互，因此<mark>元素依然是最佳选择。

  在默认状态下，嵌套了<mark>元素的文本会有一个黄色的高亮背景色，例如：
  
  此时，文本“张”就有一个纯黄色的背景色，效果如图所示。

  
  <mark>元素的默认样式可以轻松自定义，例如：

  
  此时，高亮的元素就变成了红底白色。

  <mark>元素除全局HTML属性之外，不支持任何其他的HTML属性，是一个非常简单干净的HTML元素，除了可以用在搜索高亮的场景，也可以用在希望高亮标注某些信息时。