何为语义化?

语义化的含义就是用正确的标签做正确的事情,html语义化就是让页面的内容结构化,便于对浏览器、搜索引擎解析;在没有样式CCS情况下也以一种文档格式显示,并且是容易阅读的。

做一个比较而言,Markdown导出的html结构就是符合大部分语义化的做法,即便在没有样式时,通过浏览器基础的样式和解析,整个页面仍保持构想的文档结构,能够维持较为清晰的页面结构,对我而言,就需要注意标签的使用。

语义化常使用的标签

meta信息
  • title
    title标签指定了文档对外的标题,建议一般显示为 窗口标题 / 历史记录 / 搜索结果标题 / …
  • lang
    lang指定了内容的语言
  • meta
    meta元素中,name决定了文档种类,content表示内容,标准情况下应包括application-name, author, description, generator, keywords
链接
  • link
    link元素必须包括rel和href属性,用来描述文档本身与其他资源的关系
  • a
    a元素在存在href时为超链接,无href为链接占位符,可以添加rel属性使其兼容浏览器的阅读模式(如rel=”prev”显示为分页器)
区块
  • article
    article标签可以用于独立的文档、页面等,可以单独发布、重用等内容
  • section
    section一般是按主题将内容分组,通常会有标题,但本身并非语义化的div,它通常用于将内容体现在文档等提纲中
  • nav
    nav是一个包含导航链接等自然节,它可以帮助UA快速获得导航内容,其内部不一定使用ul,也可使用自然文本
  • aside
    aside也是块级元素,它通常表示与周围内容关系不大密切等内容,可以用来做侧边栏等容器等
  • h1-h6
    标题元素日常常用,需要注意覆盖浏览器默认样式
  • header/footer
    header
    footer元素与header类似,代表最近的父级区块内容的页脚,同样不影响文档提纲
内容分组
  • p
    段落是主题接近的若干句子组成等文本块,如果段落没有特指,考虑使用p
  • ol/ul/li
    需要注意,列表有序和无序在默认表现下不同,ol内的li可以设置value代表该列表项的序号值
  • dl/dt/dd
    MDN对此元素的定义是:一个包含术语定义以及描述的列表,通常用于展示词汇表或者元数据 (键-值对列表)。
    因此最好能够使用在能够体现键值对的情况
  • figure&figcaption
    figure元素是比较独立的,被主要引用的图片、插图、照片代码等,一般会有一个标题,即figcaption
  • div
    最常用也是最滥用的元素,其本身无语义,可以和类名、id、title等结合,但是是最后考虑的选择。
    尤其是涉及dom操作时,通过类名选择div需要遍历整个页面所有的div,性能上也会大量损耗
文本
  • em/strong
    一般表示侧重点的强调,会因嵌套层数改变强调级别,一般渲染为斜体
  • i
    可作为画外音等等杂项,建议与class、lang一同使用
  • small
    不止作为小字使用,可以作为注意或声明使用
  • cite
    作为引述的作品标题、文章论文等标题
  • mark
    不常用,但可以作为与用户当前的行为相关的内容,如高亮显示搜索关键词
嵌入内容
  • img
    img要注意src和alt的使用,其中:
    • 有 src 且 alt 为空字符串,代表装饰用图
    • 有 src 且 alt 为非空字符串,图为文档内容的一部分
    • 有 src 且无 alt,图为内容一部分但无等价的文本内容可用