【網頁設計自學】HTML的簡易架構，以及其程式碼的意義

HTML 的簡易架構，以及其程式碼的意義

先簡單寫一段正常架構的 HTML

<!DOCTYPE html>

<head>

</head>

<body>

</body>

</html>

個別的意義

<!DOCTYPE html>

告訴瀏覽器：「這是一個 HTML5 頁面」。（不寫會讓瀏覽器用舊模式顯示，可能跑版）

這一段是宣告 HTML 的版本，會跟著版本更新，現在是 HTML5，那就會是 HTML5。

<html lang="zh-Hant">

開始 HTML 主體，並設定語言為「繁體中文」。

搜尋引擎會依這個 tag 判斷語系，有助 SEO。

<head> ... </head>

放「不是畫面本身，但很重要」的資訊，例如：

網站標題、SEO meta、CSS style、Google Analytics。

Open Graph（FB/LINE 顯示的預覽）也會放在這裡。

在寫部落個的這段時間，我可以堅定的說出：「標題很重要！！！標題很重要！！！標題很重要！！！」

幾乎是下完標題就決定 Google 會不會找到這篇文章了。

<meta charset="UTF-8">

告訴瀏覽器用 UTF-8 編碼，不會讓中文變亂碼。

<meta name="viewport" ...>

讓手機／平板顯示正常（RWD）。

沒寫的話，有時候手機顯示會非常小，看起來很奇怪，不利於「響應式網頁」。

<title>

標題顯示在：瀏覽器分頁、搜尋結果標題、LINE 分享標題（有時候）

<body> ... </body>

網頁真正會顯示給讀者看的內容都放這裡，是整個文章的主題。

包含：文字、圖片、按鈕、文章內容、HTML 自訂區塊、CSS 樣式測試……等

昏貴就是粉粿