web語義化，從鬆散到實戰

時間  2019-11-08
標籤 web 語義 鬆散 實戰 欄目 HTML 简体版
原文   原文鏈接

GitHub：http://liu12fei08fei.github.io/html/4semantic.htmlhtml

web語義化，從鬆散到實戰html5

在這篇文章以前，我放棄了不少次，寫關於語義化方面的文章；甚至在這篇文章以前我還刪除了一篇已經總結好的關於語義方面的blog之因此放棄和刪除是由於web語義實在是太廣大，太很差掌握了，每當下筆的時候總有種無從下手的感受，以爲什麼都重要，追求大而全，本身反而不知該如何總結是好只到我經歷了屢次的嘗試和深刻思考，總結出我真正想要的關於語義化方面的bloggit

我想要的語義化blog：github

  1. 這篇文章要讓我知道什麼是語義化？爲何要語義化？
  2. 語義化都有哪些重要的須要馬上了解的知識
  3. 怎麼處理html5語義化所帶來的兼容性
  4. 讀完這篇文章，甚至不用讀完；我就能夠進入實戰把它直接用到個人開發中去（語義化實戰）

目錄：web

  • web語義化，從鬆散到實戰
    • 什麼是web語義化？ 
    • 爲何要語義化？ 
    • 重要的語義元素
      • 內容分區（結構語義元素） 
      • 文本內容（側重文本結構方面） 
      • 內聯文本語義（側重文本修飾方面） 
    • HTML5語義化兼容 
    • 語義化實戰
      • 簡化版語義結構圖 
      • 最全面的語義結構理解圖 
    • 關於站點的標題結構
      • 一個頁面中能夠有多個一級標題嗎？這樣作到底好很差？ 

什麼是web語義化？瀏覽器

其實簡單說來就是讓機器能夠讀懂內容。網絡

HTML在剛開始設計出來的時候就是帶有必定的「語義」的，包括段落、表格、圖片、標題等等，但這些更多地只是方便瀏覽器等UA對它們做合適的處理。但逐漸地，機器也要藉助HTML提供的語義以及天然語言處理的手段來「讀懂」它們從網上獲取的HTML文檔，但它們沒法讀懂例如「紅色的文字」或者是深度嵌套的表格佈局中內容的含義，由於太多已有的內容都是專門爲了可視化的瀏覽器設計的。！ide

語義（Semantic）的概念：「語義能夠簡單地看做是數據所對應的現實世界中的事物所表明的概念的含義，以及這些含義之間的關 系，是數據在某個領域上的解釋和邏輯表示。」web語義化能夠簡單的理解爲：用特定的語言來定義特定的事物。佈局

爲何要語義化？字體

人能夠經過視覺的劃分判斷內容的語義,搜索引擎看到的只是代碼。搜索引擎只能經過標籤來判斷內容的語義。由於頁面的很大一部分流量是來自搜索引擎的，要使頁面儘量地對搜索引擎友好，因此就要儘量地使標籤語義化。

  1. 容易修改和維護：結構清晰，利於團隊的開發、維護，語義化更具可讀性，能夠減小差別化。
  2. 無障礙性：方便其餘設備解析（如屏幕閱讀器、盲人閱讀器、移動設備）以有意義的方式來渲染網頁
  3. 搜索引擎優化SEO：和搜索引擎創建良好溝通，有助於爬蟲抓取更多的有效信息：爬蟲依賴於標籤來肯定上下文和各個關鍵字的權重
  4. 代碼清晰透明，將來的功能：爲了在沒有CSS的狀況下，頁面也能呈現出很好地內容結構、代碼結構（爲了裸奔時好看）；更利於將來的一些功能擴展，好比頁面綱要插件等

SEO也就是Search Engine Optimization，搜索引擎優化指經過站內優化好比網站結構調整、網站內容建設、網站代碼優化等以及站外優化，好比網站站外推廣、網站品牌建設等，使網站知足搜索引擎收錄排名需求，在搜索引擎中提升關鍵詞排名，從而吸引精準用戶進入網站，得到免費流量，產生直接銷售或品牌推廣。

重要的語義元素

文檔元數據：元數據（Metadata）含有頁面的相關信息，包括樣式、腳本及數據，能幫助一些軟件 (如搜索引擎， 瀏覽器等等）更好地運用和渲染頁面。對於樣式和腳本的元數據，能夠直接在網頁裏定義，也能夠連接到包含相關信息的外部文件。

內容分區（結構語義元素）

內容分區元素容許你將文檔內容從邏輯上進行組織劃分。使用包括頁眉(header)、頁腳(footer)、導航(nav)和標題(h1~h6)等分區元素，來爲頁面內容建立明確的大綱，以便區分各個章節的內容。

元素（HTML標籤）

描述

<address>

爲頁面主信息元素提供聯繫信息，即地址信息，這個地址信息適合主信息有關的；和主內容無關的地址信息使用 <p>

<article>

表示文檔、頁面、應用或網站中的獨立結構，其意在成爲可獨立分配的或可複用的結構；獨立模塊用 <article> 進行包裹，而不是 <div>

<aside>

表示一個和其他頁面內容幾乎無關的部分，被認爲是獨立於該內容的一部分而且能夠被單獨的拆分出來而不會使總體受影響。其一般表現爲側邊欄或者嵌入內容。例如相關的廣告、筆者的傳記、web 應用程序、我的資料信息，或在博客上的相關連接

<footer>

表示最近一個章節內容或者根節點元素的頁腳。一個頁腳一般包含該章節做者、版權數據或者與文檔相關的連接等信息

<h1–h6>

標題元素擁有六個不一樣的級別，<h1> 是最高級的，而 <h6> 則是最低的級別；若是有一個普通的標題，它自己不包含任何特殊的內容，那使用帶編號的標題元素（即<h1-h6>）就能夠了，即 <h1>標題</h1>

<hgroup>

表示加強型的標題，若是標題除了主標題，還有一個副標題，那能夠把這兩個標題包裝在一個<hgroup>元素中，裏面只能包含標題元素（即<h1-h6>），不能有其它元素，即 <hgroup><h1>主標題</h1><h2>副標題</h2></hgroup>

<header>

表示加強型的標題，若是文章開頭的內容不少---除了主標題以外，還有其餘內容（如：內容摘要、發表日期、做者署名、圖片或小標題連接等），那就應該把它們都放在一個 <header> 元素中，即 <header><h1>主標題</h1><p>做者：神奇的HTML</p></header> 或者 <header><hgroup><h1>主標題</h1><h2>副標題</h2></hgroup><p>做者：神奇的HTML</p></header>

<nav>

描繪一個含有多個超連接的區域，這個區域包含轉到其餘頁面，或者頁面內部其餘部分的連接列表。<nav> 只用來將一些熱門的連接放入導航欄；不熱門的連接或不經常使用的連接應該放在 <footer> 中，一個網頁能夠有多個 <nav>

<section>

表示文檔中的一個區塊。若是元素內容能夠分爲幾個部分的話，應該使用 <article> 而不是 <section> ；區塊元素 <section> 是應該最後考慮的語義元素，若是有一個標題內容塊，而其餘語義元素都不合適，那麼選擇 <section> 一般比選擇 <div> 更好一些；<div> 通常做爲普通容器來使用，僅僅是爲了美化樣式的時候使用

文本內容（側重文本結構方面）

使用 HTML 文本內容元素來組織在開標籤 <body> 和閉標籤 </body> 裏的塊或章節的內容。這些元素能標識內容的宗旨或結構，而這對於 accessibility（無障礙網頁） 和 SEO（搜尋引擎最佳化） 很重要。

無障礙網頁：指在物理條件和技術條件限制下，保證網站達到最佳可用性的實踐搜尋引擎最佳化：是提升網站在搜索引擎的能見度之過程，又稱搜索排名改進

元素（HTML標籤）

描述

<dd>

用來指明一個描述列表 (<dl>) 元素中一個術語的描述。這個元素只能做爲描述列表元素的子元素出現，而且必須跟着一個 <dt> 元素，即：<dl><dt>計算機</dt><dd>計算的</dd><dt>顯示器</dt><dd>顯示信息的</dd></dl>

<dl>

是一個包含術語定義以及描述的列表，一般用於展現詞彙表或者元數據 (鍵-值對列表)，即展現術語和術語描述的列表

<dt>

用於在一個定義列表中聲明一個術語。該元素僅能做爲 <dl> 的子元素出現。一般在該元素後面會跟着 <dd> 元素， 然而，多個連續出現的 <dt> 元素都將由出如今它們後面的第一個 <dd> 元素定義

<div>

是一個通用型的流內容容器；通常做爲普通容器來使用，僅僅是爲了美化樣式的時候使用

<figcaption>

是與其相關聯的圖片的說明/標題（即圖題），用於描述其父節點 <figure> 元素裏的其餘數據；若是沒有該元素，這個父節點的圖片只是會沒有說明/標題；圖題中已經包含了對圖片的完整說明，因此 <img> 元素的alt屬性能夠刪除掉了，即：<figure><img src="xxx.jpg"><figcaption>圖片描述信息</figcaption></figure>

<figure>

表明一段獨立的內容，常常與說明 <figcaption> 配合使用, 而且做爲一個獨立的引用單元，常常是在主文中引用的圖片，插圖，表格，代碼段等等，當這部分轉移到附錄中或者其餘頁面時不會影響到主體

<hr>

表示段落級元素之間的主題轉換（例如，一個故事中的場景的改變，或一個章節的主題的改變）。在HTML的早期版本中，它是一個水平線。如今它仍能在可視化瀏覽器中表現爲水平線，但目前被定義爲語義上的，而不是表現層面上。

<li>

用於表示列表裏的條目。它必須被包含在一個父元素裏：一個有順序的列表(<ol>)，一個無順序的列表(<ul>)，或者一個菜單 (<menu>)

<main>

呈現了文檔 <body> 或應用的主體部分，是包含 <header> 和 <footer> 以外的主體部分；不包含任何在一系列文檔中重複的內容，好比：側邊欄，導航欄連接，版權信息，網站logo，搜索框（除非搜索框做爲文檔的主要功能）

<ol>

表示多個有序列表項，一般渲染爲有帶編號的列表

<ul>

表明多項的無序列表，即無數值排序項的集合，且它們在列表中的順序是沒有意義的

<p>

表示文本的一個段落。該元素一般表現爲一整塊與相鄰文本分離的文本，或以垂直的空白隔離或以首行縮進

<pre>

表示預約義格式文本。在該元素中的文本一般按照原文件中的編排，以等寬字體的形式展示出來，文本中的空白符（好比空格和換行符）都會顯示出來

內聯文本語義（側重文本修飾方面）

使用 HTML 內聯文本語義(Inline text semantics)定義語句，結構，能夠是一個詞，一段，或任意風格的文字。

這裏不會把全部的內斂標籤都寫一遍，只寫那些重要的

元素（HTML標籤）

描述

<b>

表示相對於普通文本字體上的區別，但不表示任何特殊的強調或者關聯。即：只是單純的把內容加粗顯示，不具備語義功能

<strong>

表示文本十分重要，通常用粗體顯示。即：文本加粗顯示，具備語義功能，表示內容十分重要

<i>

用於表現因某些緣由須要區分普通文本的一系列文本。即：只是單純的把內容斜體顯示，不具備語義功能

<em>

標記出須要用戶着重閱讀的內容， <em> 元素是能夠嵌套的，嵌套層次越深，則其包含的內容被認定爲越須要着重閱讀。即：文本斜體顯示，具備語義功能，表示內容須要重讀

<cite>

表示它所包含的文本對某個參考文獻的引用，好比書籍或者雜誌的標題。按照慣例，引用的文本將以斜體顯示。<cite> 標籤還有一個隱藏的功能：它可使你或者其餘人從文檔中自動摘錄參考書目。咱們能夠很容易地想象一個瀏覽器，它可以自動整理引用表格，並把它們做爲腳註或者獨立的文檔來顯示。<cite> 標籤的語義已經遠遠超過了改變它所包含的文本外觀的做用；它使瀏覽器可以以各類實用的方式來向用戶表達文檔的內容。

<blockquote>

定義塊引用、長引用，表明其中的文字是引用內容。在渲染時，這部分的內容會有必定的縮進。若引文來源於網絡，則能夠將原內容的出處 URL 地址設置到 cite 特性上（如：<blockquote cite="http://xxx.com"></blockquote>），若要以文本的形式告知讀者引文的出處時，能夠經過 <cite> 元素

<q>

定義短的引用，樣式方面內容兩邊會顯示出雙引號。 <q> 標籤在本質上與 <blockquote> 是同樣的。不一樣之處在於它們的顯示和應用。<q> 標籤用於簡短的行內引用。若是須要從周圍內容分離出來比較長的部分（一般顯示爲縮進的塊），請使用 <blockquote> 標籤

<code>

用於表示計算機源代碼或者其餘機器能夠閱讀的文本內容。只應該在表示計算機程序源代碼或者其餘機器能夠閱讀的文本內容上使用 標籤

<mark>

表明突出顯示的文字，默認內容的背景爲黃色。例如能夠爲了標記特定上下文中的文本而使用這個標籤. 舉個例子，它能夠用來顯示搜索引擎搜索後關鍵詞

<time>

定義日期或時間，或者二者。此元素意在以機器可讀的格式表示日期和時間。 有安排日程表功能的應用能夠利用這一點

HTML5語義化兼容

不認識HTML5語義元素的瀏覽器不知道應該把它們顯示爲塊級元素，因此極可能會把它們都擠到一塊兒。爲了解決這個問題，只要在樣式表中添加一條 「超級規則」 便可：

article, aside, figure, figcaption, footer, header, main, nav, section, summary{

    display:block;

}

然而上面的方法有本身的侷限性，由於一些瀏覽器（ie8及ie8如下）並不容許樣式化不支持的元素。這種情形出如今ie8及ie8之前的瀏覽器中，須要一個特殊腳本才行：

<!--[if lt IE 9]>

  <script>

    document.createElement("header" );

    document.createElement("footer" );

    document.createElement("section"); 

    document.createElement("aside"  );

    document.createElement("nav"    );

    document.createElement("article"); 

    document.createElement("hgroup" ); 

    document.createElement("time"   );

  </script>

  <noscript>

    <strong>警告！</strong>

    您的瀏覽器不支持HTML5，咱們須要運行JavaScript腳原本給您提供更好的服務；

    惋惜的是您的瀏覽器已禁用了JS腳本，請啓用它顯示此頁；

  </noscript>

<![endif]-->

語義化實戰

簡化版語義結構圖

<!DOCTYPE html>

<html lang="zh">

 

<head>

    <meta charset="UTF-8">

    <title>語義化實戰結構模型</title>

    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">

</head>

 

<body>

    <header>header</header>

    <main>main</main>

    <footer>footer</footer>

</body>

 

</html>

最全面的語義結構理解圖

<!DOCTYPE html>

<html lang="zh">

 

<head>

    <meta charset="UTF-8">

    <title>語義化實戰結構模型</title>

    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">

</head>

 

<body>

    <header>

        <hgroup>

            <h1>主標題</h1>

            <h2>副標題</h2>

        </hgroup>

        <p>做者：怪誕咖啡</p>

        <nav>

                <h2>text</h2>

                <ul>

                    <li>1</li>

                    <li>2</li>

                    <li>...</li>

                </ul>

            </nav>

    </header>

    <aside>...</aside>

    <main>

        <article>...</article>

        <article>...</article>

        <article>

            <h2>h2標題</h2> ...

            <section>

                <h3>h3標題</h3> ...

            </section>

            <section>

                <h3>h3標題</h3> ...

                <section>

                    <h4>h4標題</h4> ...

                </section>

            </section>

        </article>

    </main>

    <div id="fatFooter">

        <aside>

            <!-- 「胖」頁腳的內容 -->

            <img src="xxx.jpg" alt="圖片"> ...

        </aside>

        <footer>

            <!-- 標準頁腳的內容 -->

            <p>頁腳</p>

        </footer>

    </div>

</body>

 

</html>

關於站點的標題結構

一個頁面中能夠有多個一級標題嗎？這樣作到底好很差？

根據HTML的官方說法，一個頁面中能夠有任意多個一級標題。

可是，不少網站開發人員更傾向於每一個頁面只使用一個一級標題，由於這樣能保證網頁的無障礙性。（由於使用屏幕閱讀器的人在從一個二級標題跳到另外一個二級標題的時候，有可能錯過中間的一級標題。）

也有很多網絡維護人員認爲，每一個頁面就應該只有一個一級標題，這個一級標題在整個網站是獨一無二的，能夠明確地告訴搜索引擎網站中有什麼內容。

不過，在頁面中每一個主要部分都使用一級元素，好比側邊欄、文章等，一樣是容許的。

簡言之，如何設計站點的標題結構是一個沒有惟一答案的命題。不過，隨着HTML5得到勝利並統治Web，好像多個 <h1> 的設計會愈來愈時髦。

不過如今，不少開發人員爲了讓屏幕閱讀器開心，仍然堅持只使用一個 <h1>。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程