HTML 內容區 body：常用元素、語意化元素與表單元素

Q: body 和 head 的分工是什麼？

head 放的是描述這份文件的資訊，例如：標題、編碼、樣式與腳本，不會顯示在畫面上；body 放的是文件的內容本身，使用者看得到的一切都寫在這裡。

Q: 什麼是語意化元素？為什麼要用？

語意化元素是本身就說明用途的標籤，例如：header、nav、main、footer。它們讓瀏覽器、搜尋引擎與螢幕閱讀器能分辨區塊的角色，比整頁都用 div 更容易被正確理解。

Q: body 裡的元素有哪幾類？

可以粗分為三類：標題、段落、清單、連結、影像這些最基礎的常用元素；header、main、footer 這類描述結構的語意化元素；以及 form、input、select 這類蒐集使用者資料的表單元素。

<body> 為網頁的內容區，凡是從瀏覽器中看到的影像、文字、動畫、影片，都是放在這個區域。裡面的元素可以粗分三類：最基礎的常用元素、能讓機器讀懂區塊角色的語意化元素，以及蒐集使用者資料的表單元素。

html

<body>
  ...
</body>

它與檔頭 head 是根元素 html 底下的兩大區塊，一份文件中只能有一個 <body>。

常用元素

標題、段落、清單、連結、影像這些最基礎的元素，不論網站大小都躲不掉。選對元素能讓瀏覽器與搜尋引擎更了解內容，讀者也更容易找到重點。

元素	說明
`<h1>`~`<h6>`	六個層級的標題，用來建立內容的層級結構，一頁只放一個 `<h1>`。
`<p>`	段落，內文的標準寫法，段與段之間用它分隔。
`<br>`	換行，只在換行本身就是內容的一部分時使用，例如：詩句、地址。
`<ul>`、`<ol>`、`<dl>`	清單，調換順序意思不變用 `<ul>`、有先後或名次用 `<ol>`、名詞與解釋成對用 `<dl>`。
`<a>`	超連結，用 `href` 指定目的地，開新視窗時要留意 `target` 的安全性寫法。
`<img>`	影像，`src` 指定來源、`alt` 描述內容，並可用屬性控制載入效能。
`<table>`	表格，用來呈現二維的資料，不是拿來排版。
`<iframe>`	內置頁框，把其他網頁、影片或地圖嵌進頁面裡。
`<div>`	區塊容器，本身沒有語意，找不到適合的語意化元素時才用它。
`<span>`	行內容器，本身沒有語意，用來包住一小段文字以便套樣式。

語意化元素

本身就說明用途的元素，用來標示頁首、主要內容、頁尾這些區塊的角色。HTML5 之前這些區塊只能通通用 <div> 表示，改用語意化元素之後，瀏覽器與搜尋引擎才分辨得出各區塊的設計目的。

元素	說明
`<main>`	主要內容，一頁只有一個，放的是這一頁真正的主體。
`<article>`	文章，單獨拿出去也說得通的內容，例如：部落格文章、商品卡片、留言。
`<header>`	頁首，頁面或區塊的開頭，可以只放標題與發布日期。
`<nav>`	導覽，成組的主要導覽連結，例如：主選單、麵包屑、分頁。
`<section>`	章節，有主題性、明確意義的內容區塊，通常會搭配一個標題。
`<footer>`	頁尾，版權、聯絡資訊這類結尾的內容。
`<aside>`	側邊欄，與主要內容間接相關的補充，例如：註解、延伸資訊、廣告。
`<figure>`	圖文引用，帶說明文字的獨立內容，說明寫在 `<figcaption>` 裡。
`<picture>`	響應式影像，依裝置或格式支援度切換圖片來源。

使用 HTML5 語義化標籤的優點如下

可以快速抓到網頁架構和每個區塊的位置。
正確寫法的語意化可以提高 SEO、語音瀏覽器、手機裝置的支援。
不是給我們讀的，是給瀏覽器、爬蟲讀的，供裝置辨識的標籤。
不用使用語意化寫法也寫得出網頁，但正確使用語意，讓瀏覽器能分辨出標題、內容、語氣、重要性。

表單元素

網路上常見的讓使用者自行輸入資料，並可將資料送出至遠端的伺服器。例如：會員登入、購物車、留言板、部落格...等。

元素	說明
`<form>`	表單本體，用 `action` 指定送到哪裡、`method` 指定送出的方式。
`<input>`	輸入欄位，靠 `type` 決定它是文字、密碼、勾選還是檔案上傳。
`<label>`	欄位說明，用 `for` 對應欄位的 `id`，點說明文字也能聚焦到欄位。
`<select>`	下拉選單，選項用 `<option>`，需要分組時再加上 `<optgroup>`。
`<button>`	按鈕，`type` 分成 `submit`、`reset`、`button` 三種，用途各不相同。
`<textarea>`	文字區域，多行輸入用它，而不是 `<input>`。
`<fieldset>`	表單分組，把相關的欄位群組起來，組名寫在 `<legend>` 裡。

一份語意化的頁面骨架

html

<body>
  <header>
    <nav>...</nav>
  </header>

  <main>
    <article>
      <h1>文章標題</h1>
      <p>內文</p>
    </article>
    <aside>...</aside>
  </main>

  <footer>...</footer>
</body>