HTML5的革新－語意化標籤

一、語意化標籤的實戰意義

我先收集到一些觀點，大家姑且先聽上一聽， 
有人說： 
「沒必要考慮語義化，只要我寫的程式碼瀏覽器運作後沒問題就行，反正領導根本不關心這些」 
「語意化是w3c推廣的，我很想語意化我的程式碼，但總是用不明白」 
「這個不好說，語意化再好有啥用，關鍵是有好的項目，客戶才是金主！ ，也聽一聽工程師、設計師、還有專案管理人員，他們是怎麼看「語意化」這件事的
Php工程師：「無所謂什麼語義化，只要邏輯正確，不影響我循環數據」 

專案管理人員：

「我更重視在最短的時間，實現我的需求，至於語義化不是我們關心的，只要別耽誤專案時間，你們怎麼優化都行」 

設計師：「什麼是語意化？自己的立場上（一個頁面重構人員），基於這些現實條件，我們要如何權衡，語意化和現實工作之間的關係？我們該怎麼做呢？
先解釋幾個名詞，我們再來討論在實際工作中如何處理這些問題。
先解釋什麼是語意化？
　　根據內容的結構化（內容語義化），選擇合適的標籤（程式碼語義化）便於開發者閱讀和寫出更優雅的程式碼​​的同時讓瀏覽器的爬蟲和機器很好地解析。

二、語意化存在的意義

為了在沒有CSS的情況下，頁面也能呈現出很好地內容結構、程式碼結構:

為了裸奔時好看；

：例如title、alt用來解釋名詞或解釋圖片資訊、label標籤的活用；

• 有利於SEO：和搜尋引擎建立良好溝通，有助於爬蟲抓取更多的有效資訊：爬蟲依賴於標籤來決定上下文和各個關鍵字的權重；

• 方便其他裝置解析（如螢幕閱讀器、盲人閱讀器、行動裝置）以意義的方式來渲染網頁；

• 於團隊開發與維護

  ，語意化更具可讀性，是下一步吧網頁的重要動向，遵循W3C標準的團隊都遵循

事實上SEO最有效的一種辦法，就是對網頁的HTML結構進行重構，實質上就是語意化。 」

三html5 語義化標籤

在HTML 5出來之前，我們用p來表示頁章節，但是這些pp和class形容這塊內容的意義）。就是我們平常說的「語意」。 ，如上圖那個頁面結構沒有一個p，都是採用html5語意標籤（用哪些標籤，關鍵取決於你的設計目標）。事與願違。 所以有些地方還是要用p的，就是因為p沒有任何意義的元素，他只是一個標籤，僅僅是用來構建外觀和結構。這些語意標籤，不可能完全符合我們有時的設計目標，就像製定出來的法律不可能流傳100年都不改變，更何況它才制定沒多久，不可能這些語意標籤對所以設計目標的適應。一定程度上的“通用”，我們的目標是讓爬蟲讀懂重要的東西就夠了。有作用的。標籤和使用總結。

header元素

header 元素代表「網頁」或「section」的頁首。
通常包含h1-h6元素或hgroup，作為整個頁面或一個內容區塊的標題。也可以包裹一節的目錄部分，一個搜尋框，一個nav，或任何相關logo。

整個頁面沒有限制header元素的個數，可以擁有多個，可以為每個內容區塊增加一個header元素

<header>
    <hgroup>
        <h1 id="网站标题">网站标题</h1>
        <h1 id="网站副标题">网站副标题</h1>
    </hgroup></header>

header的範例程式碼

可以是「網頁」或任意「section」的頭部部分；

• 沒有個數限制。

• 如果hgroup或h1-h6自己就能工作的很好，那就不要用header。

• footer元素

footer元素代表「網頁」或「section」的頁腳，通常含有該節的一些基本信息，譬如：作者，相關文檔，版權。如果

footer

元素包含了整個節，那麼它們就代表附錄，索引，提拔，許可協議，標籤，類別等一些其他類似資訊。 <pre class='brush:php;toolbar:false;'>&lt;footer&gt; COPYRIGHT@小北&lt;/footer&gt;</pre>footer的範例程式碼

footer使用注意：

可以是「網頁」或任意數量」的底部或任意數量；除了包裹的內容不一樣，其他跟header類似。

• hgroup元素

• hgroup元素代表「網頁」或「section」的標題，當元素有多個層級時，該元素可以將

  h116到其
h1內，譬如文章的主標題和副標題的組合

<hgroup>
    <h1 id="这是一篇介绍HTML-nbsp-语义化标签和更简洁的结构">这是一篇介绍HTML 5语义化标签和更简洁的结构</h1>
    <h2 id="HTML-nbsp">HTML 5</h2></hgroup>

hgroup

範例程式碼hgroup使用注意：<ul style="padding:0px; margin:0px; line-height:2em" class=" list-paddingleft-2"> <li><p><span style="font-family:Microsoft YaHei; font-size:14px">如果只需要一个h1-h6标签就不用hgroup</span></p></li> <li><p><span style="font-family:Microsoft YaHei; font-size:14px">如果有连续多个h1-h6标签就用hgroup</span></p></li> <li><p><span style="font-family:Microsoft YaHei; font-size:14px">如果有连续多个标题和其他文章数据，h1-h6标签就用hgroup包住，和其他文章元数据一起放入header标签</span></p></li> </ul> <h2 id="span-style-font-family-Microsoft-YaHei-font-size-px-nav元素-span"><span style="font-family:Microsoft YaHei; font-size:14px">nav元素</span></h2> <p style="margin-top:0px; margin-bottom:0.5em"><span style="font-family:Microsoft YaHei; font-size:14px"><code style="border:1px solid rgb(225,225,232); color:rgb(221,17,68); margin:0px 0.5em; padding:2px 4px; background-color:rgb(249,249,249)">nav元素代表页面的导航链接区域。用于定义页面的主要导航部分。

<nav>
    <ul>
        <li>HTML 5</li>
        <li>CSS3</li>
        <li>JavaScript</li>
    </ul></nav>

nav实例

但是我在有些时候却情不自禁的想用它，譬如：侧边栏上目录，面包屑导航，搜索样式，或者下一篇上一篇文章，但是事实上规范上说nav只能用在页面主要导航部分上。页脚区域中的链接列表，虽然指向不同网站的不同区域，譬如服务条款，版权页等，这些footer元素就能够用了。

nav使用注意：

• 用在整个页面主要导航部分上，不合适就不要用nav元素；

aside元素

aside元素被包含在article元素中作为主要内容的附属信息部分，其中的内容可以是与当前文章有关的相关资料、标签、名次解释等。（特殊的section）

在article元素之外使用作为页面或站点全局的附属信息部分。最典型的是侧边栏，其中的内容可以是日志串连，其他组的导航，甚至广告，这些内容相关的页面。

<article>
    <p>内容</p>
    <aside>
        <h1 id="作者简介">作者简介</h1>
        <p>小北，前端一枚</p>
    </aside></article>

aside实例

aside使用总结：

• aside在article内表示主要内容的附属信息，

• 在article之外则可做侧边栏，没有article与之对应，最好不用。

• 如果是广告，其他日志链接或者其他分类导航也可以用

section元素

section元素代表文档中的“节”或“段”，“段”可以是指一篇文章里按照主题的分段；“节”可以是指一个页面里的分组。

section通常还带标题，虽然html5中section会自动给标题h1-h6降级，但是最好手动给他们降级。如下：

<section>
    <h1 id="section是啥">section是啥？</h1>
    <article>
        <h2>关于section</h1>
        <p>section的介绍</p>
        <section>
            <h3 id="关于其他">关于其他</h3>
            <p>关于其他section的介绍</p>
        </section>
    </article></section>

section示例代码

section使用注意：

一张页面可以用section划分为简介、文章条目和联系信息。不过在文章内页，最好用article。section不是一般意义上的容器元素，如果想作为样式展示和脚本的便利，可以用p。

• 表示文档中的节或者段；

• article、nav、aside可以理解为特殊的section，所以如果可以用article、nav、aside就不要用section，没实际意义的就用p

article元素

article元素最容易跟section和p容易混淆，其实article代表一个在文档，页面或者网站中自成一体的内容，其目的是为了让开发者独立开发或重用。譬如论坛的帖子，博客上的文章，一篇用户的评论，一个互动的widget小工具。（特殊的section）

除了它的内容，article会有一个标题（通常会在header里），会有一个footer页脚。我们举几个例子介绍一下article，好更好区分article、section、p

<article>
    <h1 id="一篇文章">一篇文章</h1>
    <p>文章内容..</p>
    <footer>
        <p><small>版权：html5jscss网所属，作者：小北</small></p>
    </footer></article>

一篇简单文章的article示例代码

上例是最好简单的article标签使用情况，如果在article内部再嵌套article，那就代表内嵌的article是与它外部的内容有关联的，如博客文章下面的评论，如下：

<article>

    <header>
        <h1 id="一篇文章">一篇文章</h1>
        <p><time pubdate datetime="2012-10-03">2012/10/03</time></p>
    </header>

    <p>文章内容..</p>

    <article>
        <h2 id="评论">评论</h2>

        <article>
            <header>
                <h3 id="评论者-nbsp-XXX">评论者: XXX</h3>
                <p><time pubdate datetime="2012-10-03T19:10-08:00">~1 hour ago</time></p>
            </header>
            <p>哈哈哈</p>
        </article>

        <article>
            <header>
                <h3 id="评论者-nbsp-XXX">评论者: XXX</h3>
                <p><time pubdate datetime="2012-10-03T19:10-08:00">~1 hour ago</time></p>
            </header>
            <p>哈？哈？哈？</p>
        </article>

    </article></article>

文章里的评论，一个article嵌套article来表示的实例

article内部嵌套article，有可能是评论或其他跟文章有关联的内容。那article内部嵌套section一般是什么情况呢。如下：

<article>

    <h1 id="前端技术">前端技术</h1>
    <p>前端技术有那些</p>

    <section>
        <h2 id="CSS">CSS</h2>
        <p>样式..</p>
    </section>

    <section>
        <h2 id="JS">JS</h2>
        <p>脚本</p>
    </section></article>

文章里的章节，一个article里的section实例

因为文章内section部分虽然也是独立的部分，但是它门只能算是组成整体的一部分，从属关系，article是大主体，section是构成这个大主体的一部分。本网站的全部文章都是article嵌套一个个section章节，这样能让浏览器更容易区分各个章节所包括的内容。

那section内部嵌套article又有哪些情况呢，如下

<section>
    
    <h1 id="介绍-nbsp-网站制作成员配备">介绍: 网站制作成员配备</h1>

    <article>
        <h2 id="设计师">设计师</h2>
        <p>设计网页的...</p>
    </article>

    <article>
        <h2 id="程序员">程序员</h2>
        <p>后台写程序的..</p>
    </article>

    <article>
        <h2 id="前端工程师">前端工程师</h2>
        <p>给楼上两位打杂的..</p>
    </article></section>

一个section里的article实例

設計師、程式設計師、前端工程師都是一個獨立的整體，他們組成了網站製作基本配備，當然還有其他成員~~。設計師、程式設計師、前端工程師就像article，是一個獨立的整體，而section將這些自成一體的article包裹，就組成了一個團體。

article和section和例子就例舉這麼多了，具體情況具體分析，不易深究。漏了pd，其實p就是只是想用來把元素組合或是為它們加樣式時使用。

article使用注意：

• 自身獨立的情況下：用article

• 語是相關內容：用article

• HTML5其他結構元素標籤

HTML5節元素標籤包括body article nav aside section header footer hgroup 

，還有

h1-h6 address。

address
• 代表區塊容器，必須是作為聯絡資訊出現，郵編地址、郵件地址等等,一般出現在footer。

h1-h6
• 因為hgroup，section和article的出現，h1-h6定義也發生了變化，允許一張頁出現多個h1。

四、還有一些細節要注意

1、title與h1的區別

（ 1）H1是大標題的意思。一般出現網頁文章頁面，作用如同一張報紙的大標題，使用讀者在沒看內容之前就大概了解本文的旨意，它是直接給用戶看的。而且在SEO中，搜尋引擎也非常重視H1，目的是告訴搜尋引擎，這

地方的內容很重要,H1要求貼近文章內容，突出主題，言簡意賅。

（2）title是用來面對的是搜尋引擎和用戶，其範圍相對於H1來說要廣，title中可以包含H1，在搜尋引擎中
tiele的權重要高於H1;一般來講，H1做到突出主題目，title修飾主題關鍵字。

2. H1與title之間的聯繫

  A.從網站角度而言，title則重於網站資訊標題,突出網站標題或關鍵字用title,一篇文章，一個頁面最好只
用一個H1，H1用得太多，會稀釋主題;一個網站可以有多個title，最好一個單頁用一個title以便突出網站頁面主題信息。
B.從文章角度而言，H1則概括的是文章主題,突出文章主題，用H1，面對的用戶，要突出其視覺效果。
從SEO角度看，title的權重高於H1，其適用性比H1廣。

一個好網站是：H1與title並存，既突出H1文章主題，又突出網站主題和關鍵字。達到雙重優化網站的效果。

3. b與strong的區別，i與em的網頁字體的作用；b

標籤是一個實體標籤，它所包含的字元將被設為blod粗體，是html語言中的；---視覺化

strong 標籤是一個邏輯標籤，作用是為了加強語氣而加粗字體，是xhtml中的，其強調作用，可以用css標簽控制strong強調的方式。 ----語意化標籤
在符合w3c的標準，建議使用strong標籤---語意化

在預設的html樣式中和,和的樣式一樣。不過從語意上來講和是表現元素，僅僅改變外觀,

和分別意味著行為的強調和加重強調，在搜尋引擎中更受重視,一些語音閱讀器也會根據它在閱讀時加強語氣。

另外所有的表現元素其實都是不建議使用的，應該用css來代替

4.em和strong,ib.

还是贴一篇玉伯的文章吧,阐述很详细:http://www.php.cn/
首先,em和i在现在的浏览器上表现为斜体,strong和b表现为粗体,但是因为斜体的字体会导致锯齿,所以一般都不太用em.但是按照语义化来 说,应该适当使用em,样式可以用css来控制,而且不敢确保以后的浏览器会将em渲染成什么效果,这也是为什么不能依赖标签本身的表现来使用标签的原 因,说不定ie9突然觉得em渲染成灰色的粗体更好一点,然后改了渲染方式,应该用标签来表示结构,而不是样式.

在语意上,em表示对内容的强调,strong也表示强调,但是强调的程度更重一些.玉伯文章里也说了在html5里,em表示局部强 调,strong表示全局强调.我的理解就是,em表示你在看到这个网页的时候你不必注意em里的内容,而是在深入阅读的时候通过em的强调来理解内容的 含义,而strong则表示你一眼看去就知道了内容的重点,例如用在每篇文章的第一句话里.这也就是个局部和全局的概念吧.

玉伯文章里还提到:em 表示内容的着重点（stress emphasis），strong 表示内容的重要性（strong importance).这个理解起来其实也就是局部和全局的概念,可以自己去体会.

i和b标签前一阵传言即将被抛弃,不推荐使用,很多人用它来表示单纯的样式,当成一个非语义化的标签,但是在html5中他们被赋予了语意,b 元素现在描述为在普通文章中仅从文体上突出的不包含任何额外的重要性的一段文本。例如：文档概要中的关键字，评论中的产品名。或者代表强调的排版方式。i 元素现在描述为在普通文章中突出不同意见或语气或其他的一段文本，例如：一个分类名称，一个技术术语，一个外语中的谚语，一个想法等。或者代表斜体的排版 方式.

有一点要注意,按照理论,应该更多地应用em标签来表示着重,因为按常理,要着重加着重强调的总是比着重一次的几率少很多,所以strong只应该 用在需要的地方,不能够乱用.

五、如何让旧浏览器支持HTML5新增标签

<span style="font-size:14px;"><!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>让旧浏览器支持HTML5新增标签-独行冰海</title>
</head>
<body>
    <header>顶部内容</header>
    <nav>导航内容</nav>
    <article>文章内容</article>
    <footer>底部内容</footer>
</body>
</html></span>

Google等新浏览器中的表现：

旧版浏览器：

其实，让旧浏览器支持HTML5新增标签，听上去很难，操作起来很简单，只需要你懂DOM操作就足够了。

首先我们使用js进行标签的创建，为HTML文件创建我们需要的这几个HTML5标签。

<script>
    document.createElement(&#39;header&#39;);
    document.createElement(&#39;nav&#39;);
    document.createElement(&#39;article&#39;);
    document.createElement(&#39;footer&#39;);
</script>

接下来，我们需要使用css进行这几个HTML5标签的样式控制。这是因为，通过这种方法创建的新标签，默认是行内元素。因此需要添加如下代码：

<style>
    article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary{
     display: block;
    }
</style>

对于代码位置，我们需要注意，要将script标签放置到head中，而不是body的后面，这是因为，浏览器从上到下进行代码的执行与解析，在已经渲染之后再执行js就没有任何意义和价值了。

 以上就是HTML5的革新——语义化标签的内容，更多相关内容请关注PHP中文网（www.php.cn）！