html5 main標籤是什麼意思?html5 main標籤作用的詳細介紹

來源:互聯網
上載者:User
html5 main標籤是什麼意思?html5 main標籤作用又有哪些?本篇文章主要講了html5 main標籤的定義及其具體的作用,還有關於html5 main標籤的使用詳細說明。

首先,我們來瞭解一下html main是什麼意思:

html5 main標籤的定義和作用:

<main> 標籤規定文檔的主要內容。

<main> 元素中的內容對於文檔來說應當是唯一的。它不應包含在文檔中重複出現的內容,比如側欄、導覽列、著作權資訊、網站標誌或搜尋表單。

注釋:在一個文檔中,不能出現一個以上的 <main> 元素。<main> 元素不能是以下元素的後代:<article>、<aside>、<footer>、<header> 或 <nav>。

<main> 標籤是 HTML 5 中的新標籤。

早在 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.

html5 main標籤具體使用的作用:

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

按照規格,如果你在一個文檔中試圖使用多個 <main> 標籤,那麼 W3C validator 會拋出錯誤。

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

html5 main標籤的具體使用:

就像其它的 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 樣式。

【相關推薦】

HTML5<progress>標籤是什麼意思?HTML5<progress>標籤的基本用法詳解

html textarea是什麼意思?如何擷取textarea標籤中的分行符號和空格?

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.