【自學程式】什麼是HTML標籤？初學網頁開法必備的四個HTML標籤
HTML一種建立網頁架構的程式語言，對於初學程式的人來說，HTML是非常好上手的。
它沒有不像是CSS及JavaScript，沒有複雜的邏輯，只要更改程式碼，馬上就可以透過瀏覽器或是模擬器將結果顯示出來。
由於結果會跟著瀏覽器顯示出來，相較於其他程式語言，HTML不會很抽象難懂，就算寫錯了，也非常好透過瀏覽器除錯。
什麼是HTML標籤？
每一種程式語言，都會有自己獨特的語法（syntax），藉由熟悉程式的語法我們可以跟不同的載具、軟體及其他程式語言做溝通。
而HTML的語法，主要是由HTML標籤（HTML Tag）所組成，一個標籤通常會由一組小括弧<>及在小括弧裡頭放入一小段語意單字。
通常標籤都是成對的出現，只要將要呈現在網站上的文字內容，用起始標籤（Opening Tag）及結尾標籤（Closing Tag）包起來，通常結尾標籤會比起始標籤多了一個「/」符號作為區分。
舉例來說，如果我想要建立一個標題我會（請點開程式碼閱讀）：
在範例中，我使用了<h1>標籤及其結尾標籤</h1>，並把我想要的內容放到中間，一個段落就可以很簡單的透過HTML建立出來了。
最常用的這四種標籤
在還沒有打開一個網頁前，我們幾乎可以預測到裡面可能會有怎麼樣的內容，像是宣傳的圖片、文章、文章的標題、文章的段落等，其實這些常見的網頁內容，都可以透過HTML標籤建立出來。
以下我將舉四個常見的HTML標籤做示範，他們分別是：
- <h1>
- <p>
- <a>
- <img>
使用<h1>建立網頁標題
建立網站的內容，就跟寫作一樣，需要有起承轉合，也需要能幫助讀者釐清閱讀內容的「標題」。
在HTML中，有一系列專門建立標題的HTML標籤，他們通常以h開頭，從文字大小由大至小分別為<h1><h2><h3><h4><h5><h6>
在建立一個標題時，我們可以使用該標籤的起始標籤及結尾標籤將文字包住，就可以建立出我們想要大小的標題了。
使用<p>建立網頁段落
建立好標題後，我們可以使用<p>標籤來建立文章段落，一組<p></p>就代表完整的一個段落，如果想要另起新的段落的話，我們就會使用第二組的<p></p>標籤：
使用<a>建立超連結
說完了<h1>及<p>標籤，大家現在對於HTML標籤就有了初步的認識，但要靠著這兩個標籤就想要排版出一段文章是不可能，所以接下來我就要介紹另外一個常常在網頁中看到的HTML標籤：a連結。
<a>連結與<h1>及<p>標籤一樣，都是成對的出現，並在其中放入我們想要的內容，但我們常見的超連結，除了會顯示連結的名稱外，點擊後來會連到其他網頁，這是怎麼做到的呢？
透過程式碼，我們可以看到<a>標籤與<h1>及<p>標籤有些不同，在<a>起始標籤的部分多了一段href="www.google.com"的文字。
在這裡只要先知道，在href=” ”的引號中，填入我們想要連結的網址，並一樣將顯呈現的文字內容填入成對的標籤內，就可以打造出超連結的效果。
通常我們並不會單一個<a>標籤自己存在使用，而是有可能與<p>段落混用，在一些特定的文字上加入連結，創造一些行銷的網頁效果。
從範例程式碼當中，我們可以了解到HTML標籤是可以被堆疊的，在一組標籤中，還可以建立出例外一組標籤，但使用時必須注意，這些標籤必須成對出現，不然就會出錯。
使用<img>建立圖片
學習<a>連結標籤後，我們接著要了解一個少數在HTML這個語言中，不成對的HTML標籤<img>。
透過<img>標籤我們可以很輕鬆的建立出一張圖片，從範例中我們可以看到，它只需要自己一個獨立標籤就能創造出效果，而不需要結尾標籤。
<img>除了是不成對的標籤外，他也有與文字標籤或是<a>標籤不同的屬性，分別為<src>及<alt>，兩個的意思分別為sourcs及alternative description，代表著圖片的來源及替代敘述。
我們可以在src=” ”中填入圖片網址，或是圖片在本機電腦的位置，就可以在瀏覽器當中呈現圖片了。
而alt=” ”的作用在於，圖片有時候可能會因為各種原因，像是網路不好、圖片連結失效而導致圖片失效，這時候在alt=” ”中填入替代文字，就可以在文字失效時帶入替代圖片出現的文字。
另外一個alt的作用在於，世界上有許多因視障而不良於使用網站的用戶，這些用戶可以使用特別的軟體，將網站內的內容讀出來，但因為圖片並不是文字，沒有辦法被讀取到，我們就必須加上alt裡的替代文字，創造無障礙的網站環境。
在初學網頁開發時，很多人都會偷懶不填alt裡的值，但其實這是網頁開發的大忌，因為沒有人可以完全保證這張圖片可以被另外一端的使用者看到，甚至可能會帶有歧視視障者的意味。
在今天章節當中，主要是要讓大家對於HTML標籤有初步的認識，後續會跟大家分享更多有關HTML標籤的基礎知識，請大家敬請期待！
關於網頁技術的問題，歡迎你下方留言跟我討論與交流：）
希望今天的文章有幫助到正在閱讀的你，如果你喜歡我的文章的話，可以留下你的愛心或是收藏我的文章，也或者可以點選「贊助」，你的一杯咖啡絕對是我持續寫下去的動力！或是透過拍拍手，用你小小的行動支持我的創作！
我是Vivian，我們下次見。
也許你會對這個有興趣：
關於我：
2019年從英文系畢業，2021下定決心開啟轉職工程師的新生活，相信不斷學習會有成長的一天。
｜Instagram: Vivian Yeh｜vivian_enlife
｜聯絡我：vivian.enlife@gmail.com
442會員
102內容數
為了追求可以窩在座位上、可以心無旁騖思考問題、座位可以亂七八糟沒關係、不需要到處哈腰點頭跑客戶，不用腳踩十公分、連妝都可以不用化的職場人生，文組少女毅然決然踏上RD的養成日常。
留言
留言分享你的想法！
你可能也想看
Google News 追蹤
靈感用盡、鍵盤不再響，盯著喜歡、分享、留言的數字，心跳跟著小鈴鐺七上八下⋯⋯vocus 2025 年 4 月限定新商品，要為創作者打氣！
🚨「創作者打氣包」 最懂創作者的vocus，為創作者打造
✨ 打氣包，包什麼？！四件道具挺創作者
一、【打氣復活卷】
專屬你的打氣小語，成功登記免費
全新 vocus 挑戰活動「方格人氣王」來啦～四大挑戰任你選，留言 / 愛心 / 瀏覽數大 PK，還有新手專屬挑戰！無論你是 vocus 上活躍創作者或剛加入的新手，都有機會被更多人看見，獲得站上版位曝光＆豐富獎勵！🏆
1. HTML 基礎：結構化內容
HTML（超文本標記語言）是用來描述網頁內容結構的語言。HTML 的核心由標籤（tags）組成，用於定義網頁的不同部分。
HTML 結構
HTML 的基本結構如下：
<!DOCTYPE html>
<html lang="zh-Hant">
<head>
本章節介紹了HTML中常用的文本和列表標籤。文本標籤包括段落、換行、水平線、預格式化、引用、粗體和斜體等。列表標籤則包括無序列表和有序列表，以及列表項。這些標籤用於結構化和格式化HTML文檔，使內容更具可讀性和組織性。章節還提供了各種標籤的使用示例，包括嵌套列表的展示。
在這個章節中，我們介紹了HTML的基本概念，包括其作為結構化標記語言的特性、應用領域，以及主要使用者。這些知識為後續的深入學習和實踐奠定了基礎，幫助讀者了解HTML在現代網頁開發中的重要性。
要如何利用 HTML 標籤來增加網頁的結構性呢？HTML 標籤提供了 Google 爬蟲更多有用的資訊，讓爬蟲在爬行網站時可以更輕鬆且正確地分析網頁內容。本文將為你介紹 HTML 對於 SEO 的重要性以及 10 個常見的 HTML 語法。｜SEO
HTML 是什麼？
超文本標記語言（Hyper
在當今這個數位化的時代，網頁無處不在，我們每天都在使用互聯網瀏覽網頁，查找資訊、分享內容、購物等等。然而，網頁的背後是什麼？為什麼網頁能夠呈現出如此多元化的內容？
想要自學 HTML 嗎？HTML 是一個相對簡單的標記語言，適合初學者。透過免費資源和互動平臺，你可以輕鬆地學習 HTML，並逐步提高技能。除了 HTML，你還可以瞭解免費網頁設計軟體，如 VS Code 和 Sublime Text。加油吧！
本文介紹瞭如何寫 HTML 標籤，製作一個簡單的自我介紹網頁。透過介紹寫標籤的實例，讓讀者能夠更瞭解如何在 HTML 中使用不同的標籤。
HTML 標籤是網頁內容的基礎，透過學習不同的標籤，你可以設計出各式各樣的內容。本文介紹了各種基本的標籤，如標題、段落、修飾樣式、超連結以及區塊等，讓你對 HTML 標籤有更深入的瞭解。
人們對於學習HTML的興趣持續增長，本篇文章將解析HTML的架構、標籤、排序方式、標籤屬性和標籤結構解析的相關課程，為讀者提供全方位的學習體驗。
靈感用盡、鍵盤不再響，盯著喜歡、分享、留言的數字，心跳跟著小鈴鐺七上八下⋯⋯vocus 2025 年 4 月限定新商品，要為創作者打氣！
🚨「創作者打氣包」 最懂創作者的vocus，為創作者打造
✨ 打氣包，包什麼？！四件道具挺創作者
一、【打氣復活卷】
專屬你的打氣小語，成功登記免費
全新 vocus 挑戰活動「方格人氣王」來啦～四大挑戰任你選，留言 / 愛心 / 瀏覽數大 PK，還有新手專屬挑戰！無論你是 vocus 上活躍創作者或剛加入的新手，都有機會被更多人看見，獲得站上版位曝光＆豐富獎勵！🏆
1. HTML 基礎：結構化內容
HTML（超文本標記語言）是用來描述網頁內容結構的語言。HTML 的核心由標籤（tags）組成，用於定義網頁的不同部分。
HTML 結構
HTML 的基本結構如下：
<!DOCTYPE html>
<html lang="zh-Hant">
<head>
本章節介紹了HTML中常用的文本和列表標籤。文本標籤包括段落、換行、水平線、預格式化、引用、粗體和斜體等。列表標籤則包括無序列表和有序列表，以及列表項。這些標籤用於結構化和格式化HTML文檔，使內容更具可讀性和組織性。章節還提供了各種標籤的使用示例，包括嵌套列表的展示。
在這個章節中，我們介紹了HTML的基本概念，包括其作為結構化標記語言的特性、應用領域，以及主要使用者。這些知識為後續的深入學習和實踐奠定了基礎，幫助讀者了解HTML在現代網頁開發中的重要性。
要如何利用 HTML 標籤來增加網頁的結構性呢？HTML 標籤提供了 Google 爬蟲更多有用的資訊，讓爬蟲在爬行網站時可以更輕鬆且正確地分析網頁內容。本文將為你介紹 HTML 對於 SEO 的重要性以及 10 個常見的 HTML 語法。｜SEO
HTML 是什麼？
超文本標記語言（Hyper
在當今這個數位化的時代，網頁無處不在，我們每天都在使用互聯網瀏覽網頁，查找資訊、分享內容、購物等等。然而，網頁的背後是什麼？為什麼網頁能夠呈現出如此多元化的內容？
想要自學 HTML 嗎？HTML 是一個相對簡單的標記語言，適合初學者。透過免費資源和互動平臺，你可以輕鬆地學習 HTML，並逐步提高技能。除了 HTML，你還可以瞭解免費網頁設計軟體，如 VS Code 和 Sublime Text。加油吧！
本文介紹瞭如何寫 HTML 標籤，製作一個簡單的自我介紹網頁。透過介紹寫標籤的實例，讓讀者能夠更瞭解如何在 HTML 中使用不同的標籤。
HTML 標籤是網頁內容的基礎，透過學習不同的標籤，你可以設計出各式各樣的內容。本文介紹了各種基本的標籤，如標題、段落、修飾樣式、超連結以及區塊等，讓你對 HTML 標籤有更深入的瞭解。
人們對於學習HTML的興趣持續增長，本篇文章將解析HTML的架構、標籤、排序方式、標籤屬性和標籤結構解析的相關課程，為讀者提供全方位的學習體驗。