文章目錄
- 前言
- 一、什么叫HTML標簽的語意化
- 二、使用場景
- 1.檔案類頁面
- 2.詞條類頁面
- 使用意義
- 使用注意
- 總結
前言
最近學習著 重學前端，但有些內容可能平時用不太上，故將知識和理解加工成文章，共享給大家，希望大家不吝指教！
本篇做一個總起，后面會記錄一些語意化標簽，以追根溯源的文章形式陸續放出~
一、什么叫HTML標簽的語意化
先上MDN的說法吧：HTML中的語意
可能做出來的頁面沒什么區別，像paragraph標簽與division標簽
<p></p>
<div></div>
區別在哪呢，哦~，區別就在標簽名上
舉個例子：
<p></p>=> paragraph => 段落，顧名思義，這個標簽的內容是一個段落<header></header>=> header => 頭部，那這個標簽內容，就該是頁面的頭部內容
等等諸如此類…
二、使用場景
1.檔案類頁面
來個案例
截圖的條條框框，更像是給頁面做一個內容劃分， 就像是在說，這個地方應該用header標簽包起來，那個地方應該用aside標簽包起來一樣，
2.詞條類頁面
來個更經典的案例
使用意義
某梁姓同學：搞這些花里胡哨的沒用，沒有不也好好的？
這位同學說對了一半
沒有這些語意化標簽，確實頁面也能搭起來，確實div + span一把梭很爽，確實沒什么影響
更深入來講，有些標簽還會自帶樣式，像ul li之流，一個不慎就把頁面給搞亂了
不好使
但是，不代表它沒用
- 讀起代碼來更好懂
換一個人來看你的代碼，他可以更容易地，不用看標簽內容地發現，header標簽對應的是你的頁面的頭部這塊地方，aside對應的是側邊欄； - 利于SEO
你的代碼更有紋理，受益的不止是閱讀你的代碼的人，還有機器，搜索引擎蟲會根據標簽的背景關系來權衡關鍵字的重要性； - 無障礙閱讀
讀屏軟體可以通過標簽了解你的頁面架構~ - 自帶樣式
在網路不給力的情況下，CSS很難加載出來，這個時候語意化標簽自帶的樣式能夠讓頁面不那么難看
這里有篇文章，詳細介紹了原因
使用注意
當然，你不能因為有點使用意義就急沖沖地去使用它們，
一個main標簽給放到頭部，我相信這對SEO不是什么好事
總結
以上就是今天要講的內容，本文僅僅簡單介紹了下語意化標簽的定義和場景意義，希望能啟發大家平時留意一下平時忽略的標簽，后面也會將采集到的標簽，做一篇篇尋根問底的介紹文章，
也希望大家多多給出意見！謝謝！
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/267398.html
標籤：其他
上一篇：markdown的基本用法