--- tags: HTML, 六角筆記王 title: HTML - 標籤元素 --- # 標籤元素 網頁基本上是由許多標籤元素所組成，可以按下鍵盤上的 F12，進入開發者模式或者滑鼠右鍵點選檢查，在頁籤選擇 Elements，可以看到有許多以 `<` 開頭並以`>` 結尾的標籤，像這樣以 `< >` 包起來的就是標籤元素。其中又以無語義的區塊元素 `<div></div>` 佔大多數。 ## 語意標籤 若大家曾使用 Office Word 來排版的話，通常會設定一個大標題，然後是次要標題，將這個概念轉化成標籤元素的話，就是 `<h1></h1>` 與 `<h2></h2>`。除了標題標籤，還有其他有語意的標籤元素，像是: - `<p></p>`，代表文字段落 - `<a></a>`，代表超連結 - `<ul> <li></li> </ul>`，代表無序清單 而這些標籤元素除了需要 `< >` 包起來之外，還需要一個結尾標籤 `</標籤名稱>`，才是完整的一組標籤元素。 ## 空元素 上述提到標籤需要前後對應，不過有部分元素，是沒有獨立內容的，也因此它們沒有結尾標籤，像是: - `<img>` - `<input>` ## 標籤屬性 在每一個標籤元素中，都有它們的預設屬性，像是: ```htmlembedded= <!-- 圖片連結 --> <img src="https://..." alt="圖片"> <!-- 超連結網址 --> <a href="https://google.com.tw">Google</a> ``` 屬性格式 - `屬性名稱=""` - 屬性與屬性必須空 1 格 ## 標籤結構 標籤元素是一個巢狀結構，由最上層的 `<html></html>` 以樹狀圖開始往下分布，若以編輯器橫向來看的話，會由最外層向內包覆，通常會空 2 格來做排版。 ```htmlembedded= <html> <head> <title>頁面名稱</title> </head> <body> <h1>我是標題</h1> </body> </html> ``` --- 在 HTML 5 中，有著更多的語意標籤，除了增加可維護性，對於 SEO ( Search Engine Optimization ) 也有好的效果。 ## 參考來源 > 1. [六角學院 - 認識 HTML 標籤，設計具有語意化的網頁結構](https://courses.hexschool.com/courses/html/lectures/11948353) > 2. [Fooish 程式技術 - 什麼是 HTML 標籤](https://www.fooish.com/html/tag.html)