HTML5 新增的語義化結構元素
元素名稱 | 說明 |
---|---|
header | |
HTML5中新的語義元素:
HTML5 語義化
新增加的header、footer標籤主要用於表現DOM的語義沒有特殊的樣式
而HTML5的新標籤可以直接用header、article、footer這些清晰明了的標籤來表達,使文檔的結構更清晰,以前設計時還要div然後id=”container”這一類的屬性,現在可以用一個article等類似標籤來表現,作用於DIV一樣,只是更方便
其實語義標籤的作用目前還沒完全體現,這是由於html5的兼容性問題造成的,不過其日後的趨勢就是搜索引擎會依賴這些標籤更好的抓取網頁內容。搜索引擎不建議千篇一律的div,使用恰當的html標記可以讓搜索引擎更好的明白你的頁面結構以便正確的索引。google目前的抓取會通過頁面的<h1><h2>標記進行一些計算,如果你用<div>模擬,對用戶無所謂,但是對搜索引擎你就不友好咯。
html5新標籤更加語義化。比如文章內容就用<article>這個標籤表示。視頻就用<video>這個標籤。更加的簡潔明了。
https://www.runoob.com/html/html5-semantic-elements.html
<header> | <header>元素描述了文檔的頭部區域 <header>元素主要用於定義內容的介紹展示區域. 在頁面中你可以使用多個<header> 元素. |
<nav> | <nav> 標籤定義導航鏈接的部分。 <nav> 元素用於定義頁面的導航鏈接部分區域,但是,不是所有的鏈接都需要包含在 <nav> 元素中! |
<article> | <article> 標籤定義獨立的內容。 |
<section> | <section> 標籤定義文檔中的節(section、區段)。比如章節、頁眉、頁腳或文檔中的其他部分。 |
<aside> | <aside> 標籤定義頁面主區域內容之外的內容(比如側邊欄)。 aside 標籤的內容應與主區域的內容相關. |
<figcaption> | 標籤定義 <figure> 元素的標題. |
<figure> | 標籤規定獨立的流內容(圖像、圖表、照片、代碼等等)。 |
<footer> | HTML5 <footer> 元素 <footer> 元素描述了文檔的底部區域. <footer> 元素應該包含它的包含元素 一個頁腳通常包含文檔的作者,著作權信息,鏈接的使用條款,聯繫信息等 |
另外:main 主要區域
使用 main 標籤來展示文檔的主體部分
的主要目的是將 ARIA 的地標性作用 main 映射到 HTML 中的元素。這可以幫助那些屏幕閱讀設備和輔助設備知道頁面的主要內容是從哪裡開始的。W3C 規範將 描述為 :
文檔或應用程序的主要內容。主內容區域由與文檔的中心主題或應用的核心功能的直接相關或擴展的內容組成。
自從 <main>
元素包含在 HTML
規定里之後,<body>
元素就還原成了它在 HTML4
中的定義。
The body element represents the content of the document.
注意:
1、使用main元素值得注意的一點是,它在每個頁面中只能使用一次。
如果你在一個文檔中試圖使用多個 標籤,那麼 W3C validator 會拋出錯誤。 元素的另外一個規定是,它不能作為 , , , , 的子元素節點。
就像其它的 HTML5 新元素一樣,並不是所有的瀏覽器都能夠識別出
,並且給它加上預設的樣式,你可能需要在自己的 CSS 文件中將它設置為塊級元素。
main {display:block;}
改造範例:
<header>Header</header>
<div id="content">Main Content</div>
<footer>Footer</footer>
改造為:
<header>Header</header>
<main id="content">Main Content</main>
<footer>Footer</footer>
section 範例
<section>
<h1>WWF</h1>
<p>The World Wide Fund for Nature (WWF) is....</p>
</section>
article 範例
<article>
<h1>Internet Explorer 9</h1>
<p>Windows Internet Explorer 9(縮寫為 IE9 )在2011年3月14日21:00 發布。</p>
</article>
或
<article>
<header>
<h1>Internet Explorer 9</h1>
<p><time pubdate datetime="2011-03-15"></time></p>
</header>
<p>Windows Internet Explorer 9(縮寫為 IE9 )是在2011年3月14日21:00發布的</p>
</article>
aside 範例
<aside>
<h4>Epcot Center</h4>
<p>The Epcot Center is a theme park in Disney World, Florida.</p>
</aside>
footer 範例
<footer>
<p>Posted by: Hege Refsnes</p>
<p><time pubdate datetime="2012-03-01"></time></p>
</footer>
figure和figcaption範例
<figure>
<img src="img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228">
<figcaption>Fig1. - The Pulpit Pock, Norway.</figcaption>
</figure>