語意 HTML
之前講及每一個 HTML 元素都有不同種類，我們可以使用元素標籤去記認每個元素的種類。在 HTML5 以前，一些 HTML 元素是用來表達格式的，如果你們在十多年前有上過電腦課，可能認識一些元素如 <b> 或 <i> 等，用來調較文字粗體或斜體的。
因為現代的 HTML 是基於語義而成，HTML 元素的定義更需要建於元素的用途跟內容架構。所以 HTML5 引入新的元素，如： <article> 或 <strong> 等，這些標籤名稱其他人一看就很容易明白那個元素內容的用途。
至於格式或視覺效果調節的工作，正如我在第一章提及，現在多由 CSS 樣式表處理。這篇章我會介紹更多的 HTML 元素，讓你瞭解每種元素的內容或架構上的內容，輕易明白跟善用不同種類的元素。
引指 HTML 元素
在介紹更多的 HTML 元素之前，讓我介紹一些用來引指 HTML 文件中不同元素位置的用語。
在範例 1，<div>
包含了另一個元素 <p>。
我們可以把 <div>
稱作 <p> 的父元素 (parent element)；
另一方面，<p>
就是 <div> 的子元素 (child element).
在範例 2，<main>
擁有 2 個子女 (children): <header>
和 <article>
。而 <header>
跟 <article>
是兄弟關係 (siblings)。
<main>
和 <article>
都是 <p>
的祖先 (ancestor)。
註解
HTML 檔案中可以設有註解，就如一段文件處理也可能需要輔助的註釋。這些註解不會被瀏覽器詮譯，所以網絡用戶是不能看見的。
你可以在 <!-- 和
-->
之間編寫註解。當你編寫長篇網頁時，一些註解可以為你加添參考和註釋，讓你下次編寫或轉達他人編寫時更為容易。
文字層面的元素
文字層面的元素是行內使用的。可能你在使用過一件文件處理軟體，如 Microsoft Word，你會把一些文字調到粗體或斜體。語意上，你就是要把這些文字內容作出強調或加以區別的記認。在 HTML 中，你可以把這些文字放進相關的行內元素中，這些內容可以是一句句子，也可以是句字內的文字。使用這些語意元素更可清楚表達你要區別當中文字的目的。
<br />
<br />
是一個單一標籤元素，加入後可以讓文字內容換行。
請留意，在 HTML 文件中，原始檔內的所有換行、縮排或連續空格都只會被瀏覽器視作單一空格。
當你需要更多空格時，你需要寫下
為一個空格；加入換行則需使用 <br /> 元素。
<strong>
<strong> 是用來強調當中行文間部分文字的重要性、嚴重性或逼切性。而瀏覽器一般會為這元素內容加以粗體，使文字更顯著地向讀者表達其重要性。
<em>
<em> 用作強調相關文字內容，但與其重要性不太有關聯。瀏覽器通常會為這元素的內容加以斜體。
<a>
<a>
透過指明href
的屬性值讓其內容加以超連結。而這個屬性值可以填寫絕對或參考 URI (在第一章講及)，用戶即可一按前往
而另一個屬性target可以讓你指明：
"_self"：現時網頁會轉往那個 URI；
"_blank"：URI 會在新分頁或新視窗開啟。
另外，如果設有download
屬性 (不需填寫值)，用戶則可以下載 URI 指定的檔案。
連結 (在同頁開啟): Dexterux 開發人員
連結 (在新頁面開啟): Dexterux 主頁
連結 (下載): 新月橋夜景
<span>
<span> 沒有任何意思，只是用作組合一些行內的文字。當日後你學習 CSS 或 JavaScript 時，就可以對局部文字作特別的視覺效果或設定互動功能。
組成內容的元素
接下來會簡介一些區塊元素。在簡報製作應用程式中，你可能需要設立文字方塊而組成簡報設計的結構。在網頁結構的道理也是相同，你需要這些區塊來建構不同的內容，而相關的視覺效果或大小位置則會在 CSS 中處理。
現些內容在不是句子中的文字，而是你需要有系統地組成的的內容，但這還沒到一個有意義層面上的結構。例如你可能會把一些句子組成一個段落，把部份內容放到側面，或組合不同的列點在列表之中。
<p>
<p> 就是把內容組成一個段落，這是在編寫網誌、文章、新聞等長篇文字時非常湊效。
<ol>, <ul>, <li>
<ol>
和 <ul>
分別是有序列表 (ordered list) 和無序列表 (unordered list)。
<li>
則是列點 (list items)，而你需要放置這些列點在<ol>
或 <ul>
元素當中。
列表就是一種格式，讓你透過數字或小點等前置文字，讓列點清晰表達。
<ol>
的預設格式是數字列點，而<ul>
的預設格式是小圓點列點。這都可以透過 CSS 改變的，我會在稍後的篇章提及。
- 下載 Emoji Viewer
- 開啟應用程式
- 瀏覽 Emoji
怎樣去製作適合夏天的飲品呢？以下是我的飲品食譜：
- 菠蘿肉 - 6 安士
- 椰子肉 - 3 安士
- 鮮奶 - 12 安士
<div>
就像<span> 一樣，<div> 也是沒有意思的。不過，這是一個區塊元素。比較行內的 <span>， <div> 的內容不會與他附近的元素有句字層面上的關聯。
<main> & 架構章節的元素
這些元素是用來標記網頁上的內容或篇幅架構。一個網頁通常有不同的部分，如導覽列、主要內容、註腳等。你可以用這些元素來架構你的網頁和有意義地分配不同部分。事實上<body> 亦是這架構元素之一，而一個 HTML 文件一定會有一個作為包括網頁的所有內容。
<main>
根據 W3C 的定義，<main> 是組成內容的元素，而一個 HTML 文件只需要一個<main> 元素，內裡包括網頁的主要內容。這個元素通常不會包括一些網站通用的用戶界面元素，如橫幅、搜尋工具、或網站導覽註腳等。
因為他包含了「主要內容」，他不可以包含在其它下層的分部元素中，如： <header>、 <nav>、 <article>、 <footer> 等等，稍後將會提及這些元素。
<header> / <h1>-<h6>
<header>
是用來作引導或導覽的，可以包含不同的元素或文字內容，而其內容則引出接下來的資訊。
在範例 2，<header>
「2016 台北夏日旅行」是用來引指接下來描述旅行的文章。
設立 header 可包含一組資訊或導覽，這用來引導接續的內容，是很常見的。
<h1>， <h2>， <h3>， <h4>， <h5> 和 <h6> 是標述接續內容的標題。在這些標題中，我們通常放置精簡的文字內容。 <h1> 是排序最高的，而<h6> 的序次是最低的。瀏覽器通常把高次等的標題預設更令人注目的字型，同時令各標題格式與一般文字內容有所差別。
<article>
<article>
通常是一篇可以獨立閱覽的文章。通常這可以是單一的新聞消息、部落格 po文、網民留言或文件存檔等等。
所以，這文章的內容可以獨立分享或理解，與其他篇章或網頁結構如用戶界面元素或廣告等並無關係。
<section>
<section>
是用來把網頁分成不同的部分。你可能需要把你的網頁內容分柝成不同的部分，如在一般的關於頁面，可以包括「理念」、「創舉」、「歷史」、「地點」等。
在一篇文章內，可以根據不同的主題或論點分組部分。你亦可能在編寫小說時分章節、編寫說明書時分步驟、編寫論文時分寫理據研究方式、實驗和結論等等。
Line 1-5 是網頁的標題內容，包括應用程式的名稱和版本，和給用戶使用的下載按鍵。
Line 6-9 是第一部分，包括應用程式的描述。
Line 10-20 是第二部分，包括網民的評價。每個評論則可獨立成為文章，包括自己的標題。
<nav>
<nav> 可以向用戶提供導覽，所以裡頭可以包括不同的用戶介面元素，如前往不同網頁的超連結或按鍵。通常一般網站都會設置頂端的導覽列，在應用程式亦會設置側欄導覽，讓用戶前往不同的頁面。
<footer>
<footer> 包括註腳資訊，為最近的祖先元素內容提供補充或註釋。這不一定要放置在其內容元素中的最後，而通常在一般網頁的註腳，會放置聯絡資訊、快速導覽或版權說明等資訊。
如何好好架構網頁？
要把網頁好好架構，你好要把放置在網頁的內容清晰理解，這就如同你在空白的畫布上繪圖，也得要想想你要繪畫什麼，和如何構圖。
當你有了概念，你是時候想想你如何選用元素的種類和怎樣配置網頁的內容，以令內容是有意義的和能清晰表達。要留意的是你可以多使用語意元素，盡量避免過量使用沒有建構意思的元素，如 <span> 或<div>。
在編寫網站時，你可以想想：
- 會不會設立導覽列，讓訪客前往不同的網頁？
- 有沒有跨網頁的網站註腳資訊？
- 在主要內容中，你是否需要分開不同的部分？
- 當中會不會向用戶展示文章？
- 在文章中，可以分開不同部分，同時以標題以使行文清晰。
參考與下一步
W3C HTML5 標準 (篇章 4.3-4.5) 包括了 HTML 文字層面、內容分組和結構分部的元素定義。這不僅是本導讀資訊的參考文章，同時將會是你重要的定義參考，裡面還編有不同的例子和小提示，讓你好好選擇使用不同種類的元素。
現在，我們已經可以好好建構網頁的內容，而接下來，我們需要好好設計一個網頁。
在下一篇章，我會開始介紹 CSS，雖然這會使用另一種語言，但這是一種標準讓我們設計網頁的格式和視覺效果。