網頁開發初學者們看過來！你不能不知道的 HTML 代碼。當您剛開始接觸網頁開發時，是不是也會很好奇 HTML 是什麼呢？今天就讓 Gremlin Works 帶您進入 HTML 的世界！以下是本文包含的主題：
- HTML簡介：帶您輕鬆入門HTML
- HTML語法概述介紹
- HTML元素概述：探索網頁建構基石
- 什麼是HTML語意化？為何它如此重要？
HTML簡介：HTML是什麼？
在任何形式的文件或是文章最上方，都會有一個最主要的標題，像是本篇文章「HTML 原來這麼重要！HTML完整指南，深入解析網頁建構的關鍵元素」，這個標題說明著這篇文章所要傳達的訊息與核心概念。
接著，文章會放入一些文字或是標題二、標題三，就好比如樹狀圖一樣，一層一層的往下陳述，為內容建立更豐富的層次。除此之外就是佔比最大的內文介紹了，每一個標題之下都會有著不同的段落文字，搭配上圖片、影片或是一些內部的連結，來引導用戶前往網頁中不同的區塊。
了解了一篇文章的架構介紹，那和 HTML 究竟有什麼關係？
回顧HTML的歷史
1989年，英國科學家蒂姆·伯納斯·李在瑞士的研究中心工作時，構思了一個相互連接、分散式的系統，希望可以更快速、輕鬆和便利地共享訊息。於是他開始進行了 HTTP 和 HTML 系統，並在1991年發布了 HTML 的第一個報告。
在那之後，隨著全球資訊網協會成立，HTML的標準也逐漸開始建立，不同版本的 HTML也開始慢慢的公開，像是 HTML 2.0、HTML 3.0、HTML 4 和 HTML5。其中，HTML5 則為大家目前最推薦使用的 HTML 版本。
HTML語法概述介紹
當我們更仔細地研究HTML時，我們將關注HTML標籤及其基本語法，這些標籤是從SGML繼承而來，用於定義網頁的結構和內容。
以下列HTML代碼為例：
讓我們逐步來解釋：
HTML標籤分為兩種類型：
開始標籤（例如<a>）和結束標籤（例如</a>），標籤由左尖括號、右尖括號和它們之間的字符組成，結束標籤在左尖括號之後、字符之前加上一個斜槓（/）。
標籤中的字符用於定義標籤所包含的內容。在給定的例子中，字符a代表錨點（anchor），表示這是一個指向名為"freeCodeCamp"的連結，開始標籤和結束標籤之間的內容是"freeCodeCamp"這個文本，總體而言，開始標籤、內容和結束標籤共同組成一個HTML元素，需要注意的是，在上面的例子中，您看到的是由開始標籤和結束標籤組成的元素，然而，有些元素只有自閉合標籤，例如<img>標籤，此時斜槓（如<img />）是可選的。
現在，讓我們來解釋一下：
href="https://www.freecodecamp.org/" 是一個與元素相關聯的屬性，大多數情況下，特定的元素會接受特定的屬性。
屬性通常只出現在開始標籤中，在右尖括號之前，請注意在字符後面的空格，屬性由名稱和值成對組成。在 href="https://www.freecodecamp.org/" 中，名稱是 href，值是 https://www.freecodecamp.org/，名稱和值之間使用等號 = 進行分隔，而值則始終使用雙引號 "" 括起來。
現在，您已經瞭解了HTML元素的基本知識，那麼如何為您的項目建立HTML文檔呢？在下一節中，您將學習如何創建HTML5的樣板，這會是您所有HTML項目的通用範本。
如何建立HTML5的模板
當您建立新的HTML專案時，您會發現每次都需要包含相同的幾個元素，這些元素是必不可少的，您需要遵循這些標準才能正確運行HTML網站。
某些程式編輯器提供捷徑功能，可以自動填寫和輸入每個新HTML專案中使用的元素，這可以節省大量時間，這就是所謂的HTML模板，它是每個新HTML文檔所需的基本架構和基本結構。
執行以下步驟來創建模板：
- 首先，確保安裝了Visual Studio Code編輯器
- 創建一個帶有.html擴展名的文件，以確保包含HTML代碼的文件以該擴展名結尾
- 在空文件中，輸入一個驚嘆號符號（！）
按下Enter鍵或點擊驚嘆號符號，該標記指出以下內容是Emmet縮寫。Emmet是一個程式編輯器的插件，預設內建於Visual Studio Code中，它可以協助優化HTML的工作流程。
然後，你將看到以下代碼：
讓我們逐步來解釋：
- <!DOCTYPE html>是所有現代HTML文檔頂部需要出現的第一行代碼。它是一個文檔類型聲明，不同於HTML元素，用於告知瀏覽器應該期望什麼樣的文檔並指定使用的HTML版本。在此例中，該聲明指示瀏覽器該文檔包含HTML5代碼。
- <html>元素是每個HTML文檔的第一個元素，被視為根元素。開始的<html>標籤表示HTML代碼的開始，而結束的</html>標籤表示HTML代碼的結束；lang屬性用於指定文檔的語言。在html元素內部，總是包含兩個嵌套的元素，分別為head元素以及body元素。
- <head>元素包含元數據和配置。元數據提供關於頁面的信息，對用戶而言是隱藏的，不在瀏覽器中顯示，唯一可見的內容是title元素中的內容，該標題顯示在瀏覽器標籤上方，即瀏覽器窗口的頂部。
- <body>元素包含在瀏覽器窗口中可見的所有內容。在這裡，您可以添加您項目的HTML代碼。
HTML元素概述：探索網頁建構基石
如何創建代碼註釋
註解在代碼中起到解釋代碼和邏輯的作用，可以視為未來自己或同事的筆記。它們可以提供關於代碼功能、目的或其他相關信息的說明，有助於提高代碼的可讀性和維護性。
以下是創建註解的語法：
在<!--和-->之間的任何內容都不會在網頁上顯示，因為瀏覽器會忽略它們。
如何創建標題
HTML中有六個標題級別：
隨著標籤中的數字增加，HTML標題的重要性逐漸降低，一個被包裝在<h1>標籤中的標題比被包裝在<h6>標籤中的標題更加重要和顯眼。
如何創建列表
HTML中有兩種列表類型：
不管是無序列表還是有序列表，我們都可以使用<li>元素來創建列表項目。
如何創建段落
使用<p>元素創建一個文本區塊：
如何創建連結
在之前的章節中，我們看到了<a>元素，通常在開始標籤和結束標籤之間的文本下方會出現底線，而且當游標懸停在該文本上時，游標也會產生變化，指示了所連接的頁面或資源。
href屬性是連結的目的地，其中包含連結的網址，另外要注意的是，您可以將某些元素嵌入在其他元素內部。
例如，您可以在段落中的某些文本中創建一個連結，像這樣：
請確保先關閉嵌入的標籤。
請注意不要犯這個常見的初學者錯誤：
請記住，內容需要放在標籤之間。
此外，還可以在同一個頁面中連結到不同的區域，您需要在要連結的區域添加id屬性並為其指定一個值。這樣就可以在連結中使用該id值，讓頁面滾動到相應的區域。
假設您想要連結到一個段落：
在建立連結時，請務必在指定 id 屬性的值之前加上井號（#）：
如何創建容器
<div>元素用於創建一個通用的容器，可用於包裝和組織內容，通常與CSS一起使用，呈現各種不同的網頁版面效果。
如何創建圖像
若要插入圖片，請使用 <img> 元素，在前面部分已經出現過這個元素，它是一個自封閉的元素。使用 src 屬性指定圖片的來源，並使用 alt 屬性提供圖片的替代文本，alt 屬性是一段文字，在圖片無法加載時會顯示該文字，這對於視覺障礙的使用者來說非常重要，因為屏幕閱讀器會將內容朗讀給他們聽。
如何創建表單
表單幾乎是每個網頁中必不可少的一部分，它使用戶能夠提交資料，並讓您能夠收集這些數據。
透過使用<form>元素，您可以創建一個表單：
說到創建表單，創建表單時涉及到很多屬性，閱讀以下資料以了解如何開始使用HTML表單：
- 您的第一個表單 - MDN文檔
- 逐步指南：如何開始使用HTML表單
- HTML文本框-輸入字段HTML標籤
什麼是HTML語意化？為何它如此重要？
HTML5的最重要特性之一是語意化的HTML。語意化指的是使用具有語義意義的HTML5元素，讓元素描述其內容，而不僅僅使用通用的、空的<div>元素來容納內容。語意化的HTML有助於建立更好的網站結構，例如，可以使用<header>元素放置位於頁面頂部的訊息，包括頁面標誌和主標題；在<header>元素內部，可以嵌入一個語意化的<nav>元素，用於創建帶有連結到不同頁面的導覽列；對於頁面的主要內容，可以使用<main>元素；在頁面底部，可以使用<footer>元素儲存相關訊息，如站點地圖、社交媒體連結、常見問題解答或聯繫訊息。
語意化的HTML不關注內容的外觀，例如，<b>和<i>元素分別用於加粗和斜體文本，這些標籤關注的是呈現和外觀，是由CSS來處理而不是HTML。相反，可以使用<strong>元素來表示文本的重要性，瀏覽器會將其呈現為粗體；使用<em>元素來表示需要強調的文本，瀏覽器會將其呈現為斜體。這些元素不關注外觀，而是提供更多關於所包含文本類型的訊息。
通過使用這些具有語意意義的元素，我們可以創建更有意義的網頁並建立更好的結構。
為何要撰寫語意化的HTML？有幾個原因：
- 提升網頁的無障礙性：
在設計和開發網站時，我們需要時刻記住一點，我們是為每個人創建網站。視覺障礙者依賴螢幕閱讀器等輔助技術來閱讀網頁內容，而其他殘障人士可能僅利用鍵盤來引導，因此，學習撰寫無障礙性的HTML將使我們能夠創建更友善的網頁，提升使用者的體驗。
- 提升SEO（搜索引擎優化）：
運用正確描述內容的元素有助於提升網站在Google搜索中的排名，因為這樣可以更清晰地表明網站的目的，搜索引擎將幫助您的網站接觸到正在尋找相關內容的目標受眾。
欲了解更多有關語意化HTML的信息，可以參考以下資源：
- 語意化HTML指南- 10個替代使用div的方法
- 語意化HTML5元素解釋
探索HTML 創建令人驚艷的網頁世界！
HTML的重要性在於它是網頁開發的基礎，它為我們提供了豐富的工具和標記，用於創建結構化且具有語意意義的網頁內容，透過學習和掌握HTML，我們可以設計出令人印象深刻、易於理解和使用的網頁，從而為用戶提供優質的網頁體驗，無論是初學者還是有經驗的開發人員，深入瞭解HTML都是非常重要的，因為它是建立現代網頁的基礎，以上就是我們對HTML的介紹，希望對您有所幫助，一起開始學習HTML吧！
讓網站設計公司為您善用HTML，建構優質吸睛網頁
深入理解HTML對網站開發的重要性後，您是否也對運用HTML來設計網站感到躍躍欲試呢？但如果您沒有時間自行創建，也歡迎洽尋專業的網站設計公司，替您設計優質的網站。Gremlin Works為一間設計經驗豐富的網站設計公司，我們可以設計令人印象深刻，且易於理解與使用的網頁，從而為用戶提供優質的網頁體驗！
