技術文章 » 講講對HTML5的一大特性之語意化的理解

講講對HTML5的一大特性之語意化的理解

2022-01-29 07:00:06
本篇文章給大家帶來了關於html中語意化的相關知識，所謂語意化，就是憑著HTML本身，也能體驗出人性化的結構，希望對大家有所幫助。

在講什麼是語意化之前，先看看語意化的背景。

在之前的文章中提到HTML最重要的特性，那就是標籤。但是專案一大，標籤多的看不懂，一堆疊著一堆。一些命名奇奇怪怪，想維護被勸退，團隊共同作業導致團戰開始！

因此語意化迫在眉睫！

什麼是語意化

在我們寫HTML時其實無所謂，因為你裡面長啥樣，使用者看不到，也不用看到。

因為你有CSS的漂亮衣服，即使你的HTML一塌糊塗，CSS也可以讓它光鮮亮麗。

但是使用者看不到，開發者看得到呀！因此，這個語意化的友好者是開發者本身。

所謂語意化，就是憑著HTML本身，也能體驗出人性化的結構！

語意化的好處

  • 在沒有CSS的情況下，頁面也能呈現出很好地內容結構、程式碼結構。這樣開發者一眼就明瞭你的意圖，一秒破冰！

  • 對SEO友好。對開發者友好，那麼對開發者的小蟲子們也是當然！

    當標籤應用得當，體現出上下文中你想要關鍵字的權重，那麼搜尋引擎爬蟲就到了你的頭上了。那麼網站的存取量不就來了嗎。

  • 可以支援一些特殊的裝置（盲人閱讀、移動裝置），網頁翻譯等。

  • 最直觀的一點，便是你的隊友都希望和你合作！你的程式碼的語意化，隊友都愛啊！

    語意化更具可讀性，遵循W3C標準的團隊都遵循這個標準，可以減少差異化。（跳槽快速融入？）

工作中語意化的思考

  • 不要使用一些純樣式標籤，這些CSS會幫我們做到。如：b、font、u等一些標籤。

  • 需要強調的文字，可以包含在strong或者em標籤中（，strong預設樣式是加粗（不要用b），em是斜體（不用i）。使用 mark標籤來表示標註的/突出顯示的文字。

    但是還是可以考慮使用CSS來完成。

  • 每個input標籤對應的說明文字都需要使用label標籤，並且通過為input設定id屬性，在lable標籤中設定for=someld來讓說明文字和相對應的input關聯起來。

  • 表單域要用fieldset標籤包起來，並用legend標籤說明表單的用途。

  • 應該使用<h1> - <h6>來表示標題。

  • 當用CSS寫樣式的時候命名也需要遵循HTML的結構，體現出語意化的本質。

語意化的標籤

1、<header> 標籤定義檔案的頁首

通常包含頁面的正副標題。

<header>
<h1>他真的是美男子嗎?</h1>
<p>據現場勘查，他真的是美男子！</p>
</header>

2、<footer>標籤定義檔案或節的頁尾

頁尾通常包含檔案的作者、版權資訊、使用條款連結、聯絡資訊等等。

可以在一個檔案中使用多<footer>元素。

<footer>
  <p>Posted by: 美男子</p></footer>

3、<main>標籤規定檔案的主要內容。

<main>元素中的內容對於檔案來說應當是唯一的。

它不應包含在檔案中重複出現的內容，比如側欄、導航欄、版權資訊、站點標誌或搜尋表單。

在一個檔案中，不能出現多個 <main> 元素。<main>元素不能是以下元素的後代：<article>、<aside>、<footer>、<header>或 <nav>。

<main>
  <h1>我的介紹</h1>
  <p>我是一個聰明的孩子</p></main>

4、<section> 標籤定義檔案中的片段。

比如章節、頁首、頁尾或檔案中的其他部分。

<section>
  <h1>PRC</h1>
  <p>The People's Republic of China was born in 1949...</p></section>

5、<article> 標籤規定獨立的自包含內容

比如文章下的評論之類的

<article>
   <h1>我為什麼聰明呢</h1>
   <p>我聰明的祕訣是我愛思考</p></article>

6、<aside> 標籤定義其所處內容之外的內容。

用來裝載非正文類的內容。例如廣告，成組的連結，側邊欄等等。

<p>聰明的研究</p><aside>
  <h1>我為什麼聰明呢</h1>
  <p>我聰明的祕訣是我愛思考</p></aside>

7、<nav> 元素代表頁面的導航連結區域。

用於定義頁面的主要導航部分。

<nav>
<ul>
<li><a href=」https://www.baidu.com」>百度</a></li>
<li><a href=」https://www.guizimo.com」>歸子莫</a></li>
</ul>
</nav>

一個語意化模板

先來看一張圖。

HTML語義化

看起來，一個標標致致的HTML結構就很清晰了。

總結

有的朋友肯定會問了，那平時都是用框架寫的程式碼，基本不用用這些，又不是去寫個人網站或者官網，都是寫一些業務型的H5或者後臺管理。

其實對於個人網站或者官網來說，語意化是有實際價值的。而且，這個也是近些年來面試的常問的一題。最重要的是要去學習語意化的含義。做到程式碼語意化，包括函數的命名，元件的命名，元件業務功能的拆分。一直在路上！

推薦教學：《html視訊教學》

以上就是講講對HTML5的一大特性之語意化的理解的詳細內容，更多請關注TW511.COM其它相關文章！