搜尋

HTML 格式規範

雖然 HTML 是一種容錯彈性很大的標記語言,就算格式或語法寫錯還是可以顯示 ( 但結果可能會不如預期 ),但在撰寫語法上仍然要遵照一些格式規範,才能確保產生出正確的顯示結果,未來也才能更有效無誤的串接其他程式語言,這篇文章會介紹 HTML 應該注意的一些格式規範。

快速導覽:

必須要有 <DOCTYPE>

<!DOCTYPE html> 會放在所有 HTML 的開頭,主要定義 HTML 的類型( doctype ),意思是告訴瀏覽器這份文件是 HTML5 的規範,只要是網頁都需會放入

<!DOCTYPE html>
<html>
  <head>
    <title>OXXO.STUDIO</title>
  </head>
  <body>
    <p>我是內容</p>
  </body>
</html>

必須要有 <html>、<head>、<body>

<html><head><body>三個標籤是網頁 HTML 的基本架構,任何一個網頁都必須要包含這三個元素 ( 雖然缺少後可能還能正常顯示,但往往在功能與架構上就會出錯 )。

HTML 副檔名使用 .html

過去在 HTML 尚未完全普及前,可使用 .htm 的副檔名,但只要是 HTML 檔案,一律存檔為 .html 格式 ( 雖然 .htm 也支援,但相對來說比較不好 )

檔案名稱使用小寫字母

雖然在 HTML 存檔時可以用大小寫命名,例如 Apple.html 和 apple.html,但不同的瀏覽器會有不同的讀取規則,有些瀏覽器會區分檔名的大小寫,有些瀏覽器則會認為是同一個檔案,因此建議檔案名稱一律使用小寫字母,並且避免特殊字元或中文字 ( 因這些文字也會被轉換成字母和數字 )

替網頁加上語系與編碼規則

編輯網頁 HTML 完成後,可以在 html 標籤裡加上 lang 屬性標記語系,新增 meta 標籤標記編碼規則,如此一來可以提供搜尋引擎和瀏覽器更多資訊 ( 有些瀏覽器甚至會因為語系進行自動切換 )。

<!DOCTYPE html>
<html lang="en-us">
<head>
  <meta charset="UTF-8">
  <title>Page Title</title>
</head>

注意結尾標籤

HTML 裡大多數的元素都具有開頭標籤和結尾標籤,因此撰寫 HTML 時,除了空元素 ( 例如圖片 <img> ),其他元素必須都要加上結尾標籤 ( 雖然在某些情況下也可以正常顯示,但往往會造成整體 HTML 架構錯亂 )。

HTML 教學 - HTML 標籤與架構

標籤和屬性使用小寫字母

HTML 所有元素都是由「標籤」組成,標籤裡的字母 ( 包含屬性名稱 ) 一率使用「小寫」字母 ( 雖然大小寫混用還是可以正常運作,但通常任何一個常寫程式開發者都不會這樣做,這麼做也會造成整體程式碼不容易閱讀,且容易出錯 )。

屬性的值加上引號

撰寫 HTML 元素屬性的「值」,一律需要加上「引號」( 建議雙引號 ),否則除了會讀取不到屬性的值,更會發生值與屬性混淆的狀況。

等號前後不要有空白

因為 HTML 元素的屬性使用「空白」分隔,因此在撰寫屬性和值的時候,等號前後不要加上空白

加上換行與縮排

通常 HTML 都會是「巢狀元素」的結構,將不同「層級」元素「分行」以及加上「縮排」 ( 通常是一個 tab 或兩個空白 ),可以讓整個 HTML 更加容易閱讀理解 ( 詳細參考:HTML 縮排與註解 )。

使用空格、換行和特殊符號需要注意

雖然在 HTML 直接打入內容也可以呈現 ( 在不加上任何標籤的狀況下 ),不過由於 HTML 是「標記語言」,並非「純文字」,因此無法正常顯示一些常見的字元 ( 例如「連續」空格、<標籤>或換行 ),如果要使用,則必須使用對應的標記語言,以下方的程式為例,使用 &nbsp; ( Non-Breaking Space ) 表示空白,以 &lt; 表示 <&gt; 表示 ><br/> 表示換行,就能正常顯示內容。

<p>無法連續空白:空白開始        空白結束</p>
<p>連續空白:空白開始&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;空白結束</p>
<p>無法出現標籤:<span></span></p>
<p>出現標籤:&lt;span&gt;</p>
<p>不能換行
  不能換行
</p>
<p>
  可以換行
  <br/>
  可以換行
<p>

HTML 教學 - 顯示空格、換行和特殊符號

空元素後方的斜線

HTML 的空元素沒有結尾標籤,因此在原本的標籤後方,不論加上斜線或不加斜線都是允許且常見的語法,需要注意的是,如果一份 HTML 裡所有空元素的結尾都有斜線,那麼就都加上斜線,如果沒有斜線就不要加斜線,盡可能不要混用不同的寫法,例如下面兩種寫法都是被允許的。

小結

由於 HTML 的容錯彈性很大,所以就更需仰賴使用者自己的撰寫習慣,一個具有優良規範的網站,不僅在程式架構的理解上都更為簡便,也更容易與其他的服務與應用搭配。

意見回饋

如果有任何建議或問題,可傳送「意見表單」給我,謝謝~

HTML 教學

基本介紹

認識 HTML 使用 HTML 編輯器

基礎知識

HTML 標籤與架構 HTML 格式規範 HTML 縮排與註解 HTML 元素顯示類型 HTML 元素屬性 HTML 特殊字元 HTML 色彩表示法 HTML 尺寸單位 HTML 網址與路徑 HTML 套用 CSS 樣式 HTML 套用 JavaScript 如何觀察 HTML 原始碼

網頁資訊元素

網頁標題 <title> 網頁資訊 <meta> 載入外部資源 <link> 重設根目錄 <base>

常用元素

標題 <h1>~<h6> 段落 <p> 行內容器 <span> 區塊容器 <div> 超連結 <a> 圖片 <img> 換行 <br> 水平分隔線 <hr> 內嵌頁框 <iframe>

文字樣式元素

粗體字 <strong><b> 斜體字 <em><i> 刪除線文字 <del> 插入 ( 底線 ) 文字 <ins> 小型文字 <small> 上標下標 <sup><sub> 凸顯文字 <mark> 引用 <blockquote><q> 預先格式化 <pre> 程式碼內容 <code> 收折文字內容 <details> 標示注音 <ruby><rt> 標示聯絡方式 <address> 標示鍵盤按鍵 <kbd> 標示時間日期 <time> 標示縮寫 <abbr> 標示可換行位置 <wbr>

表格&清單元素

無序清單 <ul><li> 有序清單 <ol><li> 自訂清單 <dl><dt><dd> 表格 <table><tr><td> 表格 <th><caption> 表格 <thead><tbody> 表格 <colgroup><col>

表單元素

表單 <form> 輸入 <input> 按鈕 <button> 多行文字輸入 <textarea> 下拉選單 <select> 進度條 <progress> 欄位標題 <label> 欄位資料清單 <datalist> 表單元素分組 <fieldset>

語意結構元素

頁首區塊 <header> 主要區塊 <main> 章節區塊 <section> 文章區塊 <article> 側邊欄區塊 <aside> 引用區塊 <figure> 導航連結區塊 <nav> 頁尾區塊 <footer>

影音&圖形元素

播放影片 <video> 播放聲音 <audio> 響應式圖片 <picture> 點陣畫布 <canvas> 向量圖形 <svg>

網頁嵌入應用

嵌入 YouTube 影片 嵌入 Google 地圖 嵌入 Google 日曆 嵌入 Google 表單 嵌入 Google 簡報 嵌入 Google 文件 嵌入 Google 試算表 嵌入 Google 試算表圖表 嵌入 Twitter 推文 嵌入 Facebook 粉絲團 嵌入 Facebook 影片