對HTML語義化的一些理解和記錄

時間 2019-12-08

標籤 html 語義一些理解記錄欄目 HTML 简体版

原文原文鏈接

什麼是HTML語義化

說HTML語義化就要先說說HTML到底負責的什麼？下面摘自維基百科：css

超文本標記語言（英語：HyperText Markup Language，簡稱：HTML）是一種用於建立網頁的標準標記語言。 HTML元素是構建網站的基石。HTML容許嵌入圖像與對象，而且能夠用於建立交互式表單，它被用來結構化信息——例如標題、段落和列表等等，也可用來在必定程度上描述文檔的外觀和語義。關於對於語義化的理解顧軼靈：如何理解 Web 語義化？這裏講的很清楚了我就簡單說一下個人理解：通俗的來說就是從代碼上來展現頁面的結構，而不是從最終視覺上來展現結構。單純的HTML代碼是不帶任何樣式的只是用來標記這一段是標題、這一塊是代碼、那一個是要強調的內容等等，可是爲何咱們只寫HTML在瀏覽器中不一樣的標籤也是有不一樣的樣式呢？那是由於各個瀏覽器都自帶的有相應標籤的默認樣式，爲了方便在沒有設定樣式的狀況下友好的展現頁面。良好的語義化代碼能夠直接從代碼上就能看出來那一塊究竟是要表達什麼內容。html

爲何要使用HTML語義化標籤

爲何要使用語義化標籤？我用DIV+CSS也能作出來同樣的效果，確實單純看效果二者並無什麼區別，可是頁面不止是給人看的，機器也要看爬蟲也要看。網頁結構更清晰方便開發維護：html5

另外，在網絡或其餘緣由頁面樣式文件丟失的時候，盡是div組成的頁面和良好語義結構組成的頁面那個對用戶更友好？segmentfault

優勢

標籤語義化有助於構架良好的HTML結構，有利於搜索引擎的創建索引、抓取。簡單來講，試想在H1標籤中匹配到的關鍵詞和在div中匹配到的關鍵詞搜索引擎會吧那個結果放在前面。
有利於不一樣設備的解析（屏幕閱讀器，盲人閱讀器等）盡是div的頁面這些設備如何區分那些是主要內容優先閱讀？
有利於構建清晰的機構，有利於團隊的開發、維護。

大廠都是怎麼作的？

看一下大廠的操做，打開淘寶的頁面查看它首頁的源碼發現，全局只有一個h1標籤就是他的LOGO。瀏覽器

再往下看主題分欄的標題是h2網絡

再往下看，分欄都是用的h3標籤，而且內部使用了一個隱藏的 <em></em>專門強調處理。

儘管這些東西都是用div+css就能搞出來的，可是它仍是專門使用了相應的語義化標籤來強調做用。ide

寫語義化代碼應該注意什麼

儘量少的使用無語義的標籤div和span；在語義不明顯時，既可使用div或者p時，儘可能用p, 由於p在默認狀況下有上下間距，對兼容特殊終端有利；
不要使用純樣式標籤，如：b、font、u等，改用css設置。須要強調的文本，能夠包含在strong或者em標籤中（瀏覽器預設樣式，能用CSS指定就不用他們），strong默認樣式是加粗（不要用b），em是斜體（不用i）；
使用表格時，標題要用caption，表頭用thead，主體部分用tbody包圍，尾部用tfoot包圍。表頭和通常單元格要區分開，表頭用th，單元格用td；
表單域要用fieldset標籤包起來，並用legend標籤說明表單的用途；每一個input標籤對應的說明文本都須要使用label標籤，而且經過爲input設置id屬性，在lable標籤中設置for=someld來讓說明文本和相對應的input關聯起來。

經常使用的一些語義化標籤

<h1>~<h6> ，做爲標題使用，而且依據重要性遞減，<h1> 是最高的等級。
<p>段落標記，知道了 <p> 做爲段落，你就不會再使用 <br /> 來換行了，並且不須要 <br /> 來區分段落與段落。<p> 中的文字會自動換行，並且換行的效果優於 <br />。段落與段落之間的空隙也能夠利用 CSS 來控制，很容易並且清晰的區分出段落與段落。
<ul>、<ol>、<li>，<ul> 無序列表，這個被你們普遍的使用，<ol> 有序列表不經常使用。在 Web 標準化過程當中，<ul> 還被更多的用於導航條，原本導航條就是個列表，這樣作是徹底正確的，並且當你的瀏覽器不支持 CSS 的時候，導航連接仍然很好使，只是美觀方面差了一點而已。
<dl>、<dt>、<dd>，<dl> 就是「定義列表」。好比說詞典裏面的詞的解釋、定義就能夠用這種列表。dl不單獨使用，它一般與dt和dd一塊兒使用。dl開啓一個定義列表，dt表示要定義的項目名稱，dd表示對dt的項目的描述。
<em>、<strong>，<em> 是用做強調，<strong> 是用做重點強調。
<table>、<thead>、<tbody>、<td>、<th>、<caption>，就是用來作表格不要用來佈局

HTML5新增的那些

HTML5標準更加的講究語義化了，借用一張網上的圖來講明這些新標籤工具

header元素：header 元素表明「網頁」或「section」的頁眉。
footer元素：footer元素表明「網頁」或「section」的頁腳，一般含有該節的一些基本信息，譬如：做者，相關文檔連接，版權資料。
hgroup元素：
nav元素：nav元素表明頁面的導航連接區域。用於定義頁面的主要導航部分。
aside元素：aside元素被包含在article元素中做爲主要內容的附屬信息部分，其中的內容能夠是與當前文章有關的相關資料、標籤、名次解釋等。（特殊的section）
section元素：section元素表明文檔中的「節」或「段」，「段」能夠是指一篇文章裏按照主題的分段；「節」能夠是指一個頁面裏的分組。section一般還帶標題，雖然html5中section會自動給標題h1-h6降級，可是最好手動給他們降級。
article元素：article元素最容易跟section和div容易混淆，其實article表明一個在文檔，頁面或者網站中自成一體的內容，其目的是爲了讓開發者獨立開發或重用。譬如論壇的帖子，博客上的文章，一篇用戶的評論，一個互動的widget小工具。（特殊的section）除了它的內容，article會有一個標題（一般會在header裏），會有一個footer頁腳。