HTML 語法教學,HTML 入門新手必學

HTML 是什麼?

HTML 是 Hypertext Markup Language 的縮寫,也就是「超文本標記語言」(請注意,他是標記語言,不是程式語言)。

    • HyperText:一種結構化的文字
    • Markup language:一種用來標記文字的系統語法

身為標記語言,HTML 有各式各樣的標籤去定義網頁內容要如何呈現。例如:元件可能是文字、圖片或超連結;標籤則定義元件要放左邊還是放右邊、斜體還是粗體等等。本文帶你了解 HTML 是什麼,以及 HTML 語法入門教學。

HTML 的組成

請打開你的 VSCode,新增一個名為「basic.html」的檔案。細讀以下的 HTML 文件 ,裡面包含 HTML 的最基本結構。試著用你的方式觀察與描述它,然後把它寫入你的 basic.html

讓我們來解釋一下這段 HTML 所表達的意義。

宣告

第一行是一個「宣告」: <!DOCTYPE html> 告訴瀏覽器這份文件是一個 HTML5 的網頁,瀏覽器因而知道要怎麼用正確的方式來展示你的網頁。請注意宣告要寫在第一行,因為瀏覽器是一行一行讀取文件的,想愈早告訴他的資訊,請寫在愈上面。

<html></html>

<html>…</html> 包住了整個網頁,表示這是一份 HTML 文件。被 <html> </html>包圍的內容,我們稱為網頁「元素」(element)。一份完整的 HTML 文件,必然會在 <html> </html>裡包含 <head></head> <body> </body>兩個網頁元素。

<head></head>

<head></head> 包圍的資訊稱為「標頭」,<head></head> 裡宣告各種網頁資訊,這些資訊不會顯示給使用者看,因為它們的溝通對象是瀏覽器與其他的網路服務,如 Google 搜索引擎,Facebook 等。<head></head> 宣告的資訊包括網頁標題、外部連結、網頁樣式、JavaScript 腳本、meta tag⋯⋯等。我們在以後的章節會有更詳細的介紹。

現在,請你立刻在標頭裡加上以下內容:

加入上述< meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ > 在 <head>標籤內,表示要適應各種網路瀏覽器的編碼問題,如:IE瀏覽器預設文字編碼是BIG-5,我們在這邊先宣告統一使用utf-8編碼,解決使用不同瀏覽器會看到亂碼的問題。</head>

接著用瀏覽器打開 basic.html,找找看 <title></title> 的資訊出現在哪裡?如果你的網頁被搜尋引擎找到,同樣的資訊也會顯示為搜尋結果的標題。

<body></body>

<body></body> 包圍的內容是會直接顯示給使用者看的內容,也是這個網頁的核心。需要 CSS 來定義樣式的內容,也都會放在 body 裡面,現在,請你立刻在 body 裡輸入以下內容:

<body></body>
 <h1></h1>我要學會HTML!!!

接著刷新瀏覽器,看看網頁裡跑出了什麼?

註解 (Comment) <!– –>

寫在「註解」(Comment) 裡的東西會被機器直接跳過,通常是工程師協作時交流的注意事項,或是自己的備忘。例如:

<!– 在這裡我們會埋 Facebook 廣告的追蹤碼 Here we will put Facebook ad pixel –>

點我免費領取全端開發學習地圖!


HTML 的巢狀結構

HTML 其實是個「標記」 (markup) 的概念。HTML 的繪寫是 “Hypertext Markup Language.” 而 “markup” 的意思跟用螢光筆劃記的感覺很像,把文字標記起來,賦予某種特性。

你試試在編輯器寫出以下的五段文字,再用瀏覽器去看看:

    • Results
    • <h1>Results</h1> are impressive!
    • <h4>Results</h4> are impressive!
    • <p>Results</p> are impressive!
    • <strong>Results</strong> are impressive!

有發現什麼嗎?你應該注意到了,HTML 標籤都是成對的,而且是「巢狀」的結構。<html>、<head> 等被 < > 包圍的符號,是 HTML 這種 markup 語言的「標籤」(tag),標籤普遍需要有明確的開始和結束,才能把一段文字包圍起來:</head></html>

瀏覽器需要正確與完整的標記才指定你想表達的意思,所以結構對 HTML 非常重要。只要巢狀的結構有錯,瀏覽器就無法正確呈現你設計的網頁,甚至不會再理會你的網頁內容。但你也別擔心,像 VSCode 這樣的瀏覽器都會自動幫你檢查。

更重要的是,你必須根據巢狀結構好好縮排你的程式碼!「格式碼的可讀性」是評估你是否為合格工程師的重要指標,而清楚的縮排是良好的第一印象,撰寫 HTML 時,請保持不同層級的標籤空 2 格 (如下圖)。


HTML 的標籤

隨著學習 HTML 的進展,你會陸續認識新的標籤:

    • 標題:h1, h2, h3, h4, h5, h6
    • 文字段落:p
    • 清單:ul, ol, li
    • 強調語氣:em, strong
    • 換行:br
    • 水平線:hr
    • 超連結:a
    • 圖片:img
    • 區域:div, span
    • 表格:table, tr, th, td
    • 表單:form, label, input

除了 img 標籤外,header、nav、main 和 section 是語義元素 (semantic element),也就是「有意義的元素」,能讓搜尋引擎辨識出正確的網頁內容。

語義元素出自於 HTML5,你可以前往 W3School 瞭解更多資訊。

若你偶爾會使用 Word 等文書處理器,你會對等下介紹的元素非常熟悉,唯一要學的,是用 HTML 標籤來定義這些元素。

常見 HTML elements

HTML elements

其實一張圖就說完了,現在來動手實作,請你打開剛才建立的 basic.html,跟著介紹來更新你的文件,並隨時刷新瀏覽器裡,看看網頁的樣子。

上一單元我們已經介紹過 title,接下來我們從標題開始,以下介紹的內容,請你一律輸入在 <body></body> 裡面。

標題 headings

<h1></h1>我要學會HTML!
<h2></h2>我要學會HTML!
<h3></h3>我要學會HTML!
<h4></h4>我要學會HTML!
<h5></h5>我要學會HTML!
<h6></h6>我要學會HTML!

可以使用的標題有 6 層,這些標題組合成你的網頁內容大綱,當搜尋引擎找到你的網頁時,會依照標題來認識你的內容,因而判斷相關性。

段落 paragraphs

<h1></h1>我要學會HTML!
<p></p>動手做是最好的學習方法。<p></p>

<p> 把你的內容標記成段落,這是一個很常用的標籤。</p>

清單 list

「清單」有兩種,項目符號的清單,或有數字順序的清單。

無順序的項目符號清單 <ul>(unordered list)</ul>

<h2></h2>清單 Lists

<p></p>這是沒有順序的項目符號清單<p></p>

<ul></ul><!– unordered list –>
<li></li>這是沒有順序的清單
<li></li>以 ul 元來定義清單的範圍
<li></li>用 li 標示各別項目

有順序的清單 <ol>(ordered list)</ol>

<p></p>這是有數字順序的清單<p></p>

<ol></ol><!– ordered list –>
<li></li>這是有順序的清單
<li></li>以 ol 元來定義清單的範圍
<li></li>一樣用 li 標示各別項目

請注意 <li> 元素必然被放在 <ul> 或 <ol> 的下一層,這是 </ol></ul></li>Mozilla Developer Network (MDN) 制定的標準。

清單的巢狀特性,讓他們特別適合被改造成網站的導覽選單 (navigation),學會 CSS 以後,你將會知道怎麼做。

斜體 (emphasis) 與粗體 (strong)

在 HTML 我們一般會用兩種方法來強調需要強調的內容

 

    • Emphasis (斜體): <em></em>

    • Strong (粗體): <strong></strong>

在介紹他們如何使用之前,不知道你有沒有發現,目前為止介紹的元素,都是一次佔滿一行?

這種一次佔一行的叫「區塊元素」(block elements),接下來我們舉「行內元素」(inline elements) 的例子,在後面的 CSS 章節你會深入認識兩者的區分。

<h2></h2>行內元素

<p></p>校長說:Coding 哪裡都可以學,真正重要的是你的 <em></em>Mindset!<p></p>
<p></p>再說一次:Coding 哪裡都可以學,真正重要的是你的 <strong></strong>Mindset!<p></p>
<p><em><strong></strong></em></p>You need to get it done!<p></p>

空元素 (Empty elements)

上一節我們談到絕大多數的 HTML 標籤都是成對出現,具有開始與結束,以巢狀結構包圍內容,定義出一個區塊。

但某些元素無法包圍任何內容,因此他們被稱為「空元素」(empty element)。最常見的空元素是斷行以及水平線。

斷行 (break)

在 HTML 文件裡,你必須特意定義斷行,例如這樣:

<h2></h2>空元素

<p></p>祝你在大航道學習愉快!<br>
ALPHA Camp<p></p>

如果你把 <br> 拿掉,在網頁裡就只會留下一個空白 (請注意仍然有一個空白)。

此時你應該有注意到我們寫的是 <br> 而不是 <br>。其實兩種都有效,但寫 <br> 比較順應長遠的趨勢,斜線代表了標籤的結束,因此當我們寫 <br> 時,表示你對瀏覽器更明確地定義了這個標籤「結束在開始的位置」。

水平線 (horizontal rules)

讓我們在網頁最下方加上水平線:

<hr>
<p></p>恭喜你學完了 HTML 基本元素,就是這麼簡單!<p></p>

同樣,寫 <hr> 或 <hr> 都可以。水平線預設的長相就是一條橫線,開始使用 CSS 後,你可以加上更多外觀的改造。

程式設計入門,4 週進度班從零基礎建立數位職涯基礎能力


HTML5 和 HTML 有什麼不同?

HTML5 是 HTML 的最新版本,它引入了許多新的元素和特性,旨在增強網頁的表現力和語義。以下是 HTML5 與原本的 HTML(即 HTML 4.01 和 XHTML)的主要差異:

 

    1. 新的語義元素:HTML5 引入了一些新的語義元素,如 <article>、<section>、<nav>、<header>、<footer> 和 <aside>。這些元素使得我們能更準確地描述網頁的結構和內容。
    2. 多媒體支持:HTML5 提供了 <audio> 和 <video> 兩個新的元素,用於在網頁中直接嵌入影音內容,而不再需要第三方插件(如 Flash)。
    3. 圖形和動畫:HTML5 引入了 <canvas> 元素,可以用於在網頁上繪製2D圖形和動畫。此外,HTML5 也支持 SVG 和 WebGL,用於呈現2D和3D的矢量圖形。
    4. 新的表單輸入類型:HTML5 引入了一些新的表單輸入類型,如 email、tel、search、url、color、date、range 和 number,這些新的輸入類型可以使得在收集和驗證用戶輸入數據時更加方便。
    5. APIs 和 JavaScript 改進:HTML5 提供了一系列的新的 JavaScript APIs,包括拖放 API、地理位置 API、本地存儲 API(localStorage 和 sessionStorage)等,可以使得網頁具有更多的互動性和功能。
    6. 移動設備支持:HTML5 設計之初就考慮了對移動設備的支持,許多新的特性(如觸摸事件、導航等)都是針對移動設備設計的。
    7. 改進的語義和易用性:HTML5 適應了現代網頁的需求,加入了許多改進語義和易用性的元素和屬性,如 <data-*> 自定義數據屬性、aria-* 可訪問性屬性等。


寫好 HTML 的好處

從本文中,你理解了 HTML 就是定義你的網頁內容,你也學到怎麼使用基本的 HTML 元素了。

清楚佈局你的 HTML 標籤,有 2 大好處。一,能大幅提升之後修改網頁內容與用 CSS 來調整網頁樣式的效率;二,對像 Google 等搜尋引擎來說,他們更容易弄懂你的網頁內容,因而把你放到比較容易被使用者搜尋到、搜尋結果的前幾頁或是前幾名。

雖然目前已經有不少「所見即所得」的軟體 (如 Dreamweaver) ,能幫你像畫圖一樣打造網頁了。但一個好的開發者,總是用文字編輯器來撰寫 HTML。

透過HTML,開發者能夠創建結構化的網頁內容,並利用其他工具如CSS和JavaScript來提供吸引人的設計和動態功能。熟練運用HTML,您將能創建出功能豐富且用戶友善的網頁,滿足各種需求,從網誌和商業網站,到社交媒體平台和網路應用。

HTML相關資源

  1. W3Schools HTML Tutorial – 這是一個非常全面的HTML入門教程,適合所有水平的開發者。
  2. MDN Web Docs – Mozilla提供的HTML參考資料庫,包含詳細的語法和範例。
  3. HTML5 Boilerplate – 這是一個簡單的HTML5模板生成器,可以幫助你快速開始一個新的項目。
  4. HTML-Cleaner – 這是一個用於清理和格式化HTML代碼的線上工具。
  5. Emmet – 這是一個編輯器插件,可以快速生成HTML和CSS代碼,非常適合提高開發效率。
  6. HTML Validator – 這是一個線上HTML代碼驗證工具,用於檢查HTML代碼是否有語法錯誤。
  7. CodePen – 這是一個線上代碼編輯和預覽平台,可以用於實驗HTML、CSS和JavaScript代碼。