站長資訊網(wǎng)早在 2013 年，<main> 元素就被正式添加到 W3C HTML 規(guī)范中，到目前位置，關(guān)于該元素的定義已經(jīng)很完善了，所以現(xiàn)在是時候深入了解什么時候適合使用 <main> 元素了。那么，下面就開始吧。
W3C 規(guī)范
<main> 的主要目的是將 ARIA 的地標(biāo)性作用 main 映射到 HTML 中的元素。這可以幫助那些屏幕閱讀設(shè)備和輔助設(shè)備知道頁面的主要內(nèi)容是從哪里開始的。W3C 規(guī)范將 <main> 描述為 ：
文檔或應(yīng)用程序的主要內(nèi)容。主內(nèi)容區(qū)域由與文檔的中心主題或應(yīng)用的核心功能的直接相關(guān)或擴(kuò)展的內(nèi)容組成。
自從 <main> 元素包含在 HTML 規(guī)定里之后，<body> 元素就還原成了它在 HTML4 中的定義。
The body element represents the content of the document.
細(xì)節(jié)
使用 <main> 元素值得注意的一點(diǎn)是，它在每個頁面中只能使用一次。為什么要規(guī)定一個頁面只能使用一次呢？雖然我對具體的細(xì)節(jié)并不感興趣，但是有些觀點(diǎn)看起來還是比較有意義的。
按照規(guī)格，如果你在一個文檔中試圖使用多個 <main> 標(biāo)簽，那么 W3C validator 會拋出錯誤。
<main> 元素的另外一個規(guī)定是，它不能作為 <article>, <header>, <aside>, <footer>, <nav> 的子元素節(jié)點(diǎn)。
使用
就像其它的 HTML5 新元素一樣，并不是所有的瀏覽器都能夠識別出 <main> ，并且給它加上預(yù)設(shè)的樣式，你可能需要在自己的 CSS 文件中將它設(shè)置為塊級元素。
main {display:block;}
有的時候，為了支持一些較低版本的 IE 瀏覽器，你可能還需要使用 JavaScript 創(chuàng)建該元素。
<script type="text/javascript">document.createElement('main');</script>
當(dāng)然了，你還可以使用 html5shiv.
使用 <main> 元素最簡單的方式就是去替換那些 ID 或者 Class 值為 main 或者 content 之類的 <p> 元素。
所以，在實(shí)踐中它應(yīng)該是什么樣子呢？下面是使用 <main> 元素之前的文檔結(jié)構(gòu)。
<header>Header</header> <p id="content">Main Content</p> <footer>Footer</footer>
下面使用 <main> 元素改寫文檔。
<header>Header</header> <main id="content">Main Content</main> <footer>Footer</footer>
好了，這是如此的簡單，以至于一分鐘不到我們就可以將文檔改寫成新潮的 HTML5 樣式。
總結(jié)
正如你所見的，使用 <main> 元素是超級簡單的，只需要話費(fèi)幾分鐘的時間，所以現(xiàn)在真的到了將 <main> 帶入到網(wǎng)站開發(fā)的過程中了。
