HTML语义：如何运用语义类标签来呈现Wiki网页？

Jan 24, 2019

HTML语义：如何运用语义类标签来呈现Wiki网页？-极客时间



下载APP





关闭

讲堂部落提薪训练营云原生训练营架构实战营企业版极客商城兑换中心 App下载浏览器插件

渠道合作

推荐作者

HTML语义：如何运用语义类标签来呈现Wiki网页？

2019-01-24 winter 来自北京

《重学前端》

课程介绍



讲述：winter

时长15:27大小14.12M



你好，我是 winter，今天我们继续来聊聊 HTML 模块的语义类标签。
在上一篇文章中，我花了大量的篇幅和你解释了正确使用语义类标签的好处和一些场景。那么，哪些场景适合用到语义类标签呢，又如何运用语义类标签呢？
不知道你还记不记得在大学时代，你被导师逼着改毕业论文格式的情景，如果你回想一下，你在论文中使用的那些格式，你会发现其实它们都是可以用 HTML 里的语义标签来表示的。
这正是因为 HTML 最初的设计场景就是“超文本”，早期 HTML 工作组的专家都是出版界书籍排版的专家。
所以，在这一部分，我们找了个跟论文很像的案例：Wikipedia 文章，这种跟论文相似的网站比较适合用来学习语义类标签。通过分析一篇 Wiki 的文章用到的语义类标签，来进一步帮你理解语义的概念。
你可以在电脑上，打开这个页面：
https://en.wikipedia.org/wiki/World_Wide_Web
为了防止这个页面被修改，我们保存了一个副本：
http://static001.geekbang.org/static/time/quote/World_Wide_Web-Wikipedia.html
这是一篇我们选择的 Wiki 文章，虽然在原本的 Wikipedia 网站中，也是大量使用了 div 和 span 来完成功能。在这里，我们来尝试分析一下，应该如何用语义类标签来呈现这样的一个页面 / 文章。
我们看一下这个页面。
aside
首先我们来看下，左侧侧边栏，根据上一篇文章中提到的语义定义，这里属于 aside 内容。是导航性质的工具内容。
article
我们来到文章主体部分，因为主体部分具有明确的独立性，所以可以用 article 来包裹。
hgroup, h1, h2
在语义的上一篇文章中，我们介绍过 hgroup 和 h1-h6 的作用，hgroup 是标题组，h1 是一级标题，h2 是二级标题。这里，World Wide Web 是文章的大标题，适合 h1 元素。
接下来出现了一个副标题。From Wikipedia, the free encyclopedia。这个地方适合使用 h2，跟 h1 组成一个 hgroup，所以代码可能是类似这样的:
<hgroup>
<h1>World Wide Web </h1>
<h2>From Wikipedia, the free encyclopedia</h2>
</hgroup>
abbr
abbr 标签表示缩写。考虑到 WWW 是 World Wide Web 的缩写，所以文中所有出现的 WWW，都应该使用 abbr 标签。
<abbr title="World Wide Web">WWW</abbr>.
hr
细心的同学会发现，在 Wiki 的界面中，出现了一条很长的横线，大家都知道 hr 标签表示横向分隔线，那么这个地方是不是应该用 hr 呢？
答案是不用。我们读一下标准的定义就知道了，hr 表示故事走向的转变或者话题的转变，显然此处两个标题并非这种关系，所以我们应该使用 CSS 的 border 来把它当作纯视觉效果来实现，所以这里是不需要用 hr 的。
p
接下来一段，我们看到了三段“note”，也就是注记。它在文章中用作额外注释。
“WWW” and “The Web” redirect here. For other uses of WWW, see WWW (disambiguation). For other uses of web, see Web (disambiguation).
For the first web software, see WorldWideWeb.
Not to be confused with the Internet.
HTML 中并没有 note 相关的语义，所以，我们用普通的 p 标签，加上class="note"来实现。后面的多数自然段都是普通的段落，我们用 p 标签来实现。
strong
注意，这里 “World Wide Web (WWW)” 和 “the Web” 使用了黑体呈现，从上下文来看，这里表示这个词很重要，所以我们使用 strong 标签。
<p> 
A global map of the web index for countries in 2014
<strong>The World Wide Web (WWW)</strong>, also called <strong>the Web</strong>,
......
blockquote, q, cite
接下来我们看到了一个论文中很常见的用法“引述”。
interlinked by hypertext links, and accessible via the Internet.[1]
注意看这里的[1]，当我们把鼠标放上去的时候，出现了引述的相关信息：
“What is the difference between the Web and the Internet?”. W3C Help and FAQ. W3C. 2009. Archived from the original on 9 July 2015. Retrieved 16 July 2015.
在 HTML 中，有三个跟引述相关的标签 blockquote 表示段落级引述内容，q 表示行内的引述内容，cite 表示引述的作品名。
这里的作品名称 “What is the difference between the Web and the Internet?”，应当使用 cite 标签。
<cite>"What is the difference between the Web and the Internet?"</cite>. W3C Help and FAQ. W3C. 2009. Archived from the original on 9 July 2015. Retrieved 16 July 2015.
在文章的结尾处，有对应的 References 一节，这一节中所有的作品名称也应该加入 cite 标签。
这里我们看看引用的原文就可以知道，Wiki 文章中的信息并非直接引用，如果是直接引用的内容，那么，我们还应该加上 blockquote 或者 q 标签。
time
这里除了引用的文章外，还出现了日期，为了让机器阅读更加方便，可以加上 time 标签：
<cite>"What is the difference between the Web and the Internet?"</cite>. W3C Help and FAQ. W3C. 2009. Archived from the original on <time datetime="2015-07-09">9 July 2015</time>. Retrieved <time datetime="2015-07-16">16 July 2015</time>.
figure, figcaption
我们注意一下文章的右侧，出现了几张图片，这种出现在文中的图片，不仅仅是一个 img 标签，它和下面的文字组成了一个 figure 的语法现象，figure 也是我们的一种标签（用于表示与主文章相关的图像、照片等流内容）。
<figure>
 <img src="https://.....440px-NeXTcube_first_webserver.JPG"/>
 <figcaption>The NeXT Computer used by Tim Berners-Lee at CERN.</figcaption>
</figure>
这种插入文章中的内容，不仅限图片，代码、表格等，只要是具有一定自包含性（类似独立句子）的内容，都可以用 figure。这里面，我们用 figcaption 表示内容的标题，当然，也可以没有标题。
dfn
然后我们继续往下看，来注意这一句：
The terms Internet and World Wide Web are often used without much distinction. However, the two are not the same. The Internet is a global system of interconnected computer networks. In contrast, the World Wide Web is a global collection of documents and other resources, linked by hyperlinks and URIs.
这里分别定义了 Internet 和 World Wide Web，我们应该使用 dfn 标签。
The terms Internet and World Wide Web are often used without much distinction. However, the two are not the same. 
The <dfn>Internet</dfn> is a global system of interconnected computer networks.
In contrast, the <dfn>World Wide Web</dfn> is a global collection of documents and other resources, linked by hyperlinks and URIs. 
代码中你可以看见，你需要在你要定义的词前后放上 dfn 标签，所以我们知道了，dfn 标签是用来包裹被定义的名词。
nav, ol, ul
接下来，几个普通的段落之后，我们看到了文章的目录。这里的目录链接到文章的各个章节，我们可以使用 nav 标签。因为这里的目录顺序不可随意变化，所以我们这里使用多级的 ol 结构。
<nav>
  <h2>Contents</h2>
  <ol>
    <li><a href="...">History</a></li>
    <li><a href="...">Function</a>
      <ol>
        <li><a href="...">Linking</a></li>
        <li><a href="...">Dynamic updates of web pages</a></li>
        ...
      </ol>
    </li>
    ...
  </ol>
</nav>
我们这里必须要指出，ol 和 ul 的区分是内容是否有顺序关系，每一项的前面不论是数字还是点，都不会影响语义的判断。所以，你可以注意一下这里，不要因为视觉表现效果，而改变语义的使用。
pre, samp, code
继续往下，我们来到了这里，我们看见这篇文章有一个很重要的特色，文章中嵌入了一些代码和一些预先编写好的段落。我们看到在“Function”小节中有一段背景色是灰色的文字。
GET /home.html HTTP/1.1
Host: www.example.org
这是一段 HTTP 协议的内容描述，因为这段内容的换行是非常严格的，所以我们不需要浏览器帮我们做自动换行，因此我们使用了 pre 标签，表示这部分内容是预先排版过的，不需要浏览器进行排版。
又因为这是一段计算机程序的示例输出，所以我们可以使用 samp 标签：
<pre><samp>
GET /home.html HTTP/1.1
Host: www.example.org
</samp></pre>
接下来 Wiki 中的内容出现了一段 HTML 代码，我们同样不希望浏览器做自动换行。
<html>
  <head>
    <title>Example.org – The World Wide Web</title>
  </head>
  <body>
    <p>The World Wide Web, abbreviated as WWW and commonly known ...</p>
  </body>
</html>
因为同时是代码，我们还需要加上 code 标签。最后的代码是 pre 标签包裹了 code 标签，code 标签包裹了 HTML 代码。
<pre><code>
&lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;Example.org – The World Wide Web&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;p&gt;The World Wide Web, abbreviated as WWW and commonly known ...&lt;/p&gt;
  &lt;/body&gt;
&lt;/html&gt;
</code></pre>
在后面的代码中，还有一些在行内的 code，比如 title 和 p 括起来的内容，这些也都应该使用 code 标签。
总结在这一篇 Wiki 文章中，已经涉及了大部分语义标签，可见 HTML 工作组对语义标签的增加是非常谨慎和保守的。
当然了，我们选择的案例不可能刚巧覆盖所有的标签，还有些没讲到的标签，我们这里稍微做一下简要的补充说明。
（长按点击大图查看）
实际上，HTML 这种语言，并不像严谨的编程语言一样，有一条非此即彼的线。一些语义的使用其实会带来争议，所以我的建议是：你可以尽量只用自己熟悉的语义标签，并且只在有把握的场景引入语义标签。这样，我们才能保证语义标签不被滥用，造成更多的问题。
你最擅长使用哪些语义标签，会把它们用在哪些场景里呢？欢迎留言告诉我，我们一起讨论。
猜你喜欢

分享给需要的人，Ta购买本课程，你将得18元

生成海报并分享

赞 8

提建议

HTML语义：div和span不是够用了吗？

CSS语法：除了属性和选择器，你还需要知道这些带@的规则

 写留言

精选留言(122)

米斯特菠萝
2019-01-24
就擅长div span a标签😂
共 2 条评论
182
鱼膩
2019-01-26
进入wiki点开控制台，发现很多地方wiki本身并没有严格地按照win大说的来，大部分也是did, span一把梭，有顺序的nav直接用的ul, 文中说的code, sample这些也都没有用。。是不是可以理解成其实很多时候我们为了实现样式的完全控制，降低了对HTML本身语义化的要求；或者说在大部分条件下，快速还原设计稿比语义化本身更重要
73
咖飞的白
2019-01-24
看懂之后，果断敲出一个wiki页面来，才是最好得学习。
62
CC
2019-01-24
由于项目的关系，大部分时候是制作品牌网站和软件界面的场景，因此我最擅长的语义标签是「作为整体结构」的语义类标签。在这两个场景中，一般不会有大段的阅读文字（即使是 FAQ，也避免大段文字，毕竟没人喜欢读字）。深度了解语义类标签使用的一个技巧，就是去了解爬虫是如何理解自己的网站，从而逆向理解标签是否使用得当。这篇文章最大的收获，就是认识到自己对「自然语言延伸」和「标题摘要」的语义类标签理解不足。比如 pre 和 samp，让我有”居然是这样使用“的感觉。现在知道，如果遇到内容网站的场景（比如博客），我就应该复习一次「自然语言延伸」和「标题摘要」的语义类标签文档，确保正确使用。谢谢 winter 老师。
展开
43
wangzy
2019-10-23
语义化标签的一些点可能会降低开发者的使用欲望 1.有些标签可能还不知道就已经过时了 2.很多语义标签自带样式，而这些样式我们并不需要，所以还要先取消默认样式。 3.现代网页已经不再是按照书籍排版的结构来的，很多页面元素并不容易明确应该使用哪个语义标签。
作者回复: 对，你讲的这三点都很准，跟我的感受很接近。尤其是3，我觉得至少有一半内容不知道用啥标签好。
40
Yancey
2019-03-12
维基百科毕竟太老，div span一把梭也很正常，看一下苹果的页面，你就会很有收获
共 3 条评论
29
木子烁束岸
2019-01-25
简历上写精通html的，脸疼了
27
段先森
2019-01-24
瑟瑟发抖
18
张张张小烦
2019-01-24
只想说，好多标签都没见过，更别说用过，惭愧惭愧
14
润曦
2019-03-19
这里的 hgroup标签需要说明一下，早期在HTML5规格尚未发布正式版的时候，当时是有hgroup标签的，但HTML5工作小组在2013年4月2日的一次会议结论中决定从规格中移除hgroup元素，因此请大家不要再用这个hgroup元素。我在使用angular的时候，用hgroup无法正常执行的，要执行需要加入NO_ERRORS_SCHEMA到ngModule的schemas中
共 3 条评论
13
鱼竿
2019-02-18
涨知识了，虽然在开发中最常用到的还是div和span，但是换一种思路，了解了语义的概念之后，麻麻再也不用担心我的classname造不出名字了，将这些语义化的表达方式融入到样式的命名中，也是提高代码可读性的方法吧感谢win大
12
金子菇凉的铁粉小逗
2019-01-24
微信小程序的wiki适配性很好，能简单说一下怎么实现的吗？
11
叫我大胖就好了
2019-01-24
我听哭了，感觉自己啥也不会了
10
Sylvia
2019-02-09
不求多，只求精，除了上一篇的标签，此篇文章的abbr pre code figcaption site time dfn，我能说这些标签我几年前就用过，但后来见几乎没人用，也舍弃了，有些东西还是需要多坚持呀∑(´△｀)？！
9
反面典型
2019-01-25
曾经做过whatwg文档的中文翻译工作，那里面的语义化在我看来是做到了极致
9
小M
2019-01-24
果真需要重学前端
7
五线青年水煮饺
2019-01-24
我只会div套div。还在努力学习。
7
mfist
2019-01-24
1通过wiki的例子发现真实的网页中还是有使用语义化的，之前以为现实应用中很少。 2看来有必要优化下我们网页的布局模板了。 3hr标签语义是话题的转向，学习了。之前以为就是一条横线，学习了。
6
我叫张小咩²⁰¹⁹
2019-02-10
学语义，上wiki😂 读到这，暂时把语义化标签分两类：结构类 header footer …… 文本标记类 em b q s u …… 之后把所有的标准读完，总结成自己的知识，可以用逻辑推理出来的知识脉络。
展开
5
小动物很困
2019-01-28
1.标题+列表 dl>dt>dd 2.普通列表 ul/ol >li 3.header section footer nav等整体布局语义 4.div+span大法别的不会了....
5

