網頁的語義結構 · HTML基礎

# 網頁的語義結構 HTML 標簽的名稱都帶有語義（semantic），使用時應該盡量符合標簽的語義，不要用錯誤語義的標簽。語義良好的網頁，天然具有良好的結構，對于開發者易讀易寫，容易維護，也能幫助計算機更好地處理網頁內容。 ## 1.含義 HTML 標簽的一個重要作用，就是聲明網頁元素的性質，使得用戶只看標簽，就能了解這個元素的意義，閱讀 HTML 源碼就能了解網頁的大致結構。這被稱為 HTML 的語義原則。下面就是一個典型的語義結構的網頁。 ~~~html <body> <header>頁眉</header> <main> <article> <h1>文章標題</h1> <p>文章內容</p> </article> </main> <footer>頁尾</footer> </body> ~~~ 只看上面的代碼，就可以知道，頁面分成頁眉（`<header>`）、主體（`<main>`）、頁尾（`<footer>`）三個部分。編寫 HTML 網頁，第一步就是寫出語義結構的網頁骨架。 ## 2.常用標簽 ### 2.1 `<header>` `<header>`標簽可以用在多個場景，既可以表示整個網頁的頭部，也可以表示一篇文章或者一個區塊的頭部。如果用在網頁的頭部，就稱為“頁眉”。網站導航和搜索欄通常會放在`<header>`里面。 ~~~html <header> <h1>公司名稱</h1> <ul> <li><a href="/home">首頁</a></li> <li><a href="/about">關于</a></li> <li><a href="/contact">聯系</a></li> </ul> <form target="/search"> <input name="q" type="search" /> <input type="submit" /> </form> </header> ~~~ 如果`<header>`用在文章的頭部，則可以把文章標題、作者等信息放進去。 ~~~html <article> <header> <h2>文章標題</h2> <p>張三，發表于2010年1月1日</p> </header> </article> ~~~ 由于`<header>`可以用在多種場景，所以一個頁面可能包含多個`<header>`，但是一個具體的場景里面只能包含一個，比如網頁的頁眉只能有一個。另外，`<header>`里面不能包含另一個`<header>`或`<footer>`。 ### 2.2 `<footer>` `<footer>`標簽表示網頁、文章或章節的尾部。如果用于整張網頁的尾部，就稱為“頁尾”，通常包含版權信息或者其他相關信息。 ~~~html <body> <footer> <p>? 2018 xxx 公司</p> </footer> </body> ~~~ 上面代碼中，版權信息放在`<footer>`里面。 `<footer>`也可以放在文章里面。 ~~~html <article> <header> <h1>文章標題</h1> </header> <footer> <p>? 禁止轉貼</p> </footer> </body> ~~~ `<footer>`不能嵌套，即內部不能放置另一個`<footer>`，也不能放置`<header>`。 ### 2.3 `<main>` `<main>`標簽表示頁面的主體內容，一個頁面只能有一個`<main>`。 ~~~html <body> <header>頁眉</header> <main> <article>文章</article> </main> <aside>側邊欄</aside> <footer>頁尾</footer> </body> ~~~ 上面代碼就是最典型的頁面結構。注意，`<main>`是頂層標簽，不能放置在`<header>`、`<footer>`、`<article>`、`<aside>`、`<nav>`等標簽之中。另外，功能性區塊（比如搜索欄）不適合放入`<main>`，除非當前頁面就是搜索頁面。 ### 2.4 `<article>` `<article>`標簽表示頁面里面一段完整的內容，即使頁面的其他部分不存在，也具有獨立使用的意義，通常用來表示一篇文章或者一個論壇帖子。它可以有自己的標題（`<h1>`到`<h6>`）。 ~~~html <article> <h2>文章標題</h2> <p>文章內容</p> </article> ~~~ 一個網頁可以包含一個或多個`<article>`，比如包含多篇文章。 ### 2.5 `<aside>` `<aside>`標簽用來放置與網頁或文章主要內容間接相關的部分。網頁級別的`<aside>`，可以用來放置側邊欄，但不一定就在頁面的側邊；文章級別的`<aside>`，可以用來放置評論或注釋。下面是網頁級別的`<aside>`的例子。 ~~~html <body> <main>主體內容</main> <aside>側邊欄</aside> </body> ~~~ 下面是文章評注的例子。 ~~~html <p>第一段</p> <aside> <p>本段是文章的重點。</p> </aside> ~~~ ### 2.6 `<section>` `<section>`標簽表示一個含有主題的獨立部分，通常用在文檔里面表示一個章節，比如`<article>`可以包含多個`<section>`。`<section>`總是多個一起使用，一個頁面不能只有一個`<section>`。 ~~~html <article> <h1>文章標題</h1> <section> <h2>第一章</h2> <p>...</p> </section> <section> <h2>第二章</h2> <p>...</p> </section> </article> ~~~ 上面代碼中，`<article>`包含了兩個`<section>`，代表兩章。 `<section>`很適合幻燈片展示的頁面，每個`<section>`代表一個幻燈片。一般來說，`<section>`都應該有標題，即包含`<h1>`~`<h6>`標簽。多個`<section>`可以放置在同一個`<article>`里面，一個`<section>`里面也可能包含多個`<article>`，這取決于`<section>`和`<article>`在當前頁面的含義。 ### 2.7 `<nav>` `<nav>`標簽用于放置頁面或文檔的導航信息。 ~~~html <nav> <ol> <li><a href="item-a">商品 A</a></li> <li><a href="item-b">商品 B</a></li> <li>商品 C</li> </ol> </nav> ~~~ 一般來說，`<nav>`往往放置在`<header>`里面，不適合放入`<footer>`。另外，一個頁面可以有多個`<nav>`，比如一個用于站點導航，另一個用于文章導航。 ### 2.8 `<h1>`~`<h6>` HTML 提供了6個標簽，用來表示文章的標題。按照標題的等級，一共分成六級。 * `<h1>`：一級標題 * `<h2>`：二級標題 * `<h3>`：三級標題 * `<h4>`：四級標題 * `<h5>`：五級標題 * `<h6>`：六級標題 `<h1>`是最高級別的標題，`<h6>`是最低級別的標題。下一級標題都是上一級標題的子標題，比如，一個`<h1>`后面可以有多個`<h2>`，每個`<h2>`后面又可以有多個`<h3>`。 ~~~html <body> <h1>JavaScript 語言介紹</h1> <h2>概述</h2> <h2>基本概念</h2> <h3>網頁</h3> <h3>鏈接</h3> <h2>主要用法</h2> </body> ~~~ 上面代碼，通過章節標題，清晰地表明了文章的主體結構。具體的內容，就可以寫在章節標題的下面。標題不應該越級，比如`h1`下面直接寫`h3`。雖然這樣不會報錯，但會導致文章失去清晰的章節結構。默認情況下，瀏覽器會粗體顯示標題。`h1`的字號比`h2`大，`h2`比`h3`大，以此類推。