HTML2 - Body 與內容 Tags

HTML2 專心講 body 內的內容結構與常見 tags。HTML1 已經處理完文件骨架和 head，這裡不再重覆展開。

只做快速複習： head 放文件資訊，body 放使用者會看到的內容。由這一頁開始，重點轉去頁面內容本身。

2.2.1 - 2.2.6

主體結構

<body>
  <header>
    <h1>網站標題</h1>
  </header>

  <nav>
    <a href="#">首頁</a>
    <a href="#">關於</a>
  </nav>

  <main>
    <section id="companyInfo">
      <article>
        <h2>About Us</h2>
        <p>內容</p>
      </article>
    </section>
  </main>

  <aside>補充內容</aside>
  <footer>頁尾資料</footer>
</body>

header：頁面頭欄位
nav：導航連結
main：主要內容
section：內容分組
article：內文內容
aside：補充內容
footer：頁尾資料
id：指定唯一元素名稱，方便定位與連結

內容 tags

HTML2 要熟的常見標籤

基本內容

div
span
br
p
a
time

格式標籤

b、strong
i、em
mark、small
del、ins
sub、sup

清單與引用

ul、ol、dl
blockquote、q
cite

其他標籤

address
bdo
hr
meter
progress
wbr

2.3.1

超連結 `<a>` 與頁內定位

<a href="https://example.com" target="_blank">網站連結</a>
<a href="#companyInfo">跳到指定位置</a>

href：連結目標
target="_blank"：在新分頁打開
#id：跳到頁面中的指定位置

2.3.2 - 2.3.4

時間與清單

<time datetime="2026-06-30">2026 年 6 月 30 日</time>

<ul>
  <li>項目一</li>
</ul>

<ol>
  <li>第一步</li>
</ol>

<dl>
  <dt>HTML</dt>
  <dd>網頁標記語言</dd>
</dl>

time 可配合 datetime 使用
ul：無序清單
ol：有序清單
dl：資料清單

2.3.5 - 2.3.11

引用與其他補充 tags

<blockquote>這是一段區塊引文</blockquote>
<q>這是一段行內引文</q>
<cite>作品名稱</cite>
<address>聯絡資料</address>
<hr>
<meter value="0.7"></meter>
<progress value="50" max="100"></progress>

這些 tags 在 HTML2 先知道用途和典型使用場景就夠，不用每個都死背。

2.4

HTML2 練習方向

請自行完成

延續 HTML1 的骨架，正式把 body 內容填起來。
加入 header、nav、main、section、article、footer。
加入一個超連結、一個 time、一個 ul、一個 ol。
用 id 命名一個唯一元素，並用 #id 連到該位置。
再挑兩個格式 tags，例如 strong、mark、q 放進內容。

前往 HTML3 重點頁

完成版

對應完成練習

以下完成版頁面對應 HTML2 的 body 結構與 CSS 抽離重點，可直接打開作參考。

Exercise 2-1 Body Structure Exercise 2-2 Span to CSS Class 打開完成練習總覽