案例：wiki文章，PC端打开 https://en.wikipedia.org/wiki/World_Wide_Web

或者 http://static001.geekbang.org/static/time/quote/World_Wide_Web-Wikipedia.html

你就会看到如下的界面：

原网页呈现

现在尝试分析一下，用语义类标签去呈现这个网页，开始划分

语义化之后1

语义化之后2

语义化之后3

aside：左侧侧边栏，是导航性质的工具内容

article：文章主体部分，因为主体部分具体明确的独立性

hgroup，h1，h2：hgroup是标题组，h1和h2是对于的一二级标题，代码如下：

<hgroup>
    <h1>World Wide Web </h1>
    <h2>From Wikipedia, the free encyclopedia</h2>
</hgroup>

abbr：表示缩写
hr：表示故事走向的转变或话题的转变。但是此处显然不是这种关系，所有用hr不恰当，应该使用CSS的border将它实现
p：普通的段落，用p标签实现
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：表示“引述”的时候用这3个标签，blockquote表示段落级引述的内容，q表示行内引述的内容，cite表示引述的作品名；
这里的作品名称"World Wide Web Timeline?"，应当用cite标签；
在文章的结尾处References一节中，所有的作品名称也应当加入cite标签

<cite>"World Wide Web Timeline?"</cite>
. Pew Research Center. 11 March 2014. 
Archived from the original on 29 July 2015. Retrieved 1 August 2015.

time：除了引用文章，还出现了日期，为了机器阅读更加方便，应当加入time标签(为了方便观察标签，做了换行处理)

<cite>"World Wide Web Timeline?"</cite>
. Pew Research Center. 
<time datetime="2014-03-11">11 March 2014</time>
. Archived from the original on 29 July 2015. Retrieved 
<time datetime="2015-08-01">1 August 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：文中定义了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. 

nav，ol，ul：因为这里的目录顺序不可随便改变，所以使用多级的ol结构；ol与ul的区分是内容是否有顺序关系，每一项的前面不论是数字还是点，都不会影响语义的判断。注意不要因为视觉的表现效果，而改变语义的使用

<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>

pre，samp，code：
pre 元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。<pre> 标签的一个常见应用就是用来表示计算机的源代码。
samp 标签表示一段用户应该对其没有什么其他解释的文本字符。要从正常的上下文抽取这些字符时，通常要用到这个标签。

<pre><samp>
GET /home.html HTTP/1.1
Host: www.example.org
</samp></pre>

code 标签用于表示计算机源代码或者其他机器可以阅读的文本内容。

<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>

其他标签补充：

补充

最后winter老师建议：你可以尽量只用自己熟悉的语义标签，并且只在有把握的场景引入语义标签。这样，我们才能保证语义标签不被滥用，造成更多的问题。