在網頁設計當中，我們的頁面是藉由所謂的 HTML(Hyper Text Markup Language) 所組織起來的，同時 HTML 也被簡單地稱之為標籤式程式語言，原先的用意其實是為了進行學術資料的交互傳遞而誕生，也可以說資料清晰地傳遞就是他本質的工作，而隨著經年累月的發展，在經歷了過於繁瑣的 XHTML(XML嚴格設計)失敗之後，在 2014 由W3C(World Wide Web Consortium,全球資訊網協會)完成設計標準，我們目前主流所使用的 HTML5 就此誕生。
上面說了這麼多的歷史、相關技術與專有名詞，但其實在起步的過程中，並不需要將這些知識牢記於心，只需要有個記憶點並在遇到問題時能想起來就好。
標籤式程式語言的基礎概念，其實就是使用相對應的標籤，來撰寫網頁所需表達的相關內容，像是以下的範例就是用 p 標籤包覆了一段文字，而 p 標籤其實就是 paragraph(段落) 的縮寫，代表這一個區域是一個文字段落。
<p>
我是一個段落標籤
</p>
想當然耳，既然我們需要使用標籤來撰寫網頁(文章)，也就代表這個標籤數必然會有一定的數量，但這些我們可以留到之後再做探討。
標籤式語言的規則其實相當單純，他主要分成「元素（element）」與「置空元素(empty element)」 ，元素通常是拿來進行有內容值得包覆，而內容直可以包含多個其他元素與文字圖片等等，而置空元素則更加單純，他「不能」含有任何的子節點，如水平線、換行、圖片等標籤，都是所謂的置空元素。
需注意的是，元素與置空元素都需要有一個收尾的工作，以表示一個範圍的結束，一般元素需要在結尾標籤內打 / 加標籤名稱收尾，而置空元素因為沒有結尾標籤，因此是直接打在標籤的後面，如以下範例
// 元素（element）
<p></p> // 文字段落標籤
<article></article> // 文章標籤
// 置空元素(empty element)
<br /> // 換行標籤
<hr /> // 水平線標籤
br 標籤的全稱是 Break(換行)、hr 標籤的全稱是 Horizontal Rule(水平尺)
屬性(Attributes)與行為(Methods)這兩個東西，可以說是 HTML 最繁瑣的概念，以純的技術層面而言，就是瀏覽器在製作這些標籤時，為了讓每個標籤具有可管理性與操作性等，因而賦予了標籤額外的屬性與行為，來應對單純文章外的需求，屬性常見的有 id(標籤的唯一姓名)、class(標籤的分類)，而行為最常見的則是 onclick(點擊事件)等。
// 在錨點的元素上，加上 href(連結)的屬性(Attributes)
<a href="https://google.com">超連結</a>
// 在按鈕的元素上，加上 onclick(點擊事件) 的行為
<button onclick="console.log('我被點擊了')">按鈕</button>
// 可在同個元素上，掛載多個屬性與行為，例如以下就新增了一個 class(類別) 給了 a 標籤
<a class="link" href="https://google.com">超連結</a>
a 標籤的全稱是 Anchor(錨點)
需注意的是，在瀏覽器實作的過程中，可能會賦予個別的標籤不同的屬性，如 href 標籤只會在 Anchor(錨點) 上生效等等。 HTML 就像是一個巨大的拼圖遊戲，每個標籤都是拼圖的一塊，而實際上網頁也確實是由大量的物件拼湊而成，並且HTML 也就是這些「物件」的其中一環。
其實以最基礎的目的而言，HTML 就是一個存放內容的載體，它包含了文字、超連結、段落、標題等等的標籤，其實就是為了讓我們能夠完整的編排需要寫入的內容，以下我們以一個簡單的結構為例，來講解從我們常見的 word 等工具，到 HTML 結構的異動。
在以下的範例中，我們從 word 上擷取了一段簡單的文章，並且將它一步一步的轉換為 HTML 的標籤表達形式。
在完成了第一版之後，大家應該已經比較清楚他作為標記語言，其實只是需要使用相對應的標籤，來完成我們文章的撰寫，因此若需要在原先的基礎上再加一的段落，且加上粗體與斜體，也都是藉由增加標籤來完成操作。
在上面的課程中，我們學習了與 HTML 相關的知識，並且頗析了他的很多細節內容，而下面就讓我們開始最初的 HTML 頁面介紹吧！
以下的結構是網頁需要正常運作的基礎內容，但各位同學可以嘗試在我們的文字編輯器內，開啟一個 html 檔案並輸入<p>我是一個段落標籤</p> 這段內容，在正常的情況下網頁還是會正常運作，但這並不是因為以下內容可以省略，而是單純瀏覽器會協助進行部分標籤的補齊而已。
// 定義文件類型為 HTML
<!DOCTYPE html>
// 撰寫包覆在最外層的 HTML 標籤
<html>
// head 標籤將包覆關於本 HTML 頁面的一切設定
<head>
// meta 標籤是拿來設定網頁的相關設定的，以下為指定字元編碼為 UTF-8(萬國瑪)
<meta charset="UTF-8" />
// 撰寫網站在上方顯示的文字標題
<title>Document</title>
</head>
// body 標籤將包覆關於本 HTML 頁面的一切內容
<body>
我們網頁的內容
</body>
</html>
在理解網頁的基礎結構之後，我們就可以開始建立 HTML 頁面了，但在這邊我們不會去記憶這一長段的程式，因為 Visual Studio Code 中有提供補齊語法片段的功能，可以快速的幫我們完成這部分的撰寫。
首先我們需要開始 Visual Studio Code，並且建立一個副檔名為 html 的檔案如 index.html，接著我們只需要按下一個「 ! 」，就會自動跳出片段選單，且在按下之後就會自動跳出以下結構。
<!DOCTYPE html>
// lang 代表網頁使用的語言，繁體中文是使用 zh
<html lang="en">
<head>
<meta charset="UTF-8" />
// 這段是協助讓 IE 瀏覽器使用最新版更新
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
// 這段是讓響應式網頁會隨著畫面的尺寸而進行運作
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body></body>
</html>
在這裡需要建立一個資料夾，並且使用 Visual Studio Code 開啟，並將檔案均存放在裡面，因為稍後我們會使用一個延展模組，來開啟我們的 HTML 頁面。
在基礎的建設完成之後，我們就可以開始來撰寫我們的 HTML 頁面了，但實際上在 HTML 頁面的撰寫上，我們其實保有很高的自由度，另因網頁標籤可能會因 CSS 與 Javascript 而有所異動，因此 HTML 的撰寫其實沒有固定的準則，不過當然，設定擋放置在 head 與內容放在 body 中，是最主要的鐵則。
因為 HTML 的標籤非常大量，因此這邊只會介紹比較常用的標籤，如果有想要暸解更多標籤的同學，可以點擊下方兩個連結進行閱覽。
| 標籤名稱 | 簡單說明 |
|---|---|
<header> |
網頁頁首，經常包含 logo、標題、導航列或介紹文字 |
<nav> |
網站操作導航列 |
<aside> |
跟主要內文沒有直接聯繫的側欄，常用來做功能按鈕設計與輔助說明文字 |
<main> |
主要內容 |
<article> |
文章 |
<section> |
章節段落 |
<footer> |
網頁結尾，經常包含版權資訊、聯絡方式 |
以下的範例結構，僅為一個參考的佈局方式
雖然很多人都將 HTML5 標籤作為主要切版結構進行設計，但在實務將其融入頁面組件等開發也可以協助我們的語易化更加順暢。
<div> : 分組用 (block) - 盡可能少用<ul> 有序清單 & <ol> 無序清單
<li>
list-style-type: none
常用標籤 - 文字內容
<h1> ~ <h6> 網頁標題<p> 網頁內文
<span> 分組用 (inline)
<p> 裡面<em> 強調文字<strong> 重要文字<blockquote> 表示引用自其他內容<a> 超連結 or 錨點
href 填 網址target 內連 or 外連
_self 在同一個標籤頁跳轉_blank 另開標籤頁href 填 #id
h1
<h1 id="title">標題</h1>
<a href="#title">跳到標題</a>
<pre> 保留格式
<br> 標籤<code> 放程式碼<time> 日期與時間<hr/> <單標籤>分隔線<br/> <單標籤>換行常用標籤 - 內容
<img/> <單標籤>圖片
src 圖片網址title 鼠標停留在圖片上的提示文字alt 圖片連結失效的替代文字<figcaption> 圖片說明文字當然 html 中有著一些百搭標籤如 div(區塊)，但儘管可以藉由 div 與 CSS 的搭配，來完成我們網站的樣式賦予及設計，但那將對程式的可讀性造成不可挽回的打擊，並且完全違背了「 語易化 」這個最根本的設計準則，因此在建置的過程中，使用 HTML5 與原先就有著「富有意義」的 Tag 進行撰寫，就成為了非常重要的課題，並且這在一定程度上，也會幫助瀏覽器的讀取以及 SEO 的建立。
以下的範例中，我們將會使用到 class 來進行設計，可以把它想像成樣式的分類機制，如紅色的連結可能就會以 class="red-link" 來表示。
<!-- 不良好的操作 -->
<body>
<div class="header"></div>
<div class="nav"></div>
<div class="main"></div>
<div class="article">
<div class="section"></div>
</div>
<div class="footer"></div>
</body>
<!-- 良好的操作 -->
<body>
<header></header>
<nav></nav>
<main>
<article>
<section></section>
</article>
</main>
<footer></footer>
</body>
HTML 的 Tag 並不是唯一存在的值，實際上除了最底層的 body 以外，其他的標籤都能在遵守頁面「 語易化 」的情況下，重複的使用於頁面中。
Meta 標籤相當與網頁的身份定義，他負責在第一個時間告訴瀏覽器相關的資訊，並且還有部分設定將影響功能本身的操作，此外的標籤也肩負完善 SEO 的使命。
<!-- 網站編碼 -->
<meta charset="UTF-8" />
<!-- 負責將 IE 瀏覽器提升至可用最新版本 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!-- 告訴頁面需依照頁面尺寸進行畫面切換 - RWD 基本標籤 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
許多 HTML Tag 會有著一些子屬性的定義值，如圖片就具有 alt 這個當圖片沒有獲取到資源時，負責代替顯示的文字，因此補齊這些所需的相關資料便尤為重要(且對 SEO 與無障礙網站等也會有所影響)。
<!-- 網站編碼 -->
<img src="peraonAvatar.png" title="人物頭像" alt="人物頭像" />
iThome鐵人賽
看影片追技術