常見HTML語法
下面這篇文章是我從學習 HTML5 時整理出來的筆記，想和各位初學者分享我的入門過程和心得。文中會介紹 HTML 文件的基本結構、常用標籤以及我的個人使用經驗，希望能用平易近人的語言，讓大家覺得學習網頁設計並不那麼遙不可及。
我記得剛開始學習 HTML 時，也曾覺得那些標籤、屬性以及整體結構頗為複雜，但隨著一點一滴的練習後，發現每個標籤其實都是工具箱裡的一個小工具，用得好就能拼湊出屬於自己的作品。這裡我嘗試把常用的 HTML5 標籤整理出來，從整份文件的最基礎部分到具體如何排版，再到嵌入多媒體內容，力求把每一個細節都講清楚。
HTML 文件的基本骨架
無論你製作任何網頁，第一步都是建立一份正確的 HTML 文件。記得在文檔最頂部一定要加入文件類型宣告。這行代碼告訴瀏覽器，我們使用的是 HTML5 的標準語法。基本範例如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>我的第一個網頁</title>
</head>
<body>
<h1>歡迎來到 HTML 世界</h1>
<p>這是一個展示基本 HTML 結構的段落。</p>
</body>
</html>
在這裡：
<!DOCTYPE html>告訴瀏覽器這是一份 HTML5 文件；<html>作為整個網頁的根元素；<head>裡面放置網頁的元數據，例如設定字符集<meta charset="UTF-8">、網頁標題<title>以及連結外部樣式或其他資源；<body>則是實際呈現給使用者看的內容區域。
節奏感而不失自然排版
學習 HTML 的其中一個樂趣，就是認識如何將內容以有層次的方式排版出來。記得我第一次學習時，看到有 div 和 span 區分區塊與行內內容，真的是恍然大悟。現在我來談談常見的文字、標題與區塊元素。
文字和標題
<h1>到<h6>：用來定義標題，大致層級依重要性依序排列。例如：
<h1>網站大標題</h1> <p>這裡是簡單的段落介紹。</p><p>：代表一段段落，用來放置一段完整的敘述文字。我喜歡用這個標籤來表達自己的想法和故事，因為它最能自然呈現書寫感。
<div>與<span>：<div>是一個通用的區塊容器，用於分隔頁面的不同部分；<span>則是行內元素，不會自動換行，常用於局部修飾文字內容。
比如這樣寫：
<div> <p>這是一個包裹在 div 裡的段落。</p> <p>如果想要在同一行強調某些字詞，可以用 <span style="color: red;">span 標籤</span>。</p> </div>
較為自然的排版技巧
除了段落與標題之外，還有一些排版的小技巧能讓你的內容看起來更具結構感，但又不會讓人覺得過於教科書式。以下介紹幾個常用標籤：
<blockquote>：用於引用他人的話，或是在文章中引用長段內容，瀏覽器往往會自動加上縮排。<pre>：當你需要保留格式空格和換行時可以用它，比如展示程式碼片段或格式化文字。
另外，如果希望在頁面上劃分不同的部分，儘管不用刻意製作完美的章節標題，但適度的分隔線也會讓頁面看起來更有節奏感：
<hr>
這個標籤常常被我用來分隔不同的小段落和主題，保持內容層次分明又不顯得生硬。
詳盡說明各大類 HTML 標籤
以下將依據常見的用途，把 HTML5 標籤分成幾大類，順便分享一些我在編寫網頁時的個人見解。
一、文件結構與元數據
<!DOCTYPE html>宣告文件類型，是網頁的第一步；
<html>根元素，所有其他元素都放在它裡面；
<head>儲存所有不直接顯示在頁面上的資訊，如作者、描述或是關鍵詞；
<meta>可設定字符編碼（如
<meta charset="UTF-8">）、作者或其他重要資訊；<title>設定瀏覽器標籤上顯示的標題；
<link>與<style>分別用於連結外部資源以及在頁面中直接嵌入 CSS。
二、語意化區塊
現代網頁設計強調內容語意，也就是讓程式碼本身就能表達內容含義。這樣不僅方便同事維護，也有助於 SEO 以及輔助閱讀設備：
<header>：頁面的最上層部分，常用於放置網站標誌與主要導航。
<nav>：表示導覽連結區，讓使用者快速找到所需內容。
<main>：一個頁面中最核心的內容部分，通常每個頁面只會出現一次。
<section>：分隔出獨立主題的內容區塊；
<article>：用於獨立完整的內容單元，例如新聞報導、部落格文章等；
<aside>：補充主內容的側邊欄資訊，例如推薦內容或相關文章；
<footer>：頁腳部分，通常用來放版權、聯絡資訊。
<figure>與<figcaption>：搭配使用來展示圖片或插圖，以及圖片的解釋文字；
<time>：用來標示日期或時間，有助於搜尋引擎準確識別內容時效性。
三、分組與文字結構
讓內容看起來條理分明的方法之一就是使用適合的標籤來組織文字和段落：
<div>：一個通用的區塊容器，用於分組一組內容，但不具備特定語意。
<p>：用來標示一段文字，最常用的排版元素；
<h1>到<h6>：分層標題，從最重要的
<h1>到相對次要的<h6>；<blockquote>：用來引用長文本或他人的話；
<pre>：保留格式不變，通常用於展示程式碼或原始文本；
<hr>與<br>：前者用於劃分主題，後者用於必要時的手動換行。
四、列表與定義
在處理需要列出多項資料或解釋相關定義時，以下標籤是非常有幫助的：
<ul>與<ol>：分別用於無序列表和有序列表，每一項標記則使用
<li>；<dl>、<dt>與<dd>：當需要將術語與定義配對時，這組標籤可以派上用場。
五、文字內聯與強調
細部的語意化元素能夠讓網頁看起來更專業，也更便於傳遞正確的信息：
<a>：超連結，無論是跳轉到其他頁面或外部網址，都離不開它；
<em>與<strong>：分別用來標示強調（通常呈現斜體）和非常重要的內容（一般加粗）；
<span>：一個沒有語意的內聯容器，適合需要添加特定樣式的局部文字；
<abbr>：用於說明縮略語，往往會顯示完整內容作為提示；
<cite>：用來引用作品名稱、書籍或文章的標題；
<code>與<var>：分別用於展示程式碼片段或公式中的變數；
<small>：較小字體的表示方式，用來呈現次要資訊；
<sup>與<sub>：分別用於上標和下標，比如在數學公式中常見；
<mark>：用來標記特別重要或需強調的文字；
<q>：內聯引用，瀏覽器會自動加上引號；
<data>：用於將文本內容與機器可讀的數據對應起來；
<ruby>、<rt>與<rp>：常用於注音標示，對於需要顯示中文拼音或其他語言註音特別有用；
<bdi>與<bdo>：這兩個標籤幫助控制混合語系時文字的排版方向。
六、媒體與圖形
網頁不僅僅是文字的堆砌，插入圖片、音訊和視頻能夠讓網頁更生動：
<img>：最基礎的圖片標籤，記得一定要加入
alt文字，這對於 SEO 以及無障礙瀏覽都相當重要；<audio>與<video>：分別用來嵌入音訊和視頻內容，通常搭配
<source>使用；例子：
<audio controls> <source src="audiofile.mp3" type="audio/mpeg"> 您的瀏覽器不支援音訊播放。 </audio><source>：為多媒體標籤指定文件來源；
<track>：當需要添加字幕或描述時使用；
<canvas>：一個可以用來繪圖、製作遊戲或資料視覺化的區域；
<svg>：用於嵌入向量圖形，非常適合需縮放的圖像；
<embed>與<object>：用來嵌入其他應用程序或互動內容，像是 PDF 文件等。
七、表單與互動元素
網頁中的互動部分就是靠表單來實現，而 HTML5 提供了許多方便的標籤，使我們能更輕鬆地建立使用者輸入區域：
<form>：表單的容器，所有輸入元素都放在其中；
<input>：可設定不同屬性來接收文字、密碼、電子郵件、數字等多種形式的數據；
<textarea>：當你需要收集多行文字輸入時，它是最理想的選擇；
<button>：除了用於提交表單外，也常作一般按鈕操作；
<select>與<option>：為用戶提供下拉選單，使選擇更有組織；
<label>：清楚標示每個輸入框的用途，增加可用性；
<fieldset>與<legend>：當表單資料較多時，這兩個標籤有助於分組、說明不同輸入區段；
<datalist>：為
<input>提供自動完成功能的預設選項；<output>：顯示計算或動態交互的結果；
<progress>與<meter>：分別用來顯示工作進度或數值度量。
八、腳本與替代內容
最後，雖然這次的重點是 HTML 標籤，但也不能忽略讓網頁活起來的 JavaScript 部分：
<script>：可以在網頁中嵌入或引用外部 JavaScript 程式碼；
<noscript>：當使用者的瀏覽器不支援 JavaScript 時，這裡可以放置替代訊息。
小結與心得
從最基礎的文件宣告到各種類型標籤的應用，其實每個元素都像是一個小工具，正是這些元素讓網頁變得有條理且充滿生命力。在我學習 HTML 的過程中，也發現每次重溫這些基礎知識，都能讓我發現新的應用方式或排版的靈感。
在實際寫網頁時，我通常會先架構好基本的骨架，再根據內容逐步加入語意標籤和多媒體，這樣能讓整個頁面從外到內都有層次感，也方便後續添加 CSS 讓它更有個性。對我來說，編寫 HTML 就像在搭建一座屬於自己的小房子，每一個標籤都代表一塊磚、一片瓦，最終組合成一個溫暖又獨特的家。
希望這篇筆記能幫助你在認識 HTML 時更得心應手，也歡迎大家在實作過程中發掘更多屬於自己的技巧和風格。網頁設計不僅僅是技術活，更是一種表達自我和創造美好的方式。加油，踏出學習的第一步，你會發現這個過程充滿驚喜和成就感。
