【譯】停止濫用div! HTML語義化介紹

在繼續之前，我們暫停下並檢視上面的示例。如果我們使用<header>，<main>和<footer>作為文章的主要結構，它的外觀如下：

<header>
    <h1>Super duper best blog ever</h1>
    ...
</header>
<main>
    <h2>Why you should buy more cheeses than you currently do</h2>
    ...
</main>
<footer>
    Contact us!
    <div class="contact-info">this.is.us@example.com</div>
</footer>
複製程式碼

那真的很棒！但是，還有很多工作要做。

分解：<section>

因此，我們為頁面提供了一個基本大綱：頁首，頁尾和主要內容區域。現在是時候新增些美妙的內容了。

通常，你會希望將你的內容分解為多個部分，尤其是對像本文這樣的大量文字內容，因為沒人喜歡閱讀這些難以理解的文字牆。

<section>派上用場了。這是在系列規則中最簡單的一個：從結構上講，它基本上只是一個具有特殊含義的<div>。一個<section>開始一個新的"sectioning content"區域，因此它可以有自己的<header>和<footer>。

那麼，<section>和普通的舊<div>之間有什麼區別，然後，你應該在什麼時候使用它們呢？好吧，允許我再次引用規範：

筆記：

元素不是通用容器元素。當一個元素僅是用於樣式目的或為指令碼編寫提供便利的時候，鼓勵作者使用[div](https://www.w3.org/TR/html5/grouping-content.html#elementdef-div)元素。一般規則是

元素僅在元素內容在文字[大綱](https://www.w3.org/TR/html5/sections.html#outline)中明確列出時候才適用。-- [https://www.w3.org/TR/html5/sections.html#the-section-element](https://www.w3.org/TR/html5/sections.html#the-section-element)

你知道，概述來說，HTML5規範實際上是可讀的。它是那個比較可讀的規範之一。每當我瀏覽它以獲取快速答覆時，我都不可避免地學到一些意想不到的和有用的東西，尤其是當我開始點選連結的時候。有時（你也）試試吧！

簡而言之，如果要在目錄中列出文件的一部分，請使用<section>。如果沒有，請使用<div>或其它元素。

內容指標

很好，我們已經得到了一個堅固的頁面結構。我們已經明確標記了頁面的主要內容區域，而不僅僅是單獨調整<div>，我們已經調整出了頁首，頁尾和章節。但是，肯定還有比我們的文件更多的語義。

讓我們來談談HTML5中新增的一些元素，它們傳達的內容語義而不是結構。

整體：<article>

<article>元素用於表示完全獨立的內容區域，這些內容可以從頁面中提取出來並放入另一個內容中，並且仍然有意義。這可能是文字文章或部落格，但也可用於社交媒體帖子，如推特或臉書的牆貼。

HTML5規範建議文章總有一個標題，標識它是什麼，理想的情況下使用標題元素(<h1>-<h6>)。<article>也可以有<header>，<footer>和<section>元素，因此你可以使用它來嵌入一個完整的文件片段，其中包含其它頁面中所需的所有結構。

從上面的方式返回到示例，我們使用<article>和我們討論的其它一些元素來重寫帶class="article-*"的元素。

<article>
    <header>
        <h1>Why you should buy more cheeses than you currently do</h1>
    </header>
    <section>
        <header>
            <h2>Part 1: Variety is spicy</h2>
        </header>
        <!-- cheesy content -->
    </section>
    <section>
        <header>
            <h2>Part 2: Cows are great</h2>
        </header>
        <!-- more cheesy content -->
    </section>
</article>
複製程式碼

這不是比原來更具可讀性嗎？而且，不僅更容易閱讀，它對輔助技術更有用；機器人不能總是弄清楚你的特定類名模式，但是它們可以遵循這種結構。

使用：<nav>

這個元素比其它元素更有名。<nav>旨在清楚地識別頁面上的主要導航塊，幫助使用者圍繞站點其餘部分找到路徑的連結組（例如站點地圖或標題中的連結列表）或當前頁面（例如目錄）。

在我們的示例頂部，讓我們將<nav>應用於標題中的那組連結。

<nav>
    <a href="/">Home</a>
    <a href="/about">About</a>
    <a href="/archive">Archive</a>
</nav>
複製程式碼

根本不改變結構，但你知道它是什麼，一目瞭然而不需要在<div>上讀物和處理類名來找到它，更重要的是機器人也可以找到它。

接觸：<address>

我們要討論的最後一個元素是<address>。這個元素旨在調出聯絡資訊，它通常在主頁<footer>中用於標記企業的郵寄地址，電話號碼，客戶服務郵箱地址等等。

有趣的是，如何在<address>元素中標記內容的規則是開放的。規範提到有幾個其它規範可以解決這個問題，並且提供這種級別的粒度可能超出了HTML本身的範圍。

常見的解決方案是RDFa，也是W3C規範，它使用標籤上的屬性來標記資料的不同元件。下面是我們示例中的頁尾在標記<address>元素和RDFa時可能看起來的樣子：

<footer>
    <section class="contact" vocab="http://schema.org/" typeof="LocalBusiness">
        <h2>Contact us!</h2>
        <address property="email">
            <a href="mailto:us@example.com">us@example.com</a>
        </address>
        <address property="address" typeof="PostalAddress">
            <p property="streetAddress">123 Main St., Suite 404</p>
            <p>
                <span property="addressLocality">Yourtown</span>,
                <span property="addressRegion">AK</span>,
                <span property="postalCode">12345</span>   
            </p>
            <p property="addressCountry">United States of America</p>
        </address>
    </section>
</footer>
複製程式碼

無疑，RDFa有點冗長，但它對於標記資料非常方便。如果你有興趣瞭解有關RDFa的更多資訊，請點選以下連結：

• The W3C's RDFa primer
• A description of schemas and links to a bunch of them on schema.org
• The LocalBusiness schema used above

總結

好了，我們已經介紹了很多，我們已經看到很多零零散散的元素應用到我們的例子中。那麼，讓我們把它們放在一起看看它的樣子。

<header>
    <h1>Super duper best blog ever</h1>
    <nav>
        <a href="/">Home</a>
        <a href="/about">About</a>
        <a href="/archive">Archive</a>
    </nav>
</header>
<main>
    <article>
    <header>
        <h1>Why you should buy more cheeses than you currently do</h1>
    </header>
    <section>
        <header>
            <h2>Part 1: Variety is spicy</h2>
        </header>
        <!-- cheesy content -->
    </section>
    <section>
        <header>
            <h2>Part 2: Cows are great</h2>
        </header>
        <!-- more cheesy content -->
    </section>
</article>
</main>
<footer>
    <section class="contact" vocab="http://schema.org/" typeof="LocalBusiness">
        <h2>Contact us!</h2>
        <address property="email">
            <a href="mailto:us@example.com">us@example.com</a>
        </address>
        <address property="address" typeof="PostalAddress">
            <p property="streetAddress">123 Main St., Suite 404</p>
            <p>
                <span property="addressLocality">Yourtown</span>,
                <span property="addressRegion">AK</span>,
                <span property="postalCode">12345</span>   
            </p>
            <p property="addressCountry">United States of America</p>
        </address>
    </section>
</footer>
複製程式碼

如果你問我（怎麼看改造後的內容？），那這比原始例子的可讀性高100倍，而且對於搜尋引擎優化和可訪問性目的而言，其效率將提高100倍。

這些絕不是HTML中唯一的語義元素。有很多其它元素可以幫助你標記和構建你的文字內容，嵌入媒體資源等等。如果你喜歡這個並且希望深入挖掘，這裡有一些（標籤）可以檢視下。你可能認識一些：

• <aside>
• <blockquote>
• <cite>
• code
• <data>
• <del>
• <figure>
• <ins>
• <time>
• <var>

這只是一個開始！就像我說的，當你開始閱讀HTML規範時，很難停下來。它是種非常豐富的語言，我認為人們經常會低估這種語言。

原文： dev.to/kenbellows/…

文章首發：github.com/reng99/blog…

更多內容：github.com/reng99/blog…