Semantic Elements - html header、nav、main、section、article、aside、footer tag

Posted on Edited on In Views: Disqus:

 

html5 有提供 header、nav、main、section、article、aside、footer …等等 tag，

這些都是屬於 Semantic Elements，預設皆為塊級元素，

他在我們人類看來，呈現效果與特性就跟 div tag 一樣，

但 Semantic Elements 最大的目的，是讓搜尋引擎或是其他軟體工具，

可以更清楚的了解網頁中每個區塊的設計目的，也有助於網頁 SEO 的排名。

其位置結構可參考下圖

<header></header>
<nav></nav>
<main>
  <section></section>
  <article></article>
  <aside></aside>
</main>
<footer>
</footer>

 

Semantic Elements 的使用時機與意義：

1、<main>：網頁的主要內容。

2、<section>：自訂的區塊，例如數篇摘要組成的空間。

3、<article>：一篇文章內容。

4、<aside>：網頁的側欄、附加內容。

 

參考資料：

HTML Semantic Elements

<hgroup>