我的暑假日記
今天去了動物園,看到好多動物。最喜歡的是熊貓,牠們好可愛!
什麼是語意標籤?
語意標籤就是「有意義的標籤」,告訴瀏覽器「這是什麼」:
<div>- 只是一個盒子,沒有特別意義<article>- 這是一篇文章!有意義!<aside>- 這是側邊欄!有意義!
用語意標籤的好處:
- Google 搜尋引擎更懂你的網頁
- 視障朋友的朗讀軟體也能理解
- 程式碼更好讀、好維護
1. <article> - 文章
是什麼: 一篇完整的文章,像部落格文章、新聞報導。
怎麼用:
<article>
<h2>我的暑假日記</h2>
<p>今天去了動物園,看到好多動物...</p>
</article>
小提醒: 想像這是一篇可以「單獨拿出來看」的內容,就用
<article>!
2. <aside> - 側邊欄/補充說明
是什麼: 「旁邊的額外資訊」,像側邊欄、提示框。
怎麼用:
<article>
<h2>如何種花</h2>
<p>第一步是準備土壤...</p>
<aside>
💡 小提示:記得每天澆水喔!
</aside>
</article>
如何種花
第一步是準備土壤,選擇適合的花盆...
3. <details> & <summary> - 可展開/收合區塊
是什麼: 點一下會「展開」,再點一下會「收起來」,像 FAQ 常見問題。
怎麼用:
<details>
<summary>什麼是 HTML?</summary>
<p>HTML 是網頁的骨架,用來搭建網頁結構。</p>
</details>
什麼是 HTML?
HTML 是網頁的骨架,用來搭建網頁結構。
什麼是 CSS?
CSS 是網頁的衣服,用來美化網頁樣式。
小提醒: 試試看點上面的問題,會自動展開/收合!
4. <mark> - 螢光筆標記
是什麼: 像用螢光筆畫重點,會有黃色背景。
怎麼用:
<p>考試重點:<mark>這題一定會考</mark>!</p>
考試重點:這題一定會考!
請記住:HTML 是網頁的骨架,CSS 是網頁的衣服。
5. <figure> & <figcaption> - 圖片+說明
是什麼: 把「圖片」和「圖片說明」包在一起。
怎麼用:
<figure>
<img src="cat.jpg" alt="小貓" width="300">
<figcaption>這是我家的小貓咪</figcaption>
</figure>
🐱 圖片範例
6. <blockquote> - 引用文字
是什麼: 引用別人說的話,會自動縮排。
怎麼用:
<blockquote>
<p>活到老,學到老。</p>
<footer>— 孔子</footer>
</blockquote>
活到老,學到老。
7. <time> - 時間/日期
是什麼: 標記「時間」或「日期」,讓搜尋引擎知道這是時間。
怎麼用:
<p>發布時間: <time datetime="2025-01-15">2025年1月15日</time></p>
發布時間:
活動時間: 下午3點
小提醒: datetime 是給電腦看的格式,裡面的文字是給人看的!
8. <address> - 聯絡資訊
是什麼: 放「聯絡方式」,像地址、電話、Email。
怎麼用:
<address>
聯絡我們:<br>
Email: hello@example.com<br>
電話: 02-1234-5678
</address>
聯絡我們:
Email: hello@example.com
電話: 02-1234-5678
地址: 台北市信義區信義路五段7號
Email: hello@example.com
電話: 02-1234-5678
地址: 台北市信義區信義路五段7號
9. <abbr> - 縮寫
是什麼: 標記「縮寫」,滑鼠移上去會顯示完整名稱。
怎麼用:
<p><abbr title="HyperText Markup Language">HTML</abbr> 是網頁的骨架。</p>
HTML 是網頁的骨架。
CSS 是網頁的衣服。
小提醒: 把滑鼠移到 HTML 和 CSS 上面,會顯示完整名稱!
10. <code> & <pre> - 程式碼
是什麼:
<code>- 行內的程式碼 (一小段)<pre>- 保留格式的程式碼 (多行)
怎麼用:
行內: 使用 <code>console.log()</code> 來輸出。
多行:
<pre>
<code>
function hello() {
console.log("哈囉!");
}
</code>
</pre>
行內程式碼: 使用 console.log() 來輸出。
多行程式碼:
function hello() {
console.log("哈囉!");
return true;
}完整範例:做一個部落格文章!
<article>
<h1>我的第一篇部落格</h1>
<p>發布時間: <time datetime="2025-01-15">2025年1月15日</time></p>
<p>今天學會了 <mark>HTML 語意標籤</mark>,超開心!</p>
<aside>
💡 小提示: 多用語意標籤,對 SEO 很有幫助!
</aside>
<blockquote>
<p>學習永遠不嫌晚。</p>
</blockquote>
<details>
<summary>什麼是語意標籤?</summary>
<p>就是有「意義」的標籤,讓網頁更有結構!</p>
</details>
<address>
聯絡作者: blog@example.com
</address>
</article>
我的第一篇部落格
發布時間:
今天學會了 HTML 語意標籤,超開心!
學習永遠不嫌晚。
什麼是語意標籤?
就是有「意義」的標籤,讓網頁更有結構!
快速小抄
<article>- 文章<aside>- 側邊欄/補充說明<details> <summary>- 可展開/收合<mark>- 螢光筆標記<figure> <figcaption>- 圖片+說明<blockquote>- 引用文字<time>- 時間/日期<address>- 聯絡資訊<abbr>- 縮寫<code> <pre>- 程式碼