構建文件結構
除了定義頁面的各個部分（如“段落”或“影像”）之外，HTML 還擁有許多塊級元素，用於定義您網站的區域，例如“頁首”、“導航選單”或“主要內容列”。本文將探討如何規劃基本的網站結構，並編寫 HTML 來表示此結構。
| 預備知識 | 具備 基本 HTML 語法 中涵蓋的基本 HTML 知識。文字級語義，例如 標題和段落 以及 列表。 |
|---|---|
| 學習成果 |
|
文件的基本部分
網頁看起來可能會大相徑庭，但它們都傾向於共享相似的標準組件，除非頁面顯示的是全屏影片或遊戲、是某種藝術專案的一部分，或者結構很差。
- 頭
-
通常頂部會有一個大條幅，其中包含大標題、徽標，可能還有標語。這通常在網站的不同頁面之間保持不變。
-
指向網站主要部分的連結；通常由選單按鈕、連結或選項卡表示。與頁首一樣，此內容通常在不同網頁之間保持一致 — 網站上不一致的導航只會導致使用者感到困惑和沮喪。許多網頁設計師認為導航欄是頁首的一部分，而不是一個獨立的元件，但這並非強制要求；事實上，一些人還認為將兩者分開更有利於可訪問性，因為螢幕閱讀器在兩者分開的情況下可以更好地讀取這兩個功能。
- 主要內容
-
中心的一個大區域，包含給定網頁的大部分獨特內容，例如，您想觀看的影片，或您正在閱讀的主要故事，或您想檢視的地圖，或新聞頭條等。這是網站中唯一肯定會因頁面而異的部分！
-
一些周邊資訊、連結、引用、廣告等。通常，這與主要內容中包含的內容相關（例如在新聞文章頁面上，側邊欄可能包含作者簡介或相關文章連結），但也有些情況下您會發現一些重複元素，如輔助導航系統。
-
頁面底部的一個條幅，通常包含細則、版權宣告或聯絡資訊。這是一個放置公共資訊（如頁首）的地方，但通常這些資訊對網站本身來說不是關鍵的或次要的。頁尾有時也用於SEO目的，透過提供連結以便快速訪問熱門內容。
一個“典型網站”可以這樣構建
注意：上圖展示了文件的主要部分，您可以用 HTML 定義它們。然而，這裡顯示的頁面外觀——包括佈局、顏色和字型——是透過對 HTML 應用CSS 來實現的。
用於構建內容的 HTML
上面顯示的示例並不美觀，但它非常適合說明典型的網站佈局示例。有些網站有更多的列，有些則複雜得多，但您明白這個意思。使用正確的 CSS，您可以使用幾乎任何元素來包裹不同的部分，並使其看起來符合您的要求，但如前所述，我們需要尊重語義並為正確的工作使用正確的元素。
這是因為視覺效果並不能說明全部。我們使用顏色和字型大小來吸引有視力的使用者注意內容中最有用的部分，例如導航選單和相關連結，但對於視力受損的人來說，像“粉色”和“大字型”這樣的概念可能不是很有用，又該如何處理呢？
注意：大約 8% 的男性和 0.5% 的女性是色盲；或者換句話說，大約每 12 名男性中就有 1 名，每 200 名女性中就有 1 名。盲人及視力受損者約佔世界人口的 4-5%（2015 年，有 9.4 億人有不同程度的視力損失，而總人口約為 75 億）。
在你的 HTML 程式碼中，你可以根據內容的功能性來標記內容部分——你可以使用明確表示上述內容部分的元素，輔助技術如螢幕閱讀器可以識別這些元素並幫助完成“查詢主導航”或“查詢主要內容”等任務。正如我們本課程前面提到的，沒有為正確的工作使用正確的元素結構和語義會帶來許多後果。
為了實現這種語義標記，HTML 提供了專用的標籤，您可以用來表示這些部分，例如：
探索我們示例的程式碼
上面看到的例子由以下程式碼表示（您也可以在我們的 GitHub 儲存庫中找到該示例）。我們希望您檢視下面的列表，瞭解構成視覺輸出每個部分的元件。
<!doctype html>
<html lang="en-US">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>My page title</title>
<link
href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300|Sonsie+One"
rel="stylesheet" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<!-- The main header used across all the pages of our website -->
<header>
<h1>Header</h1>
</header>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Our team</a></li>
<li><a href="#">Projects</a></li>
<li><a href="#">Contact</a></li>
</ul>
<!-- A Search form: another common non-linear
way to navigate through a site. -->
<form>
<input type="search" name="q" placeholder="Search query" />
<input type="submit" value="Go!" />
</form>
</nav>
<!-- Our page's main content -->
<main>
<!-- An article -->
<article>
<h2>Article heading</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Donec a diam
lectus. Set sit amet ipsum mauris. Maecenas congue ligula as quam
viverra nec consectetur ant hendrerit. Donec et mollis dolor. Praesent
et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt
congue enim, ut porta lorem lacinia consectetur.
</p>
<section>
<h3>Subsection</h3>
<p>
Donec ut librero sed accu vehicula ultricies a non tortor. Lorem
ipsum dolor sit amet, consectetur adipisicing elit. Aenean ut
gravida lorem. Ut turpis felis, pulvinar a semper sed, adipiscing id
dolor.
</p>
<p>
Pelientesque auctor nisi id magna consequat sagittis. Curabitur
dapibus, enim sit amet elit pharetra tincidunt feugiat nist
imperdiet. Ut convallis libero in urna ultrices accumsan. Donec sed
odio eros.
</p>
</section>
<section>
<h3>Another subsection</h3>
<p>
Donec viverra mi quis quam pulvinar at malesuada arcu rhoncus. Cum
soclis natoque penatibus et manis dis parturient montes, nascetur
ridiculus mus. In rutrum accumsan ultricies. Mauris vitae nisi at
sem facilisis semper ac in est.
</p>
<p>
Vivamus fermentum semper porta. Nunc diam velit, adipscing ut
tristique vitae sagittis vel odio. Maecenas convallis ullamcorper
ultricied. Curabitur ornare, ligula semper consectetur sagittis,
nisi diam iaculis velit, is fringille sem nunc vet mi.
</p>
</section>
</article>
<!-- the aside content can also be nested within the main content -->
<aside>
<h2>Related</h2>
<ul>
<li><a href="#">Oh I do like to be beside the seaside</a></li>
<li><a href="#">Oh I do like to be beside the sea</a></li>
<li><a href="#">Although in the North of England</a></li>
<li><a href="#">It never stops raining</a></li>
<li><a href="#">Oh well…</a></li>
</ul>
</aside>
</main>
<!-- The footer that is used across all the pages of our website -->
<footer>
<p>©Copyright 2050 by nobody. All rights reversed.</p>
</footer>
</body>
</html>
花一些時間仔細閱讀並理解程式碼——程式碼中的註釋也應該能幫助您理解它。在這篇文章中，我們不要求您做更多的事情，因為理解文件佈局的關鍵是編寫一個健全的 HTML 結構，然後用 CSS 進行佈局。我們將等到您開始學習 CSS 佈局作為 CSS 主題的一部分時再進行。
HTML 佈局元素詳解
詳細瞭解所有 HTML 分割槽元素的整體含義是很有益的——這是您隨著 Web 開發經驗的增長而逐步掌握的。您可以透過閱讀我們的HTML 元素參考找到許多詳細資訊。目前，您應該努力理解以下主要定義：
<main>用於此頁面獨有的內容。每頁只使用一次<main>，並將其直接放置在<body>內部。理想情況下，它不應巢狀在其他元素中。<article>包含一個相關內容塊，它可以在沒有頁面其餘部分的情況下獨立存在（例如，一篇獨立的部落格文章）。<section>與<article>類似，但它更側重於將頁面中構成單一功能（如迷你地圖，或一組文章標題和摘要）或主題的單一部分組合在一起。最佳實踐是每個部分都以標題開頭；另請注意，您可以將<article>分解為不同的<section>，或者將<section>分解為不同的<article>，具體取決於上下文。<aside>包含與主要內容沒有直接關係但可以間接提供相關資訊的附加內容（詞彙表條目、作者簡介、相關連結等）。<header>表示一組介紹性內容。如果它是<body>的子元素，則它定義網頁的全域性頁首，但如果它是<article>或<section>的子元素，則它定義該部分的特定頁首（請勿將其與標題和標頭混淆）。<nav>包含頁面的主要導航功能。輔助連結等不會放在導航中。<footer>表示頁面的一組結尾內容。
以上提到的每個元素都可以點選，以閱讀“HTML 元素參考”部分中對應的文章，提供更多關於每個元素的詳細資訊。
非語義包裝器
有時您會遇到無法找到理想的語義元素來將某些專案組合在一起或包裝某些內容的情況。有時您可能只想將一組元素組合在一起，以便用一些CSS或JavaScript將它們作為一個實體來影響。對於這種情況，HTML 提供了<div>和<span>元素。您應該優先將它們與合適的class屬性一起使用，以便為它們提供某種標籤，從而可以輕鬆定位。
<span> 是一個內聯非語義元素，只有在您想不到更好的語義文字元素來包裝內容，或者不想新增任何特定含義時才應使用。例如：
<p>
The King walked drunkenly back to his room at 01:00, the beer doing nothing to
aid him as he staggered through the door.
<span class="editor-note">
[Editor's note: At this point in the play, the lights should be down low].
</span>
</p>
在這種情況下，編輯的註釋只是為戲劇導演提供額外的指導；它不應該具有額外的語義含義。對於有視力的使用者，CSS 可能會用於將註釋與正文略微分開。
<div> 是一個塊級非語義元素，只有在您想不到更好的語義塊級元素來使用，或者不想新增任何特定含義時才應使用。例如，想象一個購物車小部件，您可以在電子商務網站上隨時選擇調出它：
<div class="shopping-cart">
<h2>Shopping cart</h2>
<ul>
<li>
<p>
<a href=""><strong>Silver earrings</strong></a>: $99.95.
</p>
<img src="../products/3333-0985/thumb.png" alt="Silver earrings" />
</li>
<li>…</li>
</ul>
<p>Total cost: $237.89</p>
</div>
這並不是一個真正的 <aside>，因為它不一定與頁面的主要內容相關（您希望它在任何地方都可見）。它甚至不特別需要使用 <section>，因為它不屬於頁面的主要內容。所以在這種情況下，使用 <div> 是可以的。我們添加了一個標題作為路標，以幫助螢幕閱讀器使用者找到它。
警告： div 使用起來非常方便，以至於很容易過度使用。由於它們不帶任何語義價值，它們只會使您的 HTML 程式碼變得混亂。請注意僅在沒有更好的語義解決方案時才使用它們，並儘量減少它們的使用，否則您將難以更新和維護您的文件。
換行符和水平線
<br>：換行符元素
<br> 在段落中建立換行符；它是強制在需要一系列固定短行（例如郵政地址或詩歌）的情況下保持嚴格結構的唯一方法。例如：
<p>
There once was a man named O'Dell<br />
Who loved to write HTML<br />
But his structure was bad, his semantics were sad<br />
and his markup didn't read very well.
</p>
如果沒有 <br> 元素，段落將以一長行呈現（正如我們本課程早些時候所說，HTML 會忽略大多數空白）；有了程式碼中的 <br> 元素，標記將呈現如下：
<hr>：主題分隔符元素
<hr> 元素在文件中建立一條水平線，表示文字中的主題變化（例如主題或場景的變化）。在視覺上它看起來只是一條水平線。例如：
<p>
Ron was backed into a corner by the marauding netherbeasts. Scared, but
determined to protect his friends, he raised his wand and prepared to do
battle, hoping that his distress call had made it through.
</p>
<hr />
<p>
Meanwhile, Harry was sitting at home, staring at his royalty statement and
pondering when the next spin off series would come out, when an enchanted
distress letter flew through his window and landed in his lap. He read it
hazily and sighed; "better get back to work then", he mused.
</p>
將渲染如下
構建一個基本網站
規劃單個網頁結構之後的下一個階段是規劃整個多頁網站的結構，包括它們應如何排列和相互連結以獲得最佳使用者體驗。這被稱為資訊架構。
在一個大型、複雜的網站中，這個過程需要大量的規劃，但對於一個只有幾個頁面的基本網站來說，這可能是一個快速而有趣的練習。
這個過程可能看起來像這樣
-
您會有一些大多數（如果不是所有）頁面都共有的元素——例如導航選單和頁尾內容。例如，如果您的網站是為某個企業設計的，那麼在每個頁面的頁尾中提供聯絡資訊是一個好主意。記下您希望每個頁面都共有的內容。例如：
- 頁首
- 標題和標誌
- 網站語言選擇器
- 導航選單
- 頁尾
- 版權宣告
- 條款和條件、聯絡方式以及無障礙政策的連結
- 頁首
-
接下來，草繪您可能希望每個頁面結構的樣子（它可能看起來像我們上面簡單的網站）。記下每個區塊將是什麼。
-
現在，集思廣益，思考您網站上所有其他（非每個頁面共有）內容。例如：
- 航班
- 住宿
- 交通
- 可做之事
- 特價優惠
- 熱門度假套餐，例如冬季陽光、滑雪
- 搜尋結果
- 評論
- 簽證/入境要求
- 貨幣
- 語言和文化
- 購買假期
-
接下來，嘗試將所有這些內容項進行分組，以便了解哪些部分可能在不同頁面上共存。這與一種名為卡片分類的技術非常相似。
- 搜尋
- 航班
- 住宿
- 交通
- 可做之事
- 特價優惠
- 熱門假期
- 冬季陽光
- 滑雪
- 搜尋結果
- 評論
- 國家特定資訊
- 簽證/入境要求
- 貨幣
- 語言和文化
- 購買假期
- 搜尋
-
現在嘗試草繪一個粗略的站點地圖——為您網站上的每個頁面畫一個框，並畫線以顯示頁面之間典型的流程。主頁可能會在頂部或中心，並連結到大部分（如果不是全部）其他頁面。小型網站中的大多數頁面都應該可以從主導航中訪問，儘管也有例外。您可能還希望包含關於事物如何呈現的註釋。
嘗試為您自己建立的網站進行上述練習。您想製作一個關於什麼內容的網站？作為一項進階目標，利用您迄今為止獲得的 HTML 知識來建立網站上的幾個頁面。您可以使用我們的基本 HTML 模板作為起點。
總結
至此，您應該對如何構建網頁/網站有了更好的理解。在本模組的下一篇文章中，我們將探討如何建立超連結，這是 Web 的基本功能之一。