一樣寫的出程式，但怎麼一眼區分你是不是新手，而有沒有使用semantic elements是很大的差別。能寫出程式是讓人雀躍的事情，但程式困難的地方不只是寫出來，後續的維護及溝通是很重要的一環，semantic elements是可以讓人快速讀懂你的程式的方法
內容目錄
semantic elements介紹
在HTML5之前，區塊只能用div編輯，一眼望過去全都是div組成的區塊，你很難一眼判別這個區塊是網頁的哪一個位置，而semantic elements可以快速抓到網頁的架構跟每個區塊的位置，還可以優化SEO搜尋，像是<header>、<nav>、<footer>等
呈現方式
HTML
<header>開頭
<nav class=”row”>導覽列 </nav>
</header>
<div class=”clear-fix”></div>
<main class=”row”>
<aside>
我是側邊攔
</aside>
<article class=”star”>整篇文章開始
<section>第一章包覆區塊
<h2>第一章標題</h2>
<p>第一章內文</p>
<figure>我要包圖片</figure>
</section>
<section>第二章包覆區塊
<h2>第二章標題</h2>
<p>第二章內文</p>
<article>專有名詞區塊
<section class=”introduction”>專有名詞第一章包覆區塊
<h2>專有名詞第一章標題</h2>
<p>專有名詞第一章內文</p>
</section>
</article>
</section>
</article>
<div class=”clear-fix”></div>
<footer>我是頁尾</footer>
</main>
CSS
<style>
* {
font-size: 20px;
color: #fff;
font-weight: 700;
}
header {
height: 100px;
background: red;
border: 2px solid pink;
}
nav {
width: 100px;
height: 100px;
float: right;
background: green;
border: 2px solid greenyellow;
}
.clear-fix {
content: “”;
display: table;
clear: both;
}
article {
background: grey;
border: 1px solid black;
}
aside {
float: left;
background: grey;
border: 1px solid black;
height: 1300px;
width: 30%;
}
.star {
float: right;
height: 1300px;
width: 68%;
}
section {
height: 600px;
background: rgba(47, 0, 255, 0.274);
border: 1px solid purple;
width: 700px;
margin: 20px;
}
figure {
width: 500px;
height: 200px;
background: skyblue;
border: 1px solid silver;
}
h2 {
background: yellowgreen;
border: 1px solid yellow;
}
p {
height: 100px;
background: chocolate;
border: 1px solid sandybrown;
}
.introduction {
margin: 10px;
height: 300px;
width: 400px;
}
footer {
height: 100px;
background: red;
border: 2px solid pink;
}
</style>
程式執行結果
header頁首標籤
大多設置於網頁的開頭，網頁的頁首，通常放在頁面最上方。也有些會使用在<section>中，那就是在這個段落中的開頭部分
nav導覽列
使用在導覽網站的標籤，像是我們常常打開的主選單，下拉式的選單，頁尾所看到的一些選單
article區塊
用於包覆整篇文章的標籤，定義必須要有很高的獨立性跟完整性，即便脫離這個架構，也能自己完整的存在
section文章區塊
用於包覆文章內文中，一個專欄或者一個章節的區塊，要搭配heading(h1~h6)使用，以前要幫內文排版，只能使用div，但使用section之後，就可以讓div去負責完全無意義的區塊，而非包覆內文區塊
article與section的區別
article是一個完整的文章，本身被分離出來，也不會影響整個架構跟閱讀性，而section更像是文章中的某一個章節，例如一個小說少了第二章直接跳第三章，你就看不懂這在寫什麼了
但由於標籤特性沒有明確的定義巢狀的規則，因此在實務上可以看到article包覆section或者section包覆article
從第一段描述認為應該是article包覆section，但如果以某個章節有個專業名詞解釋，而這篇解釋需要用到整篇文章來解釋，而將這篇獨立article包覆的文章貼於section包覆的內容中，但即便拿掉也不影響閱讀
※以上為個人淺見，有更明白的可以給予留言
aside側欄
一般這個區塊跟內文無關，通常是在左右兩側，增添廣告、分類、作者資訊、聯絡表單、推薦文章等之類的區塊，但不一定是要在側邊才能使用
footer頁尾
一個網頁的結尾，大多用於網站的連絡資訊，作者資訊，隱私權政策等。如果不是放在body，則可以表示為某個區塊的結尾，一篇段落的結尾，一個表格中的最後一行
figure
他是一個完整的區塊，是主要內容的一部分，通常用於包覆圖片、影音檔、圖表等，而且一個重要的定義在於，他是可以任意移動，且不影響整體內容的表達，所以並不是每張圖片都要包覆figure
| nav | 用於網頁的導覽列 |
| header | 一個區塊的標題或於網頁頭部 |
| article | 具有獨立性的區塊，內容與擺放位置無關，通常用於整篇完整文章 |
| section | 與上下文密切相關的區塊，通常用於章節 |
| aside | 與周圍無關的區塊，其內容不影響主文，通常放廣告、分類、最新文章 |
| footer | 放置區塊的底部或於網頁底部 |
| figure | 放置與某些句子相關的圖片、影片、表格 |