HTML5 語義化 - main

高華峰發表於2016-12-12
HTMLAI

　　早在 2013 年，<main> 元素就被正式新增到 W3C HTML 規範中，到目前位置，關於該元素的定義已經很完善了，所以現在是時候深入瞭解什麼時候適合使用 <main> 元素了。那麼，下面就開始吧。

　　W3C 規範

　　<main> 的主要目的是將 ARIA 的地標性作用 main 對映到 HTML 中的元素。這可以幫助那些螢幕閱讀裝置和輔助裝置知道頁面的主要內容是從哪裡開始的。W3C 規範將 <main> 描述為 ：

文件或應用程式的主要內容。主內容區域由與文件的中心主題或應用的核心功能的直接相關或擴充套件的內容組成。

　　自從 <main> 元素包含在 HTML 規定裡之後，<body> 元素就還原成了它在 HTML4 中的定義。

The body element represents the content of the document.

　　細節

　　使用 <main> 元素值得注意的一點是，它在每個頁面中只能使用一次。為什麼要規定一個頁面只能使用一次呢？雖然我對具體的細節並不感興趣，但是有些觀點看起來還是比較有意義的。

　　按照規格，如果你在一個文件中試圖使用多個 <main> 標籤，那麼 W3C validator 會丟擲錯誤。

　　<main> 元素的另外一個規定是，它不能作為 <article>, <header>, <aside>, <footer>, <nav> 的子元素節點。

　　使用

　　就像其它的 HTML5 新元素一樣，並不是所有的瀏覽器都能夠識別出 <main> ，並且給它加上預設的樣式，你可能需要在自己的 CSS 檔案中將它設定為塊級元素。

    main {display:block;}

　　有的時候，為了支援一些較低版本的 IE 瀏覽器，你可能還需要使用 JavaScript 建立該元素。

<script type="text/javascript">document.createElement('main');</script>

　　當然了，你還可以使用 html5shiv.

　　使用 <main> 元素最簡單的方式就是去替換那些 ID 或者 Class 值為 main 或者 content 之類的 <div> 元素。

　　所以，在實踐中它應該是什麼樣子呢？下面是使用 <main> 元素之前的文件結構。

    <header>Header</header>
    <div id="content">Main Content</div>
    <footer>Footer</footer>

　　下面使用 <main> 元素改寫文件。

    <header>Header</header>
    <main id="content">Main Content</main>
    <footer>Footer</footer>

　　好了，這是如此的簡單，以至於一分鐘不到我們就可以將文件改寫成新潮的 HTML5 樣式。

　　總結

　　正如你所見的，使用 <main> 元素是超級簡單的，只需要話費幾分鐘的時間，所以現在真的到了將 <main> 帶入到網站開發的過程中了。

相關文章