iT邦幫忙

2022 iThome 鐵人賽

DAY 11
0
自我挑戰組

網頁開發(html.css)系列 第 11

Day11:網頁開發學習之路-HTML Semantic Elements

  • 分享至 

  • xImage
  •  

Semantic Elements是在HTML5中提供的語意標籤
包括 <header><nav><main><footer><mark><time> 等等。

編寫語義標記意味著了解內容的層次結構以及用戶和機器將如何閱讀它
使用Semantic Elements可以讓搜尋引擎或是其他軟體工具
更清楚的了解網頁中每個區塊的設計目的

  • <header> - 網頁的標頭,通常放置網站標題,此元素為部分、文章或整個網頁提供介紹性內容。
  • <nav> — 網頁的選單、導覽都放在 <nav> 標記中。
  • <main> — 頁面的主體應該放在 <main> 標記中。每頁應該只有一個。
  • <article> - 此元素表示網頁上的獨立文章。
  • <section> <section> 元素是一種將相似主題的附近內容組合在一起的方式。
  • <aside> — 網頁的側欄、附加內容。
  • <footer> <footer> 元素位於頁面或部分的底部,可能包括聯繫信息和一些網站導航。

從這裡我們可以看到,使用Semantic Elements,可以讓你的網頁原始碼
很清楚的顯示你想表達的內容,也很明確告知看的人這個區塊的用途
即使是不同的開發人員也很容易維護而不會造成任何混亂
也能提升SEO(Search Engine Optimization),讓你的網頁在搜尋引擎中更容易被找到
Semantic Elements

參考資料:
w3schools
medium


上一篇
Day10:網頁開發學習之路-icon與img
下一篇
Day12:網頁開發學習之路-HTML id與class
系列文
網頁開發(html.css)30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言