如何理解HTML結構的語義化？

這裏是修真院前端小課堂，每篇分享文從

【背景介紹】【知識剖析】【常見問題】【解決方案】【編碼實戰】【擴展思考】【更多討論】【參考文獻】

八個方面深度解析前端知識/技能，本篇分享的是：

【

如何理解HTML結構的語義化？

】

你們好，我是IT修真院西安分院第5期的學員阮少凡，一枚正直純潔善良的web程序員，今天給你們分享一下，修真院官網css任務四，深度思考中的知識點——如何理解HTML結構的語義化？

 

 

1.背景介紹

HTML結構語義化，是最近幾年才提出來的，之前的html結構，都是一堆的沒有語義的冷冰冰的標籤。最氾濫的就是div+css,之前的頁面，一上來就是一堆的div+css, 

爲了改變這種這種情況，開發者們和官方提出了讓HTML結構語義化的概念，而且官方w3c，也在HTML5給出了幾個新的語義化的標籤。 

2.知識剖析

什麼是語義化？

字面意思就是說根據咱們所說的話，就能瞭解其中的含義。

語義化，故名思意，就是你寫的HTml結構，是用相對應的有必定語義的英文字母（標籤）表示的，標記的，由於HTML自己就是標記語言。不只對本身來講，容易閱讀，書寫。別人看你的代碼和結構也容易理解，甚至對一些不是作網頁開發的人來講，也容易閱讀。

什麼是HTML語義化？

首先標籤語義化是指HTML，不是CSS, 語義化標籤只是HTML，CSS不存在語義化。HTML是標籤，CSS是屬性。

在最初html裏標籤的語義，咱們看到table,就會知道這是列表，看到p，就知道這是段落，看到img知道是圖片，看到input就知道這是一個表單，h1~h6是標題。 機器和人類相比笨多了，可是隻要咱們設定好程序，上面的標籤的意思機器也能讀懂。

 可是也有些是無語義化的如div---division並不能表示div標籤裏面內容的屬性和表現樣式

 HTML 標籤語義化是讓你們直觀的經過標籤(markup)和屬性(attribute)來知道其用途和做用。

怎樣判斷標籤是否語義化

去掉樣式，看網頁結構是否組織良好有序，是否仍然有很好的可讀性。

寫HTML代碼時應注意什麼？

1.儘量少的使用無語義的標籤div和span；

2.在語義不明顯時，既可使用div或者p時，儘可能用p, 由於p在默認狀況下有上下間距，對兼容特殊終端有利；

3.不要使用純樣式標籤，如：b、font、u等，改用css設置。

4.須要強調的文本，能夠包含在strong或者em標籤中（瀏覽器預設樣式，能用CSS指定就不用他們），strong默認樣式是加粗（不要用b），em是斜體（不用i）；

5.使用表格時，標題要用caption，表頭用thead，主體部分用tbody包圍，尾部用tfoot包圍。表頭和通常單元格要區分開，表頭用th，單元格用td；

6.每一個input標籤對應的說明文本都須要使用label標籤，而且經過爲input設置id屬性，在lable標籤中設置for=someld來讓說明文本和相對應的input關聯起來

                    

3.常見問題

實現HTML語義化好處有哪些？

4.解決方案

 1.清晰的頁面結構。去掉或樣式丟失的時候,也能讓頁面呈現清晰的結構，加強頁面的可讀性。

 2.支持更多的設備。屏幕閱讀器會徹底根據你的標記來「讀」你的網頁。更好的支持瀏覽器的閱讀模式等。

 3.有利於SEO(搜索引擎優化)。和搜索引擎創建良好溝通，有助於爬蟲抓取更多的有效信息，搜索引擎的爬蟲也依賴於標記來肯定上下文和各個關鍵字的權重。

 4.便於團隊開發和維護。在團隊中你們都遵循同一個標準，能夠減小不少差別化的東西，方便開發和維護，提升開發效率，甚至實現模塊化開發。

 5.方便其餘設備解析（如屏幕閱讀器、盲人閱讀器、移動設備）以意義的方式來渲染網頁；

5.編碼實戰

 

6.擴展思考

b標籤，i標籤 ，strong標籤，em標籤的區別

        (b)，(i)標籤 是視覺要素（presentationl elements），分別表示無心義的加粗，無心義的斜體，僅僅表示「這裏應該用粗體顯示」或者「這裏應該用斜體顯示」，此兩個標籤在HTML4.01中並不被推薦使用。

       (em)、(strong)是表達要素(phrase elements)。(em) （emphasized text）表示通常的強調文本，而(strong) （strong emphasized text）表示比(em) 語義更強的的強調文本。

        在新的HTML5工做草案中：（em）和（strong）仍舊是表達要素(phrase elements)。但這時的（strong）表示html頁面上的強調（emphasized text），（em） 表示句子中的強調（即強調語義）

 

 

7.參考文獻

參考一：HTML5新標籤

參考二：html語義化PPT 

 

8.更多討論

 

9.結束語：

今天的分享就到這裏啦，歡迎你們點贊、轉發、留言、拍磚~