菜鳥工程師肉豬: HTML <!DOCTYPE html>的意思

2019/7/7

在一份標準的HTML文件中，在第一行都會有<!DOCTYPE html>，其作用如下。

DOCTYPE其實是Document Type的簡寫，也就是文件類型的意思。

<!DOCTYPE html>的作用是告訴瀏覽器這是一份以「HTML標記語言(markup language)」所撰寫的文件，所以請用HTML的定義來解讀我。

換句話說，瀏覽器打開一份HTML文件時，例如welcome.html內容如下，當瀏覽器讀取到第一行看到<!DOCTYPE html>這行宣告時，瀏覽器就知道說，「喔，這份文件內容是HTML標記語言撰寫的，所以我必須用我的HTML翻譯器來解讀」。

<!DOCTYPE html> <!-- 我在這 -->
<html>
<head>
</head>
<body>

  <h1>您好，歡迎光臨</h1>

</body>
</html>

那你可能會想，welcome.html的副檔名.html不就代表這是一份HTML檔案了嗎，為什麼還要特別用<!DOCTYPE html>呢？

那是因為HTML本身也是不斷在演進，所以有不同的版本。目前是HTML 5，而在幾年前是HTML 4.01，其DOCTYPE的宣告是下面這個樣子。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

到了HTML 5，就是下面比較簡單的樣子。

<!DOCTYPE html>

所以瀏覽器看到HTML 4.01的DOCTYPE宣告，就會知道應該用HTML 4.01版本來解讀，看到HTML 5的DOCTYPE宣告就知道要用HTML 5版本來解讀。

總之在2019年的現在都已經是用<!DOCTYPE html>了，你只要記得每次自己建立一份HTML文件時，記得在第一行加上<!DOCTYPE html>。

你可能會想，這麼奇怪的符號我哪記得住呢？這想法很正確，因為從沒有人記得住，所以日後你想用時，你就回來這篇用複製貼上就好了。

你可能又會問，可不可以把<!DOCTYPE html>放在其他位置？答案是不行，規定必須放在第一行，否則瀏覽器會認不得。誰規定的呢？一個叫W3C的組織，其負責制定HTML的標準，以上只要看過就好。

如果有興趣想知道更多關於HTML文件的各種定義，請參考W3C的HTML 5.3 - W3C Working Draft, 18 October 2018（英文）不過如果你還是初學者，通常會很難讀的懂，依我個人經驗這些標準規格書都是在工作一兩年之後你才會比較有機會來看。

菜鳥工程師肉豬