【筆記】HTML語義化

時間 2019-11-06

標籤筆記 html 語義欄目 HTML 简体版

原文原文鏈接

語義化的含義

語義化，個人理解是根據內容使用有含義的標籤或設置有含義的屬性。前端

語義化的做用

HTML結構更加清晰，有助於閱讀和維護
方便機器識別內容，有助於SEO

語義化標籤

我把語義化標籤分爲兩類，一類是用於構建結構的容器標籤，一類是指定具體含義的標籤。如下內容摘自MDN。ide

構建結構的容器標籤

<header>

用於展現介紹性內容，一般包含一組介紹性的或是輔助導航的實用元素。它可能包含一些標題元素，但也可能包含其餘元素，好比 Logo、搜索框、做者名稱，等等。post

使用說明：字體

<header> 元素不是分段內容，所以不會往大綱中引入新的段落。也就是說，<header> 元素一般用於包含周圍部分的標題（h1 至 h6 元素），但這不是必需的。

<main>

呈現應用的主體部分。主體部分由與文檔直接相關，或者擴展於文檔的中心主題、應用的主要功能部分的內容組成。網站

使用說明：代理

這部份內容在文檔中應當是獨一無二的，不包含在任何一系列文檔中重複的內容，好比側邊欄，導航欄連接，版權信息，網站 Logo，搜索框（除非搜索框爲文檔的主要功能）。
<main>對文檔的大綱沒有貢獻;也就是說，與諸如<body>之類的元素，諸如<h2>之類的標題等不一樣，<main>不會影響DOM's頁面結構概念。這是嚴格的信息。

<aside>

表示一個和其他頁面內容幾乎無關的部分，被認爲是獨立於該內容的一部分而且能夠被單獨的拆分出來而不會使總體受影響。其一般表現爲側邊欄或者標註框。code

使用說明：索引

不要使用 <aside> 元素去尾隨括號內的文本，由於這種文本被認爲是主要流內容的一部分。

<footer>

表示根節點元素的頁腳或者最近一個章節內容的頁腳。一個頁腳一般包含該章節做者、版權數據或者與文檔相關的連接等信息。圖片

使用說明：文檔

<footer>元素內的做者信息應包含在<address> 元素中。
<footer>元素不是章節內容，所以在outline中不能包含新的章節。

<nav>

其目的是在當前文檔或其餘文檔中提供導航連接。導航部分的常見示例是菜單，目錄和索引。

使用說明：

並非全部的連接都必須使用<nav>元素,它只用來將一些熱門的連接放入導航欄,例如<footer>元素就經常使用來在頁面底部包含一個不經常使用到,不必加入<nav>的連接列表。
一個網頁也可能含有多個<nav>元素,例如一個是網站內的導航列表,另外一個是本頁面內的導航列表。
對於屏幕閱讀障礙的人,可使用這個元素來肯定是否忽略初始內容。

<article>

表示文檔、頁面、應用或網站中的獨立結構，其意在成爲可獨立分配的或可複用的結構，如在發佈中，它多是論壇帖子、雜誌或新聞文章、博客、用戶提交的評論、交互式組件，或者其餘獨立的內容項目。

使用說明：

每一個<article>，一般包括標題（<h1> - <h6>元素）做爲<article>元素的子元素。
當<article>元素嵌套使用時，則該元素表明與外層元素有關的文章。例如，表明博客評論的<article>元素可嵌套在表明博客文章的<article>元素中。
<article>元素的做者信息可經過<address>元素提供，可是不適用於嵌套的<article>元素。
<article>元素的發佈日期和時間可經過<time>元素的pubdate屬性表示。
可使用<time> 元素的datetime屬性來描述
元素的發佈日期和時間。請注意<time>的pubdate 屬性再也不是W3C HTML5標準。

<section>

表示一個包含在HTML文檔中的獨立部分，它沒有更具體的語義元素來表示，通常來講會有包含一個標題。

使用說明：

通常經過是否包含一個標題做爲子節點來辨識每個<section>。
若是元素內容能夠分爲幾個部分的話，應該使用 <article> 而不是 <section>。
不要把 <section> 元素做爲一個普通的容器來使用，這是本應該是<div>的用法（特別是當片斷僅僅是爲了美化樣式的時候）。通常來講，一個 <section> 應該出如今文檔大綱中。

<details>

可建立一個掛件，僅在被切換成展開狀態時，它纔會顯示內含的信息。<summary> 用做 <details>元素的一個內容的摘要，標題或圖例。

<ol>/<ul>

ol和ul這兩個標籤表示的是列表，區別是是否有順序要求。其子元素<li>表示的是列表項，li的屬性value的值表示列表項的序號。

<dl>

是一個包含術語定義以及描述的列表，一般用於展現詞彙表或者元數據 (鍵-值對列表)。

<dt> 用於在一個定義列表中聲明一個術語。
<dd> 用來指明一個描述列表中一個術語的描述。

<address>

表示其中的 HTML 提供了某我的或某個組織（等等）的聯繫信息。

用法說明節

當表示一個和聯繫信息無關的任意的地址時，請改用 <p> 元素而不是 <address> 元素。
這個元素不能包含除聯繫信息以外的任何信息，好比出版日期（這應當被包含在 <time> 元素之中）。
一般，<address> 元素能夠放在 <footer> 元素之中（若是存在的話）。

指定具體內容的標籤

<h1>–<h6>

標題(Heading)元素呈現了六個不一樣的級別的標題，<h1> 級別最高，而 <h6> 級別最低。

使用說明：

用戶代理可使用標題信息，例如自動構建文檔的目錄。
不要爲了減少標題的字體而使用低級別的標題，而是使用 CSS font-size 屬性。
避免跳過某級標題：始終要從 <h1> 開始，接下來依次使用 <h2> 等等。
使用 <section> 元素時，爲了方便起見，你應該考慮避免在同一個頁面上重複使用 <h1>，<h1> 應被用於表示頁面的標題，其餘的標題當從 <h2> 開始。在使用 section 時，應當爲每一個 section 都使用一個 <h2>。