語義類標簽是什么，使用它有什么好處？

語義類標簽也是大家工作中經常會用到的一類標簽，它們的特點是視覺表現上互相都差不多，主要的區別在于它們表示了不同的語義，比如大家會經常見到的section、nav、p，這些都是語義類的標簽。
語義是我們說話表達的意思，多數的語義實際上都是由文字來承載的。語義類標簽則是純文字的補充，比如標題、自然段、章節、列表，這些內容都是純文字無法表達的，我們需要依靠語義標簽代為表達。

很多工作場景里，語義類標簽有它們自己無可替代的優點。正確地使用語義標簽可以帶來很多好處。

• 語義類標簽對開發者更為友好，使用語義類標簽增強了可讀性，即便是在沒有CSS的時候，開發者也能夠清晰地看出網頁的結構，也更為便于團隊的開發和維護。
• 除了對人類友好之外，語義類標簽也十分適宜機器閱讀。它的文字表現力豐富，更適合搜索引擎檢索（SEO），也可以讓搜索引擎爬蟲更好地獲取到更多有效信息，有效提升網頁的搜索量，并且語義類還可以支持讀屏軟件，根據文章可以自動生成目錄等等。

語義化標簽學習的總結：

1）ul,ol的區別：

ul是無序列表，ol是有序列表，ul可以用來做菜單欄包裹，ol可以用作有順序的列表，如：1.內容一

2.內容二

3.內容三

2）語義化標簽的作用

1.自然語言表達能力補充，如：<em>用來表達詞語的肯定，<strong>用來加粗字體

2.文章標題摘要，如：合理運用h1,h2標簽來表述標題的上下關系

3.適合機器閱讀的整體結構，如：<time datetime="2015-07-09">9 July 2015</time>這句就更容易讓機器閱讀。

3）常見的以及一些有用的標簽

• <section>：從HTML 5開始，我們有了section標簽，這個標簽可不僅僅是一個“有語義的div”，它會改變h1-h6的語義。section的嵌套會使得其中的h1-h6下降一級，因此，在HTML5以后，我們只需要section和h1就足以形成文檔的樹形結構：

<section>
<h1>HTML語義</h1>
<p>balah balah balah balah</p>
<section>
<h1>弱語義</h1>
<p>balah balah</p>
</section>
<section>
<h1>結構性元素</h1>
<p>balah balah</p>
</section>
......
</section>

• <code>：code可以包裹html語句而不會被瀏覽器再去解析。
• <pre>，<samp>：這是一段HTTP協議的內容描述，因為這段內容的換行是非常嚴格的，所以我們不需要瀏覽器幫我們做自動換行，因此我們使用了pre標簽，表示這部分內容是預先排版過的，不需要瀏覽器進行排版。

又因為這是一段計算機程序的示例輸出，所以我們可以使用samp標簽：

<pre><samp>
GET /home.html HTTP/1.1
Host: www.example.org
</samp></pre>

• <aside>：一般用作側邊欄的包裹標簽
• <hgroup>：h標簽的標簽組，

<hgroup> <h1>World Wide Web </h1> <h2>From Wikipedia, the free encyclopedia</h2> </hgroup>。

• <nav>:一般用作導航欄。

個人學習筆記，如有錯誤歡迎指正~

總結

以上是生活随笔為你收集整理的html 树形结构_HTML学习之语义化标签的全部內容，希望文章能夠幫你解決所遇到的問題。

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