HTML5新增語義化標簽

2024-04-27 15:12:56

字體：大中小

來源：轉載

供稿：網友

在HTML 5出來之前，我們用<div>來表示頁面章節，但是這些div都沒有實際意義。（即使我們用CSS樣式的id和class形容這塊內容的意義）。這些標簽只是我們提供給瀏覽器的指令，只是定義一個網頁的某些部分。但現在，那些之前沒“意義”的標簽因為因為html5的出現消失了，這就是我們平時說的“語義”。

看下圖就沒有用div來布局：

上面的結構沒有用div標簽，用的是語義化標簽（關于用哪些標簽，取決于你的設計目標），但也不要因為出現了語義化標簽而隨意使用，錯誤地使用總會事與愿違。所以有些地方也是需要用div標簽的，正是div標簽沒有任何意義，只是一個標簽，用來構建結構和外觀，做容器是個好的選擇。

W3C定義了這些語義化標簽就是讓我們能夠正確的使用這些標簽，使網絡爬蟲能讀懂重要的東西。

<header>標簽

<header>標簽定義一個內容塊，代表整個網頁或"section"的頁眉，通常包括<h1>~<h6>、<hgroup>等元素，作為整個頁面或一個內容塊的標題，也可以包含一塊目錄區域nav，一個搜索框，或相關logo。

實例：

<header>  <hgroup>    <h1>下標題</h1>    <h2>副標題</h2>  </hgroup></header>整個頁面沒有限制<header>的個數，可以為多個，可以為每個內容塊定義<header>元素。
<header>使用注意：
<header>作為整個頁面或"section"的頁眉，或某個內容區域塊。整個頁面沒有限制<header>的個數如果<h1>~<h6>和<hgroup>自己就能工作的很好，那就不要用<header>，減少冗余。<footer>標簽
<footer>標簽定義一個區域，作為整個頁面或"section"的頁腳（底部），通常包含整個頁面或該區域的基本信息，如：作者、相關文檔鏈接、版權信息、索引、標簽、協議等。
實例：
<footer>    相關文檔鏈接、版權信息</footer><footer>使用注意：
<footer>作為整個頁面或"section"的頁腳。<footer>沒有數量限制。
<hgroup>標簽
<hgroup>標簽定義整個頁面或"section"的標題，當標題有多個層級時，可以使用<hgroup>標簽將<h1>~<h6>放入其中組合。如：文章的正標題和副標題等。
實例：
<hgroup>  <h1>這是一篇介紹HTML5語義化的文章</h1>  <h2>HTML5</h2></hgroup><hgroup>使用注意：
<hgroup>作為整個頁面或"section"的標題。如果只使用一個<h1>~<h6>就不用<hgroup>。如果連續使用多個<h1>~<h6>就用<hgroup>。如果有連續多個標題和文章數據，就用<hgroup>將<h1>~<h6>組合起來，和其它文章數據一起放入<header>中。
<nav>標簽
<nav>標簽定義頁面的導航鏈接部分，主要用于頁面的主要導航部分。
實例：
<nav><!-- 頁面的主要導航部分 -->  <ul>    <li>第一個鏈接</li>    <li>第二個鏈接</li>    <li>第三個鏈接</li>  </ul></nav><nav>使用注意：
建議<nav>只用于頁面的主要導航部分，其它的有導航鏈接的部分用<ul>就行。若不合適用于主要導航部分，就不要用<nav>標簽。
<article>標簽
<article>很容易與<div>、<section>混淆，它定義了在文檔、頁面和網站中自成一體的內容，便于開發者獨立開發，例如：一篇博客文章、用戶評論、論壇帖子等。
<article>中通常有自己的標題（在<header>中），也有自己的<footer>。下面例舉兩個例子：
一篇簡單的文章：
<article>  <header>       <h1>一篇文章</h1>     <p><time datetime="2017-01-01">2017-01-08</time><p>  </header>  <p>文章正文內容。。。。</p>  <footer>    <small>版權：HTML5所有。作者：xxx</small>  </footer></article>
一篇包含用戶評論的文章：
<article>  <!-- 整篇博客 -->		  <header>  <!-- 博客的頁眉部分 -->	  	    <h1>一篇文章的標題</h1>		<p><time datetime="2017-01-01">2017-01-08</time></p>	  	  </header>	  	  <p>這是文章的正文部分。。。</p>	  	  <article>  <!-- 用戶評論部分 -->	    		<h2>用戶評論部分</h2>				<article>  <!-- 第一個用戶的評論 -->				  <header>		  		    <h3>評論者：</h3>		    <p><time datetime="2017-01-01">30分鐘前</time></p>		  		  </header>		  		  <p>評論的內容。。。</p>				</article>				<article>  <!-- 第二個用戶的評論 -->				  <header>		  		    <h3>評論者：</h3>		    <p><time datetime="2017-01-01">40分鐘前</time></p>		  		  </header>		  		  <p>評論的內容。。。</p>				</article>			  </article>	  	  	  <footer>  <!-- 博客的頁眉部分 -->	  	    <p><small>版權所有：歸HTML5所有  作者：xxx</small></p>	  	  </footer>		</article>
<article>中嵌套的<article>可能是用戶評論，也可能是與文章相關聯的部分。以下是在<article>中嵌套<section>元素：
<!DOCTYPE html><html lang="zh">  <head>    <meta charset="utf-8">	<title>details summary</title>  </head>  <body>    	<article>  <!-- 整篇文章 -->		  <h1>前端技術</h1>	  <p>前端技術有哪些？</p>	  	  <section>  <!-- article中的一個章節 -->	  	    <h2>HTML</h2>	    <p>THML是。。。</p>			  </section>	  	  <section>  <!-- article中的一個章節 -->	  	    <h2>CSS</h2>	    <p>CSS是。。。</p>			  </section>	  	 	</article>	  </body></html>
<section>部分雖然是獨立的內容，但它也是組成整體的一部分，是從屬關系，<article>是主體，<section>是組成這個主體的一小部分，<article>的文章內容在<section>篇章中，<section>是<article>相關的內容，這樣能讓瀏覽器更容易區分文章內容。
<article>使用注意：
本身獨立用<article>與其它內容相關用<section>沒有語義用<div>
<section>標簽
<section>定義了"節"和"段"，"段"可以是一篇文章里相關主題的分段，是文章的組成部分。
如果可以用<article>、<header>、<aside>，就不要用<section>，<section>不是一般意義的容器，如果想作為樣式展開就用<div>。
<aside>標簽
<aside>標簽定義附加信息，如果在<article>內部，則作為主要內容的附加信息，包括：標簽、相關資料、名詞解釋等；如果在<article>外部，則作為整個頁面的附加信息，包括：側邊欄、廣告、其它導航等。
實例：
<article>  <h1>關于aside標簽的討論</h1>  <p>aside定義相關內容的附加信息。。。</p>  <aside>  <!-- 關于上面文章的一些附加信息 -->    <h2>作者<h2>    <p>紅塵，前端菜鳥一枚。</p>  </aside></article><aside>使用注意：
<aside>在<article>內部作為主體內容的附加信息，如：作者作息、相關名詞解釋<aside>在<article>外部作為整個頁面的附加信息，如：側邊欄、其它導航如果沒有<article>與<aside>相對應，則不要用<aside>，可以用<div>
HTML5中還有其它的語義化元素，這里就不多例舉了。。。