1、什么是HTML語義化？ 根據內容的結構化（內容語義化），選擇合適的標簽（代碼語義化）便于開發者閱讀。寫出更優雅的代碼的同時讓瀏覽器的爬蟲和機器很好地解析。? 2、為什么要語義化？

• 為了在沒有CSS的情況下，頁面也能呈現出很好地內容結構、代碼結構:為了裸奔時好看；
• 用戶體驗：例如title、alt用于解釋名詞或解釋圖片信息、label標簽的活用；
• 有利于SEO：和搜索引擎建立良好溝通，有助于爬蟲抓取更多的有效信息：爬蟲依賴于標簽來確定上下文和各個關鍵字的權重；
• 方便其他設備解析（如屏幕閱讀器、盲人閱讀器、移動設備）以意義的方式來渲染網頁；
• 便于團隊開發和維護，語義化更具可讀性。

3、寫HTML代碼時應注意什么？

• 盡可能少的使用無語義的標簽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關聯起來。

過分使用diV標簽，html的語義化很不好，div?是一個沒有語義的標簽，但是沒有語義不代表沒有意義，我的建議div只用來構建布局，除此之外盡量不用。 Div與span在html中都是用在輔助布局的，都是沒有語義的，不同點是，div是塊元素，span是內聯元素，從邏輯結構上講，div?用來劃分塊元素，span用來劃分內聯元素。把<a>里邊套一個<span>我們常用的技巧。檢查Html頁面是否語義化最好的方法, 便是去掉頁面的Css鏈接, 看網頁結構是否井然有序, 頁面是否仍然有很好的可讀性。 HTML5新增了一些互動標簽(details+summary,datalist,input[date/range/tel/color]...) 遇到互動類標簽，比如details，系統(瀏覽器)會自動綁定對應的UI界面和事件(Shadow DOM)，不需要要任何代碼，代碼和瀏覽器直接溝通。 //details+summary實現以前我們用js才能實現的顯示更多的功能。 <details><summary>了解更多</summary>HTML中的標簽、屬性、屬性值太多了，HTML5出來之后就更多了HTML中的標簽、屬性、屬性值太多了，HTML5出來之后就更多了HTML中的標簽、屬性、屬性值太多了，HTML5出來之后就更多了 </details>//input+datalist實現輸入框既可輸入有課下拉選擇。 <input value="男" name="sex" list="sexes"><datalist id="sexes"><option value="男"><option value="女"></datalist>

頁面常用布局組織結構 在HTML 5出來之前，我們用div來表示頁面章節，但是這些div都沒有實際意義。 但是也不要因為html5新標簽的出現，而隨意用之，錯誤的使用肯定會事與愿違。所以有些地方還是要用div的，就是因為div沒有任何意義的元素，他只是一個標簽，僅僅是用來構建外觀和結構。因此是最適合做容器的標簽。不可能這些語義標簽對所以設計目標的適應。只是一定程度上的“通用”，我們的目標是讓爬蟲讀懂重要的東西就夠了。 節點元素標簽因使用的地方不同，我將他們分為：節元素標簽、文本元素標簽、分組元素標簽 header元素 header 元素代表“網頁”或“section”的頁眉。 通常包含h1-h6元素或hgroup，作為整個頁面或者一個內容塊的標題。也可以包裹一節的目錄部分，一個搜索框，一個nav，或者任何相關logo。整個頁面沒有限制header元素的個數，可以擁有多個，可以為每個內容塊增加一個header元素 <header><hgroup><h1>網站標題</h1><h1>網站副標題</h1></hgroup> </header>

footer元素代表“網頁”或“section”的頁腳，通常含有該節的一些基本信息，譬如：作者，相關文檔鏈接，版權資料。 hgroup元素代表“網頁”或“section”的標題，當元素有多個層級時，該元素可以將h1到h6元素放在其內，譬如文章的主標題和副標題的組合

hgroup使用注意：

• 如果只需要一個h1-h6標簽就不用hgroup
• 如果有連續多個h1-h6標簽就用hgroup
• 如果有連續多個標題和其他文章數據，h1-h6標簽就用hgroup包住，和其他文章元數據一起放入header標簽

nav元素代表頁面的導航鏈接區域。用于定義頁面的主要導航部分。 <nav><ul><li>HTML 5</li><li>CSS3</li><li>JavaScript</li></ul> </nav>

aside元素被包含在article元素中作為主要內容的附屬信息部分，其中的內容可以是與當前文章有關的相關資料、標簽、名次解釋等。（特殊的section） 在article元素之外使用作為頁面或站點全局的附屬信息部分。最典型的是側邊欄

<article><p>內容</p><aside><h1>作者簡介</h1><p>圣耀，前端一枚</p></aside> </article>

aside使用總結：

• aside在article內表示主要內容的附屬信息，
• 在article之外則可做側邊欄，沒有article與之對應，最好不用。
• 如果是廣告，其他日志鏈接或者其他分類導航也可以用

section元素代表文檔中的“節”或“段”，“段”可以是指一篇文章里按照主題的分段；“節”可以是指一個頁面里的分組。 section通常還帶標題，雖然html5中section會自動給標題h1-h6降級，但是最好手動給他們降級。 <section><h1>section是啥？</h1><article><h2>關于section</h1><p>section的介紹</p><section><h3>關于其他</h3><p>關于其他section的介紹</p></section></article> </section>

• 表示文檔中的節或者段；
• article、nav、aside可以理解為特殊的section，所以如果可以用article、nav、aside就不要用section，沒實際意義的就用div
• article代表一個在文檔，頁面或者網站中自成一體的內容，其目的是為了讓開發者獨立開發或重用。會有一個標題（通常會在header里），會有一個footer頁腳。我們舉幾個例子介紹一下article，好更好區分article、section、div

<article><h1>一篇文章</h1><p>文章內容..</p><footer><p><small>版權：XXXX，作者：XXXX</small></p></footer> </article>

如果在article內部再嵌套article，那就代表內嵌的article是與它外部的內容有關聯的，如博客文章下面的評論

//article內部嵌套section <article><h1>前端技術</h1><p>前端技術有那些</p><section><h2>CSS</h2><p>樣式..</p></section><section><h2>JS</h2><p>腳本</p></section> </article>

article是大主體，section是構成這個大主體的一部分。本網站的全部文章都是article嵌套一個個section章節，這樣能讓瀏覽器更容易區分各個章節所包括的內容。 同樣section內部嵌套article也是存在的 HTML5節元素標簽包括body article nav aside section header footer hgroup?，還有h1-h6 address。

• address代表區塊容器，必須是作為聯系信息出現，郵編地址、郵件地址等等,一般出現在footer。
• h1-h6因為hgroup，section和article的出現，h1-h6定義也發生了變化，允許一張頁面出現多個h1。

文字對SEO影響很大，而HTML5對一些文本字體元素的語義又重新定義了一遍，也增加了一些新的。

• a（anchor 的縮寫）： 用于定義超鏈接
• em(emphasis 的縮寫)：em 是句意強調，加與不加會引起語義變化，也可以理解為局部強調，用在語句某個單詞上來改變句子的側重。
• strong：strong表示重要，strong 的強調則是一種隨意無順序的，看見某文時，立刻就凸顯出來的關鍵詞句。
• p：p元素
• b（bold 的縮寫）：b 元素原本就是加粗，現在表示“文體突出”文字，通俗將是用來在文本中高亮顯示某個或者幾個字符，旨在引起用戶的特別注意，無強調作用。譬如文檔概要中的關鍵字，評論中的產品名，以及分類名。
• i（italic 的縮寫）：i 元素原本只是傾斜，現在描述為在普通文章中突出不同意見或語氣或其他的一段文本，就像劇本里的話外音（外語、譯音），或也可以用做排版的斜體文字。
• code：定義計算機代碼文本。
• q（quote 的縮寫）：用于定義一段引用的內容（短內容）
• cite?：用于定義引用內容出自書籍或雜志等的標題，不允許其他信息，如作者，日期等。
• u?（underline 的縮寫）：定義下劃線文本
• abbr?（abbreviation 的縮寫）：定義一個縮寫文本，建議在 abbr 的 title 屬性中描述縮寫的全稱
• dfn?（defining instance 的縮寫）：用于定義一個術語
• var?：定義計算機代碼中的變量
• samp?（sample 的縮寫）：由程序輸出的示例文本
• kbd?（keyboard 的縮寫）：定義由鍵盤輸入的文本
• wbr?(word break)的縮寫：定義換行的時機
• span?：沒有任何語義
• br?：定義一個換行符
• time元素也是文本標簽，time元素用來標記一篇文章的發布時間。

熟悉的div、 p 、dl 、dt、dd、ol、ul、li、hr都是分組元素標簽，看一些不常用的和新加的分組元素標簽

• blockquote：標記一段長引文。標記短引文（行內引文），應采用 q 元素！
• pre：pre 元素可定義預格式化的文本。

figure元素與figcaption元素 figure元素用來包含一塊獨立內容，該內容如果被移除掉不會對周圍的內容有影響。具體來說它可以用來表示圖片，統計圖，圖表，音頻，視頻，代碼片段等。 嵌入元素包括img（圖片），頁面（iframe），多媒體對象將不再全部綁定在 object 或 embed 標簽 中，而是由有 video(視頻)audio（音頻），用于繪畫的 canvas 元素 參考鏈接： http://www.html5jscss.com/html5-semantics-section.html http://www.html5jscss.com/html5-semantics-rich.html

轉載于:https://www.cnblogs.com/chenlogin/p/5099815.html

總結

以上是生活随笔為你收集整理的HTML语意化的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。