HTML语义化

前言

HTML最常见的一个面试题就是：请谈一谈HTML语义化

语义化标签

表明内容的标签：

• header：头部内容
• footer：底部版权、友链
• article：文章
• section：章节
• p：段落，段落需要使用p标签而不是div
• aside：侧边栏
• title：标题
• nav：导航栏
• a：超链接
• ul：无序列表
• h1：大标题，整个网页有且只能有一个h1
• time：定义日期或者时间
• mark：高亮显示

一般我们的文章都是使用div嵌套div来写；但是我们可以使用上面这些语义化标签对文章结构进行改造，这样可维护性、可访问性都非常好，非常有利于seo，当然假如你已经写好了很多组件，那么改造成本就非常大了，所以在项目启动之前你就需要了解这些知识。

表明资源的标签：

• img：图片
• video：视频
• audio：音频

还有一些特殊的标签，他们也利于语义化：

比如加粗不要使用b而是使用strong，strong标签是有语义化的；

语义化属性

title：在a标签上一般可以添加这个属性，表示a标签的含义或者跳转的目的网站

alt：图片的说明，img标签建议一律加上该属性

role：无障碍属性，提高网站可访问性；例如role=“list” role=“listitem”

aria-*：无障碍属性，提高网站可访问性，例如aria-hidden表示该元素为隐藏元素

语义化内容

标题：文章需要按照h1、h2、h3按照顺序去写，中间不能断掉，不利于语义化

空标签优化：尽量避免空标签，即使有空标签也要写文字，可以把font-size设置为0；例如有的使用背景图，那么标签中需要描述一下这个背景图；尽量使用before，after等伪元素去写一些效果

标签的嵌套：标签需要根据语义化级别进行嵌套，例如：

<section>
    <p>
        段落一
    </p>
     <p>
        段落二
    </p>
</section>

显然不能将section嵌套到p标签里面去

在行内元素中嵌套块元素显然也是一个糟糕的做法：例如

<span>
    <div>
    </div>
</span>