HTML 由標籤組成，用標籤來標註不同內容的表現與用圖。標籤由一對角括號，標籤名與多個屬性名/值組成：
除了單獨存在的標籤外，也有成對的標籤，方便我們標示網頁區塊的範圍。成對的結尾標籤在名稱前需加上斜線 "/" 用以跟開始標籤做區隔：
標籤可以內含其它標籤，形成層層相疊的結構，例如：
標籤名稱決定了該標籤的功能，通常為該功能的縮寫。例如，斷行 (break) 標籤：
此外，亦有做為註解用途的特殊寫法如下：
以下簡述常用標籤與他們的用途。
| 標籤名 | 類型 | 用途與範例 |
|---|---|---|
| html | 成對 | 網頁最外層必須要有的標籤。 |
| head | 成對 | 存放網頁的資訊、樣式等的地方。 |
| body | 成對 | 網頁的內容。 |
| a | 成對 | 超連結。屬性 "href" 指定連結的網址 範例： <a href="http://www.hinet.net"> </a> |
| br | 單獨 | 斷行。 範例： <br> |
| h1 | 成對 | 標題(最大)。 範例： <h1> Headline <h1> |
| h2 | 成對 | 標題(次大)。 範例： <h2> Headline <h2> |
| h3 | 成對 | 標題(第三)。 範例： <h3> Headline <h3> |
| h4 | 成對 | 標題(第四)。 範例： <h4> Headline <h4> |
| h5 | 成對 | 標題(第五)。 範例： <h5> Headline <h5> |
| h6 | 成對 | 標題(第六)。 範例： <h6> Headline <h6> |
| ol | 成對 | 有序列表。裡面需使用 <li> 列表項目標籤 範例： <ol> <li> ... </li> </ol> |
| ul | 成對 | 無序列表。裡面需使用 <li> 列表項目標籤 範例： <ul> <li> ... </li> </ul> |
| li | 成對 | 列表中的項目 ( list item ) |
| hr | 單獨 | 分格線。 範例： <hr> |
| p | 成對 | 一個文字段落，前後會自動斷行。 範例： <p> Hello </p> |
| span | 成對 | 一段文字。 範例： <span> Hello </span> |
| div | 成對 | 區塊標籤，前後會自動斷行。 範例： <div> Hello </div> |
| i | 成對 | 一段文字，預設套用斜體樣式 |
| b | 成對 | 一段文字，預設套用粗體樣式 |
| u | 成對 | 一段文字，預設加入底線 |
| del | 成對 | 一段文字，預設加入刪除線 |
| big | 成對 | 一段文字，預設大一號字體 |
| small | 成對 | 一段文字，預設小一號字體 |
| img | 單獨 | 圖片標籤。使用 "img" 屬性指定圖片網址。 範例： <img src="https://i.imgur.com/OM1jAhs.gif">
|
| table | 成對 | 製作表格用。以 <table>, <tr>, <td> 三組標籤組成 範例： <table>
<tr>
<td> ... </td>
<td> ... </td>
</tr>
<tr>
<td> ... </td>
<td> ... </td>
</tr>
</table>
|
| pre | 成對 | 一段文字，但保留其中的空白與換行。 範例： <pre> Hello </pre> |
| script | 成對 | 載入程式碼。使用 "script" 屬性指定源碼網址，或直接在標籤內輸入程式碼。 範例： <script src="http://path-to-your-js-file">
</script>
<script>
alert("hello world!");
</script>
|
| link | 單獨 | 引用外部資源。一種常見的用途是載入 CSS 檔案： <link
rel="stylesheet"
type="text/css"
href="http://path-to-your-css"
>
|
| style | 成對 | 載入樣式碼。直接在標籤內輸入樣式表。範例： <style type="text/css">
p { color: red; }
</style> |
| title | 成對 | 位於 head 標籤中，用於指定網頁標題。 範例： <title> 課程介紹 </title> |
| meta | 單獨 | 位於 head 標籤中，用於記錄各種資訊，例如編碼或摘要文字。 範例： <meta charset="utf-8"> |
在 HTML 中有些屬性是所有標籤通用的：
| 屬性 | 用圖 |
|---|---|
| id | 自訂義的、唯一的代碼。可用於程式操作、樣式設定等。 |
| class | 自定義的標籤分類。可用空白分隔設定多組類別。主要運用在樣式設定上。 |
| style | 設定標籤的樣式 |
在網頁中使用顏色時，可以使用對應的英文字來做設定，例如 red、black 等等。若需要更精細的控制顏色，可以使用 16 進位式的網頁色彩編碼：
其中，RR/R, GG/G, BB/B 各為一個介於 0 ~ ff 之間的 16 進位數字，分別代表了紅、綠、藍三原色的成份。以下列出幾種常用的數值：
| 代碼 | 代表的顏色 | 範例 |
|---|---|---|
| #000000 | 黑色 | |
| #ffffff | 白色 | |
| #999999 | 灰色 | |
| #ff0000 | 紅色 | |
| #fedcba | 亮橘色 |
如果不曉得用什麼顏色的話，可以點擊下面這個輸入框來選取顏色：
顏色除了使用 hex 碼與名稱以外，亦可以使用下列形式：
其中 R / G / B 各別對應到 0 ~ 255 之間的值，代表紅、綠、藍光的強度； A 則為介於 0 ~ 1 之間、表示透明度的值。例如下例表示半透明的紫色：
如常見標籤列表中所列，我們可以使用 table 標籤製作表格。由於表格同時有行、列兩種方向，在設計上我們先寫出列 ( row, 標籤名為 tr ) ，再寫出行 ( column, 標籤名為 td )，再加上最外層的 table 標籤，一共會有三層標籤：
你可以使用 border 屬性為表格加上邊框，例如：
| A | B |
| C | D |
若需要合併儲存格，可以使用 rowspan 與 colspan 屬性 ( 分別對應到列與行 ) 指定儲存格佔的大小。
| A | B | |
| C | D | |
| E | F | |
由於 HTML 使用角括號 > 與 < 做控制字元，若要在一般文章中顯示角括號，需要使用特殊語法。我們利用 and 符號 "&" 做開頭，接上各種名稱與分號來表示特殊符號，例如：
| 代碼 | 代表的符號 |
|---|---|
< | 角括號 / 小於 ( < ) |
> | 角括號 / 大於 ( > ) |
& | and 符號本身 ( & ) |
| 空白 ( ) |
© | 著作權符號 ( © ) |
除了文字外，也可用電腦內碼來輸入，例如 > 即代表「>」符號。若在數字前加上 x 則可使用 16 進位制輸入內碼。以下為一些不同的例子：
| 16 進位制 | 10 進位制 | 代表符號 |
|---|---|---|
| げ | げ | げ |
| 😀 | 😀 | 😀 |
| 👅 | 👅 | 👅 |
要注意並非所有的字型都含括完整的符號，使用前可以先測試一下。你可以在 HTML Codes Table 找到一些基本的內碼對應，或者在 Unicode 網站搜尋想用的符號。
HTML 實作網頁通常包含以下基本架構：
下例為一個包含基本元件的網頁：
使用 meta 標籤可以協助網頁提供額外資訊給其它網站，如臉書。臉書運用 meta 標籤定義了一組 Open Graph 協定，讓網站可以依據其協定定義各種額外的資訊，以提供校調過的內容在如臉書等社交網站上呈現。
基本使用方式為：
以下為常用的屬性：
| 屬性名 | 用途 |
|---|---|
| og:url | 此資源的正式網址 |
| og:title | 標題 |
| og:description | 簡介 |
| og:locale | 語系, 例如: zh_TW |
| og:image | 若以圖卡形式呈現時，可以利用的縮圖 |
| og:image:type | 縮圖的檔案類型 ( MIME TYPE )，例如 image/jpeg |
| og:image:width | 縮圖的寬度 |
| og:image:height | 縮圖的高度 |
| og:type | 資源的類型，一般網站為 "website" |
New Media Techniques and Design