---
# System prepended metadata

title: HTML - 標籤元素
tags: [' 六角筆記王', HTML]

---

---
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)

