2.5 HTML 语义(Semantics)

HTML 是有含义的

语义指的是计算机语言定义的符号有其规范的含义,HTML中的标签、属性和属性值都有其约定的含义。

语义和默认样式有所不同,默认样式是浏览器设定的一些常用标签的表现形式,而语义化的主要目的不是显示, 而是能让大家直观的理解标记(markup)和属性(attribute)的用途和作用,比如Hx(h1,h2...)系列显然是标题, <strong>,<em>用来区别于其他文字,起到了强调的作用, <article>代表这是一段文章, <input type='email'/>代表的是邮件输入,等等。

有些元素具有通用的含义,比如段落(paragraphs)或列表(lists),有些元素则更具体,比如 <output>(计算输出),<progress>(任务进度)。

语义大体上可以分为三个层面,从上到下:结构、内容和局部说明。

结构化元素:用来组织页面

一个典型的网页通常包括:

  • <header> 页头,通常包含网站标识、口号和用户信息栏。
  • <nav> 页面菜单导航栏,网站主体频道页面的快捷链接。
  • <h1> 页面标题,对页面功能进行简要描述。
  • <article> 页面主体内容,如一篇博客。
  • <footer> 页脚,通常包含版权声明,国内特有的备案信息以及一些有用的快捷链接,如关于/联系/加入我们等等。

图文元素:定义和填充内容

主要有:

  • <p> 文章段落。
  • <ul> 无序列表(unordered list)。
  • <ol> 有序列表(ordered list)。
  • <li> 列表项(list item)。
  • <blockquote> 块引用。

内联元素:局部区别化内容

文章段落可能较长,需要对局部内容作特殊处理,比如段落首字母大写、下划线、删除线、引用、颜色突显、粗/斜体等等。

常用的有:

  • <strong> 重要 描述。
  • <em> 强调 用语。
  • <a> 链接(links),也叫锚点(anchor)。是对网站某资源的连接,可用于页面外部跳转和页面内部定位。
  • <small> 不那么重要的 描述。
  • <abbr> 缩写,比如 WWW
<article>
  <h1>文章标题</h1>
  <h2>文章子标题</h2>
  <p>
    一些内容描述, <em>这里强调一下</em> ,还有更 <strong>重要</strong> 的部分。
  </p>
  <p>
    另一段内容描述。
  </p>
  <h3>内容列表</h3>
  <ul>
    <li>第1章</li>
    <li>第2章</li>
    <li>第3章</li>
  </ul>
  <blockquote>
    Once said
  </blockquote>
</article>
<aside>
  <h3>边栏部分的评论列表</h3>
  <ul>
    <li><a href="#">评论1</a></li>
    <li><a href="#">评论2</a></li>
    <li><a href="#">评论3</a></li>
  </ul>
</aside>

通用元素

如果没有合适的语义元素用来表达你的内容,但出于分组或区别样式仍然需要添加一个HTML元素,那么你可以使用通用语义的元素如div和span:

  • <div> 用作通用块级元素
  • <span> 用作通用内联元素

尽管这些元素没有特定语义,但在使用CSS添加样式时仍然是有用的。

不要过度语义化

有将近100多个HTML元素可供选择: 100 semantic HTML elements。要从中挑选合适的元素来表述内容颇为麻烦。

过度追求语义化,使得页面语义结构过于繁杂,反而不易于维护,基本上,如果能使用好下面的这些元素就足够了。

结构化 图文内容 局部说明
header
h1
h2
h3
nav
footer
article
section
p
ul
ol
li
blockquote
a
strong
em
q
abbr
small