小編給大家分享一下HTML標簽語義化的示例分析，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
一個頁面比作房子，那HTML就是鋼筋混凝土的墻，房蓋房梁一樣的架子；而CSS就是裝飾材料，地板油漆一類的東西。好的頁面結構就是在沒有CSS裝飾的情況下，頁面結構依然清晰明了，房屋依然可現。而人們常說的DIV+CSS，只是通俗的說法，并不是通篇的DIV，記?。篋IV不是神！
HTML是一種對文本內容和意義（即語義）的補充說法。它會告訴我們說：“這行是一個標題，這幾行組成一個段落，這是一個項目列表，那是一個鏈接?！倍皇莵砀嬖V我們：“這些字是藍色的，那些又是紅色的，這部分內容靠右，這幾個是斜體?！边@些是CSS的工作?？傊篐TML告訴我們一塊內容是什么（或其意義），而不是它長什么樣子。
代碼如下:
<!--未語義化-->
<div id="header">
<div class="H3">前磚攻城師</div>
<div class="h3">搭積木也要玩藝術</div>
</div>
<!--語義化之后-->
<div id="header">
<H3>前磚攻城師</H3>
<h3>搭積木也要玩藝術</h3>
</div>
去掉樣式能讓頁面結構呈現清晰
屏幕閱讀器會按標記“讀”你的網頁
有益于SEO
便于團隊開發和維護
附:HTML5新增元素
| 標簽 | 含義 | 與html4對照 |
| <article> | 標簽定義外部的內容。比如來自一個外部的新聞提供者的一篇新的文章，或者來自 blog 的文本，或者是來自論壇的文本。亦或是來自其他外部源內容 | HTML5:<article></article> HTML4:<div></div> |
| <section> | 標簽定義文檔中的節（section、區段）。比如章節、頁眉、頁腳或文檔中的其他部分。 | HTML5: <section></section> HTML4: <div></div> |
| <aside> | 標簽定義 article 以外的內容。aside 的內容應該與 article 的內容相關。 | HTML5:<aside>Aside 的內容是獨立的內容，但應與文檔內容相關。</aside> HTML4:<div>Aside 的內容是獨立的內容，但應與文檔內容相關。</div> |
| <header> | 標簽定義 section 或 document 的頁眉。 | HTML5: <header></header> HTML4: <div></div> |
| <footer> | 標簽定義 section 或 document 的頁腳。典型地，它會包含創作者的姓名、文檔的創作日期以及/或者聯系信息。 | HTML5: <footer></footer> HTML4: <div></div> |
| <hgroup> | 標簽用于對網頁或區段（section）的標題進行組合。 | HTML5: <hgroup></hgroup> HTML4: <div></div> |
| <nav> | 標簽定義導航鏈接的部分 | HTML5: <nav></nav> HTML4:<ul></ul> |
| <canvas> | 標簽定義圖形，比如圖表和其他圖像。這個 HTML 元素是為了客戶端矢量圖形而設計的。它自己沒有行為，但卻把一個繪圖 API 展現給客戶端 JavaScript 以使腳本能夠把想繪制的東西都繪制到一塊畫布上。 | HTML5:<canvas id="myCanvas" width="200" height="200"></canvas> HTML4:<object data="inc/hdr.svg" type="image/svg+xml" width="200" height="200"></object> |
| <video> | 標簽定義視頻，比如電影片段或其他視頻流。 | HTML5: <video src="movie.ogg" controls="controls">您的瀏覽器不支持 video 標簽。</video> HTML4:<object type="video/ogg" data="movie.ogv"><param name="src" value="movie.ogv"></object> |
| <audio> | 標簽定義聲音，比如音樂或其他音頻流。 | HTML5:<audio src="someaudio.wav">您的瀏覽器不支持 audio 標簽。</audio> HTML4:<object type="application/ogg" data="someaudio.wav"><param name="src" value="someaudio.wav"></object> |
| <embed> | 標簽定義嵌入的內容，比如插件。 | HTML5: <embed src="horse.wav" /> HTML4: <object data="flash.swf" type="application/x-shockwave-flash"></object> |
| <source> | 標簽為媒介元素（比如 <video> 和 <audio>）定義媒介資源。 | HTML5: <source> HTML4: <param> |
| <datalist> | 標簽定義可選數據的列表。與 input 元素配合使用，就可以制作出輸入值的下拉列表。 | HTML5: <datalist></datalist> HTML4: none |
| <details> | 標簽定義元素的細節，用戶可進行查看，或通過點擊進行隱藏。與 <legend> 一起使用，來制作 detail 的標題。該標題對用戶是可見的，當在其上點擊時可打開或關閉 detail。 | HTML5: <details></details> HTML4: <dl style="display:hidden"></dl> |
| <summary> | 標簽包含 details 元素的標題，”details” 元素用于描述有關文檔或文檔片段的詳細信息?！眘ummary” 元素應該是 “details” 元素的第一個子元素。 | HTML5: <details><summary>HTML 5</summary>This document teaches you everything you have to learn about HTML 5.</details> HTML4: none |
| <figure> | 標簽用于對元素進行組合。使用 <figcaption> 元素為元素組添加標題。 | HTML5: <figure><figcaption>PRC</figcaption><p>The People's Republic of China was born in 1949...</p></figure> HTML4: <dl><H3>PRC</H3><p>The People's Republic of China was born in 1949...</p></dl> |
| <figcaption> | 標簽定義 figure 元素的標題?！眆igcaption” 元素應該被置于 “figure” 元素的第一個或最后一個子元素的位置。 | HTML5: <figure><figcaption>PRC</figcaption></figure> HTML4: none |
| <mark> | 主要用來在視覺上向用戶呈現那些需要突出的文字。<mark>標簽的一個比較典型的應用就是在搜索結果中向用戶高亮顯示搜索關鍵詞。 | HTML5: <mark></mark> HTML4: <span></span |
| <meter> | 標簽定義度量衡。僅用于已知最大和最小值的度量。必須定義度量的范圍，既可以在元素的文本中，也可以在 min/max 屬性中定義。 | HTML5: <meter></meter> HTML4: none |
| <output> | 標簽定義不同類型的輸出，比如腳本的輸出。 | HTML5: <output></output> HTML4: <span></span> |
| <progress> | 標簽運行中的進程?？梢允褂?<progress> 標簽來顯示 JavaScript 中耗費時間的函數的進程。 | HTML5: <progress></progress> HTML4: none |
| <time> | 標簽定義日期或時間，或者兩者。 | HTML5: <time></time> HTML4: <span></span> |
| <keygen> | 標簽用于對網頁或區段（section）的標題進行組合 | HTML5: <keygen> HTML4: none |
| <command> | 標簽定義命令按鈕，比如單選按鈕、復選框或按鈕。 | HTML5: <command onclick=cut()" label="cut"> HTML4: none |
以上是“HTML標簽語義化的示例分析”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
