網頁中的head與body是什麼?HTML的head、body介紹| 網頁設計

user

網頁中的head與body是什麼?HTML的head、body介紹|天矽科技網頁設計

 

HTML的head和body是HTML基本架構中重要的兩大區塊,head主要是放置一些給機器運作、搜尋引擎搜尋的爬蟲所看,不是給一般使用者檢視的區塊,而body才會是網站的主體,是網站要給使用者檢視資料的區塊。

 

建立網頁HTML的基本架構

 HTML (Hyper Text Markup Language) 超文本標記語言,一種建立網頁的標準標記語言,用來組織架構並呈現網頁內容的程式語言,常與 CSS 與 JavaScript 一起使用在網頁設計上。

 HTML 的基本架構會有「基本的宣告、<head>和<body>」,如下圖所示:

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=” “>告訴搜尋引擎標準重複頁面的網址

head

 

<body>

 網站要提供給使用者瀏覽、要跑給使用者看的東西都會放在 body 中,包括網站的標題標籤(h1~h6)、圖片img、超連結或列表表格,或是你現在正在看的文章都是被放在 body 中的內容。

列舉幾項常見語法:

  • <h1></h1>
  • <h3></h3>
  • <h5></h5>
  • <img alt=”說明文字” src=”圖片網址” />
  • <a href=”網址連結” target=”_blank”>超連結文字

body

參考資料:
Jerry Lin|HTML5 基礎語法-結構

延伸閱讀:
HTML是什麼?HTML基礎應用與解說
HTML5是什麼?讓網頁效能更上一層樓的HTML5基本介紹
網頁中的meta是什麼?html meta tag介紹
W3C是什麼?網頁設計符合W3C標準結構建立網頁語法有什麼好處?

 

share

FB


LINE

回上一頁

延伸閱讀