文件和網站結構
除了定義頁面的各個部分（例如“一段文字”或“一張圖片”）之外，HTML 還擁有許多塊級元素，用於定義網站的區域（例如“頁首”、“導航選單”、“主要內容列”）。本文探討了如何規劃基本的網站結構，以及如何編寫 HTML 來表示此結構。
文件的基本部分
網頁的外觀可能會有很大的不同，但它們通常都包含類似的標準組件，除非頁面正在顯示全屏影片或遊戲，是某種藝術專案的一部分，或者只是結構不良。
- 頁首
-
通常是一條橫跨頂部的寬條，包含大標題、徽標，以及可能還有一條標語。這通常在各個網頁之間保持一致。
-
指向網站主要部分的連結；通常以選單按鈕、連結或選項卡的形式呈現。與頁首一樣，此內容通常在各個網頁之間保持一致——網站上導航不一致只會導致使用者感到困惑和沮喪。許多網頁設計師認為導航欄是頁首的一部分，而不是一個獨立的元件，但這並不是必需的；事實上，有些人還認為將兩者分開對於 無障礙 更好，因為螢幕閱讀器可以更好地讀取這兩個功能，如果它們是分開的。
- 主要內容
-
一個位於中心的較大區域，包含給定網頁的大部分獨特內容，例如，您想觀看的影片、您正在閱讀的主要故事、您想檢視的地圖或新聞標題等。這是網站中唯一一個肯定會因頁面而異的部分！
-
一些外圍資訊、連結、引用、廣告等。通常，這與主要內容中包含的內容相關（例如，在新聞文章頁面上，側邊欄可能包含作者的簡介或相關文章的連結），但也有一些情況，您會發現一些重複出現的元素，例如輔助導航系統。
-
頁面底部的一條橫條，通常包含免責宣告、版權宣告或聯絡資訊。它是一個放置常見資訊（如頁首）的地方，但通常，這些資訊對於網站本身並不重要或次要。頁尾有時也用於 SEO 目的，透過提供快速訪問熱門內容的連結。
“典型網站”的結構可能如下所示
用於構建內容的 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>
<!-- Here is our main header that is 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 is another common non-linear way to navigate through a website. -->
<form>
<input type="search" name="q" placeholder="Search query" />
<input type="submit" value="Go!" />
</form>
</nav>
<!-- Here is our page's main content -->
<main>
<!-- It contains 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>
<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>
<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>
</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>
<!-- And here is our main 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。