建立網頁HTML的基本架構
HTML (Hyper Text Markup Language) 超文本標記語言,一種建立網頁的標準標記語言,用來組織架構並呈現網頁內容的程式語言,常與 CSS 與 JavaScript 一起使用在網頁設計上。
HTML 的基本架構會有「基本的宣告、<head>和<body>」,如下圖所示:
基本的宣告就是指 DOCTYPE 及 語言這段,DOCTYPE 是用來命令且告訴瀏覽器說「這是一個 html 檔」,如果沒有這個宣告的話,網站預設顯示就會以「怪異模式quirks mode」顯示,且一併影響 CSS 的樣式等;接著就是用<html></html>來包住下方的所有程式,而起始的 lang 也就是<html lang=””>這段,這表示網頁的內容顯示的語言為何,這裡不會影響網頁呈現。
在<html>中,主要會有兩大結構,也就是<head>和<body>。
<head>中的內容通常是用來聲明頁面的名稱、標題、關鍵字與一些meta元素…等,主要不是給人看的,而是給機器運作與搜尋所使用,所以<head>中的資料不會顯示在頁面中,而<body>中的內容才會是網頁真正跑給使用者看的,比如標題語法、超連結或目錄…等。
※ 怪異模式 quirks mode:
指在計算機領域中,一些網頁瀏覽器為了維持對較舊的網頁設計的向後兼容性,而使用的一種技術,有別於嚴格遵循全球資訊網聯盟(W3C)與網際網路工程任務組(IETF)標準而設計的「標準模式」。
資料來源:維基百科|怪異模式
HTML head與body
網站的程式內容,基本上都會分別寫在 head 與 body 之中,如上所述,<head>中的內容不會顯示在頁面中,它是元素與數據內容的容器,主要是寫給機器運作與搜尋使用的,而<body>是網頁所有顯示內容的容器,是網頁真正要跑給使用者看的內容。
我們可以將這兩者理解成:
- head 是腦袋,想法、思考或內含,這種東西是其他人是看不到的,所以不會顯示。
- body 是身體、主體,身體、穿衣打扮及外表是大家都看的到的,所以會顯示、也是主體。
如果有人問「head與body有什麼區別?」就是上述所介紹的,並且 head 與 body 的內容位置也不可互相替換。
➤ <head>
head 主要是用來放置告訴搜尋引擎網站中有什麼樣內容的標籤、定義網頁使用的樣式或控制網頁與外部第三方程式碼的連結,像是 GA、GTM 或 FB Pixel 這種第三方追蹤程式碼就會放在 head 中。
另外在 head 中,常用的標籤還有 title、meta、link、script 與 style 等,列舉幾個常見的範例說明:
- <meta charset=”UTF-8″>用來告訴瀏覽器網頁的編碼方式
- <meta name=”description” content=” “>用來描寫網站的簡述說明
- <meta name=”keywords” content=” “>用來放置網站的搜尋關鍵字
- <link rel=”canonical” href=” “>告訴搜尋引擎標準重複頁面的網址
➤ <body>
網站要提供給使用者瀏覽、要跑給使用者看的東西都會放在 body 中,包括網站的標題標籤(h1~h6)、圖片img、超連結或列表表格,或是你現在正在看的文章都是被放在 body 中的內容。
列舉幾項常見語法:
- <h1></h1>
- <h3></h3>
- <h5></h5>
- <img alt=”說明文字” src=”圖片網址” />
- <a href=”網址連結” target=”_blank”>超連結文字
參考資料:
✓ Jerry Lin|HTML5 基礎語法-結構
延伸閱讀:
✓ HTML是什麼?HTML基礎應用與解說
✓ HTML5是什麼?讓網頁效能更上一層樓的HTML5基本介紹
✓ 網頁中的meta是什麼?html meta tag介紹
✓ W3C是什麼?網頁設計符合W3C標準結構建立網頁語法有什麼好處?