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

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

你就會看到如下的界面：

原網(wǎng)頁呈現(xiàn)

現(xiàn)在嘗試分析一下伸眶，用語義類標簽去呈現(xiàn)這個網(wǎng)頁铣鹏，開始劃分

語義化之后1

語義化之后2

語義化之后3

aside：左側(cè)側(cè)邊欄敷扫，是導(dǎo)航性質(zhì)的工具內(nèi)容

article：文章主體部分，因為主體部分具體明確的獨立性

hgroup诚卸，h1葵第，h2：hgroup是標題組，h1和h2是對于的一二級標題合溺，代碼如下：

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

abbr：表示縮寫
hr：表示故事走向的轉(zhuǎn)變或話題的轉(zhuǎn)變卒密。但是此處顯然不是這種關(guān)系，所有用hr不恰當棠赛，應(yīng)該使用CSS的border將它實現(xiàn)
p：普通的段落哮奇，用p標簽實現(xiàn)
strong：從上下文看這些詞都很重要，因此黑體呈現(xiàn)睛约，代碼如下：

<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表示段落級引述的內(nèi)容而芥，q表示行內(nèi)引述的內(nèi)容，cite表示引述的作品名膀值；
這里的作品名稱"World Wide Web Timeline?"棍丐，應(yīng)當用cite標簽；
在文章的結(jié)尾處References一節(jié)中沧踏，所有的作品名稱也應(yīng)當加入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：除了引用文章歌逢，還出現(xiàn)了日期，為了機器閱讀更加方便翘狱，應(yīng)當加入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：這種出現(xiàn)在文中的圖片，不僅僅是一個img標簽阱高，它和下面的文字組成了一個figure的語法現(xiàn)象赚导，figure用于表示與主文章相關(guān)的圖像、照片等流內(nèi)容

<figure>
   <img src="https://.....440px-NeXTcube_first_webserver.JPG"/>
   <figcaption>The NeXT Computer used by Tim Berners-Lee at CERN.</figcaption>
</figure>

這種插入文章中的內(nèi)容赤惊，不僅限圖片吼旧、代碼、表格等未舟，只有具有一定包含性（類似獨立句子）的內(nèi)容圈暗，都可以用figure≡０颍可以用figcaption表示內(nèi)容的標題员串，當然也可以沒有標題
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結(jié)構(gòu)抄谐；ol與ul的區(qū)分是內(nèi)容是否有順序關(guān)系访忿，每一項的前面不論是數(shù)字還是點，都不會影響語義的判斷斯稳。注意不要因為視覺的表現(xiàn)效果海铆，而改變語義的使用

<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 元素可定義預(yù)格式化的文本卧斟。被包圍在 pre 元素中的文本通常會保留空格和換行符。而文本也會呈現(xiàn)為等寬字體憎茂。<pre> 標簽的一個常見應(yīng)用就是用來表示計算機的源代碼珍语。
samp 標簽表示一段用戶應(yīng)該對其沒有什么其他解釋的文本字符。要從正常的上下文抽取這些字符時竖幔，通常要用到這個標簽板乙。

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

code 標簽用于表示計算機源代碼或者其他機器可以閱讀的文本內(nèi)容。

<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老師建議：你可以盡量只用自己熟悉的語義標簽拳氢，并且只在有把握的場景引入語義標簽募逞。這樣，我們才能保證語義標簽不被濫用馋评，造成更多的問題放接。