Skip to content

Latest commit

 

History

History
57 lines (40 loc) · 2.5 KB

01.md

File metadata and controls

57 lines (40 loc) · 2.5 KB
Raw

Semantic Tag

HTML5中新增了語意化標籤 (Semantic Elements)，目的是為了讓標籤 (Tag )更具意義，以加強文件的結構化，讓搜尋引擎更清楚了解。

使用HTML5語意化標籤的優點如下：

  • 可以快速抓到網頁架構和每個區塊的位置
  • 對於SEO優化有幫助

語意化標籤的使用

取代 div 的 HTML5 區塊 flow

頁首標籤 <header>

<header> 標籤如果是在 <body> 內，它可以表示網頁的頁首，但如果位於 <article> 或 <section> 內，則可以表示文章或區塊內的首要區塊。

導覽列 <nav>

只要是在網站內的導航區塊，都適合使用 <nav> 標籤，像是主選單、頁尾選單等。

主要區塊 <main>

用來放置頁面主要資訊的區塊，展現頁面內容的獨特性。每個頁面只能有一個 <main> 標籤，且理想狀態下，不能被放在 <nav> <article> <aside> <footer> <header> 內。

區塊或文章區塊 <article> <section>

過去需要建立一個區塊通常會使用 <div>，HTML5語意化標籤出現後，可以使用 <section> 搭配 <h1~h6> 的標題來呈現內容，而 <section> 內一些無明顯含義的區塊或為了排版目的的區塊則使用 <div> 來包。<article> 標籤近似 <section> 標籤，但 <article> 主要用於包覆文章。

側欄 <aside>

<aside> 語意算是跟主要區塊內容無關的區塊，也就是額外資訊，像是側邊欄、廣告、其他連結、推薦文章等都蠻適合使用的，不一定是側邊位置才能使用。

頁尾 <footer>

表示頁尾或表尾部分，使用方式同 <header>。

<time>

表示日期時間

<mark>

如黃色螢光筆的方式畫出重點，強調一小塊內容

<details>

描述文章的細節

<figure> <figcaption>

<figure> 用於圖像，<figcaption> 用於圖像標題

<hgroup>

當內容有主標題及次標題等多個標題的狀況下使用。

<cite>

引用其他文獻或作品(例如書籍、歌曲、電影、繪畫、雕塑等）的標題

Reference

  1. https://medium.com/@changru.studio/%E5%BF%AB%E9%80%9F%E4%BA%86%E8%A7%A3html%E8%AA%9E%E6%84%8F%E5%8C%96%E6%A8%99%E7%B1%A4-33dd8247d779
  2. https://medium.com/%E7%8B%97%E5%A5%B4%E5%B7%A5%E7%A8%8B%E5%B8%AB/7-%E5%80%8B%E4%BD%A0%E5%BF%85%E9%A0%88%E7%9F%A5%E9%81%93%E7%9A%84semantic-elements-ccc8bbad5d
  3. http://apolkingg8.logdown.com/posts/2014/02/04/note-of-semantic-html
tags: HTML Semantic