HTML5常用的語義化標簽

快速查詢

article | aside | nav | section | header | footer  

架構預覽

nav 定義導航鏈接的部分

在頁腳顯示一個站點的導航鏈接,如首頁、服務信息頁面、版權信息頁面等

<nav>
    <ul>
       <li><a href=”#”>Home</a></li>
       <li><a href=”#”>CSS</a></li>
       <li><a href=”#”>Html5</a></li>
    </ul>
</nav>

article 定義文章  

裝載顯示一個獨立的文章內容，論壇帖子、新聞、博客文章、用戶評論等，artilce可以嵌套，則內層的artilce對外層的article標簽有隸屬的關係。

<article>
    <h1>標題</h1>
    <p> 內容</p>
    <article>用戶評論</article>
    <article>回覆評論</article>
</article>

section 定義文檔中的節

 章節、頁眉、頁腳或文檔中的其他部分，

<section>
   <h1>標題1</h1>
   <p>內容1</p>
</section>
<section>
   <h1>標題2</h1>
   <p>內容2</p>
</section>

aside 定義文章的側欄

廣告，成組的內容，友情鏈接，側邊欄等

<aside>
     <h1> 側欄標題1</h1>
     <p>這是側欄內容1</p>
</aside>
<aside>
     <h1> 側欄標題2</h1>
     <p>這是側欄內容3</p>
</aside>

header 定義文檔的頁眉

通常是一些引導和導航信息

<header> 
     <p>logo</p> 
     <nav>
          <ul>
               <li>Home</li>
               <li>Html5</li>
          </ul>
     </nav> 
</header>

footer 定義文檔或節的頁腳

在典型情況下，該元素會包含創作者的姓名、文檔的創作日期以及/或者聯繫信息

<footer> 
  <p>© 2019 All Rights Reserved. </p>
</footer>

參考文獻

1 html5 | http://caibaojian.com/html5
2 w3school | https://www.w3school.com.cn/
3 MDN | https://developer.mozilla.org/zh-CN/docs/Web/HTML/