快速理解web語義化

時間  2019-12-06
標籤 快速 理解 web 語義 欄目 HTML 简体版
原文   原文鏈接

什麼是Web語義化

Web語義化是指使用恰當語義的html標籤、class類名等內容，讓頁面具備良好的結構與含義，從而讓人和機器都能快速理解網頁內容。語義化的web頁面一方面可讓機器在更少的人類干預狀況下收集並研究網頁的信息，從而能夠讀懂網頁的內容，而後將收集彙總的信息進行分析，結果爲人類所用；另外一方面它可讓開發人員讀懂結構和用戶以及屏幕閱讀器（若是訪客有視障）可以讀懂內容。
簡單來講就是利於 SEO，便於閱讀維護理解。css

總結起來就是：html

  • 正確的標籤作正確的事情
  • 頁面內容結構化
  • 無CSS樣子時也容易閱讀，便於閱讀維護和理解
  • 便於瀏覽器、搜索引擎解析。 利於爬蟲標記、利於SEO

html 語義化標籤

HTML爲網頁文檔內容提供上下文結構和含義。對於HTML體系而言，Web語義化是指使用語義恰當的標籤，使頁面有良好的結構，讓頁面元素有含義，便於被瀏覽器、搜索引擎解析、利於SEO。一般咱們所說的HTML應該是徹底脫離表現信息的，其中的標籤應該都是語義化地定義了文檔的結構。
代碼示例：html5

<html>
    <body>
        <article>
            <header>
                <h1>h1 - WEB 語義化</h1>
            </header>
            <nav>
                <ul>
                    <li>nav1 - HTML語義化</li>
                    <li>nav2 - CSS語義化</li>
                </ul>
            </nav>
            <section>
                section1 - HTML語義化
            </section>
            <section>
                section2 - CSS語義化
            </section>
            <time datetime="2018-03-23" pubdate>time - 2018年03月23日</time>
            <footer> footer - by 小維</footer>
        </article>
    </body>
</html>

html語義化標籤包括 body, article, nav, aside, section, header, footer, hgroup, 還有 h1-h6 address等。web

下面來簡單介紹下經常使用的html語義化標籤瀏覽器

header 元素

header表明「網頁」或者「section」的頁眉，一般包含h1-h6 元素或者 hgroup, 做爲整個頁面或者一個內容快的標題。也能夠包裹一節的目錄部分，一個搜索框，一個nav，或者相關logo。ide

代碼示例：網站

<header>
        <hgroup>
            <h1>網站標題<h1>
            <h2>網站副標題</h2>
        </hgroup>
    <header>

注意事項：ui

  1. 能夠是「網頁」或者任意「section」的頭部部分
  2. 沒有個數限制
  3. 若是hgroup或者h1-h6本身就能工做得很好，那麼就不必用header。

hgroup 元素

hgroup 元素表明「網頁」或「section」的標題，當元素有多個層級時，該元素能夠將h1到h6元素放在其內，譬如文章的主標題和副標題組合搜索引擎

代碼示例：spa

<hgroup>
    <h1>這是一個主標題</h1>
    <h2>這是一個副標題</h2>
</hgroup>

注意事項：

  1. 若是隻須要一個h1-h6標籤就不用hgroup
  2. 若是有連續多個h1-h6標籤就用hgroup
  3. 若是有連續多個標題和其餘文章數據，h1-h6標籤就用hgroup包住，和其餘文章元數據一塊兒放入header標籤

footer 元素

footer元素表明「網頁」或任意「section」的頁腳，一般含有該節的一些基本信息，譬如：做者，相關文檔連接，版權資料。若是footer元素包含了整個節，那麼它們就表明附錄，索引，提拔，許可協議，標籤，類別等一些其餘相似信息。

代碼示例：

<footer>
    COPYRGHT@小維
</footer>

注意事項：

  1. 能夠是「網頁」或者任意「section」的底部部分
  2. 沒有個數限制，除了包裹的內容不同，其餘跟header相似

nav 元素

nav 元素表明頁面的導航連接區域。用於定義頁面的主要導航部分。
代碼示例：

<nav>
    <ul>
        <li>HTML語義化</li>
        <li>CSS 語義化</li>
    </ul>
</nav>

側邊欄上目錄、麪包屑導航、搜索樣式、或者下一篇上一篇文章咱們可能會想要用到nav，可是事實上規範上說nav只能用在頁面主要導航部分上。頁腳區域中的連接列表，雖然指向不一樣網站的不一樣區域，譬如服務條款，版權頁等，這些footer元素就可以用了。

注意事項：

  1. 用於整個頁面的主要導航部分，不適合就不要用nav元素了

article 元素

article 表明一個在文檔，頁面或者網站中自成一體的內容，其目的是爲了讓開發者獨立開發或重用。
除了它的內容，article會有一個標題(一般會在header裏)，一個footer頁腳。

代碼示例：

<article>
    <h1>你好，我是這邊文章的標題</h1>
    <p>你好，我是文章的內容</p>
    <footer>
        <p>最終解釋權歸XXX全部</p>
    </footer>
</article>

這是一個最簡單的例子，若是在article內部再嵌套article，那就表明內嵌的article是與它外部的內容有關聯的，如博客文章下面的評論，以下：

<article>

    <header>
        <h1>web 語義化</h1>
        <p><time pubdate datetime="2018-03-23">2018-03-23</time></p>
    </header>

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

    <article>
        <h2>評論</h2>

        <article>
            <header>
                <h3>評論者: 專業水軍</h3>
                <p><time pubdate datetime="2018-03-23T15:10-08:00">~1 min ago</time></p>
            </header>
            <p>還行</p>
        </article>

        <article>
            <header>
                <h3>評論者: 大水怪</h3>
                <p><time pubdate datetime="2018-03-23T15:10-08:00">~1 hour ago</time></p>
            </header>
            <p>樓上說的對</p>
        </article>

    </article>

</article>

article 內部能夠嵌套article，表示評論或者其餘跟文章有關聯的內容。article內部還能夠嵌套section，以下：

<article>

    <h1>web語義化</h1>
    <p>什麼是語義化？</p>

    <section>
        <h2>語義化詳解</h2>
        <p>語義化就是。。。</p>
    </section>

    <section>
        <h2>語義化特色</h2>
        <p>語義化特色就是。。。</p>
    </section>

</article>

文章內section是獨立的部分，可是它們只能算是組成總體的一部分，從屬關係，article是大主體，section是構成這個大主體的一個部分。

注意事項：

  1. 自身獨立狀況下：用article
  2. 是相關內容： 用section
  3. 沒有語義的： 用div

section 元素

section 元素表明文檔中的「節」或「段」，「段」能夠是指一片文章裏按照主題的分段；「節」能夠是指一個頁面裏的分組。section一般還帶標題，雖然html5中section會自動給標題h1-h6降級，可是最好手動給他們降級。

代碼示例：

<section>
    <h1>section是啥？</h1>
    <article>
        <h2>關於section</h2>
        <p>section的介紹</p>
        <section>
            <h3>關於其餘</h3>
            <p>關於其餘section的介紹</p>
        </section>
    </article>
</section>

注意事項：

  1. 一張頁面能夠用section劃分爲簡介、文章條目和聯繫信息。不過在文章內頁，最好用article。section不是通常意義上的容器元素，若是想做爲樣式展現和腳本的便利，能夠用div。
  2. 表示文檔中的節或者段。
  3. acticle、nav、aside能夠理解爲特殊的section，若是能夠用article、nav、aside就不要用section，沒有實際意義的就用div

aside元素

aside 元素被包含在article元素中做爲主要內容的附屬信息部分，其中的內容能夠是與當前文章有關的相關資料，標籤，名詞解釋等。
在article元素以外使用做爲頁面或站點全局的附屬信息部分。最典型的是側邊欄，其中的內容能夠是日誌串連，其餘組的導航，甚至廣告，這些內容相關的頁面。

代碼示例：

<article>
    <p>內容</p>
    <aside>
        <h1>做者簡介</h1>
        <p>小維,哈哈哈</p>
    </aside>
</article>

注意事項：

  1. aside 在 article 內表示主要內容的附屬信息。
  2. 在article以外側能夠作側邊欄，沒有article與之對應，最好不用
  3. 若是是廣告，其餘日誌連接或者其餘分類導航也能夠用。

html語義化小結

總之，HTML語義化是反對大篇幅使用無語義化的div+span+class，而鼓勵使用HTML定義好的語義化標籤。

固然，若是須要兼容低版本的IE瀏覽器，好比說IE8以及如下，那就須要考慮一些HTML5標籤兼容性解決方案了。
更多標籤及其兼容性請去往傳送門
html5標籤列表傳送門

CSS語義化

CSS語義就是class和ID命名的語義。class屬性做爲HTML與CSS銜接的紐帶，其本意是用來描述元素內容的。指用易於理解的名稱對html標籤附加的class或id命名。若是說HTML語義化標籤是給機器看的，那麼CSS命名的語義化就是給人看的。良好的CSS命名方式減小溝通調試成本，易於理解。

CSS命名首先要知足W3C的命名規範和團隊的命名規範。其次是高效和可重用性。

就好像.main/.sidebar會比.left_content/.right_content的class命名靈活性更好。

<!-- 以表現爲中心 -->
<div class="ft margin10">
    <span>用戶名：小維</span>
<div>

<!-- 以信息爲中心 -->
<p class="user_info">
    <em>用戶名:小維</em>
<p>

看到這裏，問題來了。既然CSS class和ID命名的語義化能夠便於閱讀理解和減小溝通調試成本，那麼咱們是否是能夠用div 結合class和ID語義化命名的方式來代替html的語義化？

代碼示例：

<html>
    <body>
        <div class="article">
            <div class="header">
                <h1>h1 - WEB 語義化</h1>
            </div>
            <div class="nav">
                <ul>
                    <li>nav1 - HTML語義化</li>
                    <li>nav2 - CSS語義化</li>
                </ul>
            </div>
            <div class="section">
                section1 - HTML語義化
            </div>
            <div class="section">
                section2 - CSS語義化
            </div>
            <div class="time">time - 2018年03月23日</div>
            <div class="footer"> footer - by 小維</div>
        </div>
    </body>
</html>

從代碼的層面上來看，使用CSS class語義化的命名也是可以便於閱讀和維護的，可是這樣子並不利於SEO和屏幕閱讀器識別。

知識拓展——ARIA

ARIA即Accessible Rich Internet Application，中文譯爲無障礙富互聯網應用。能夠爲一些有功能障礙（如聽力，視力）的人羣經過屏幕閱讀器例如voiceover等，提供無障礙訪問動態、可交互Web內容。

而應用於HTML的ARIA有兩部分組成：role 和aria-* 。

其中，role標識了一個元素的做用，aria-描述了與之有關的事物特徵及其狀態。

ARIA的具體使用規則可見ARIA in HTML

W3C對ARIA無障礙Web規範這樣解釋：

Web developers may use the ARIA role and aria-* attributes on HTML elements, in accordance with the requirements described in [wai-aria-1.1], except where these conflict with the strong native semantics or are equal to the implicit ARIA semantics of a given HTML element.

    Setting an ARIA role and/or aria-* attribute that matches the implicit ARIA semantics is unnecessary and is not recommended as these properties are already set by the browser.

因此，若是使用的元素(HTML5)自己具備語義化，應該使用這些元素，而不用再從新定義一個添加ARIA的角色、狀態或屬性的元素。
例如：
nav已經隱含ARIA的role="navigation"聲明，就不用在<nav>標籤上在定義role或者aria就能被讀屏軟件識別。而沒有語義化的元素如<div class="navigation">則推薦使用 role="navigation"。

END

web語義化包含了html標籤語義化和css命名語義化。還有一個URL語義化，本文主要是對web語義化作一個簡單快速的瞭解，就不展開了。更多內容和知識請參考:
如何理解Web語義化
HTML 5的革新之一：語義化標籤一節元素標籤
HTML 5的革新——語義化標籤(二)

很是感謝前輩們的知識總結。

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