HTML5 語義化標籤

時間  2019-11-10
標籤 html5 html 語義 標籤 欄目 HTML5 简体版
原文   原文鏈接

爲何會有h5 語義化標籤

在HTML5出現以前，咱們通常採用DIV+CSS佈局頁面。可是這樣的佈局方式不只使咱們的文檔結構不夠清晰，並且不利於搜索引擎爬蟲對咱們頁面的爬取。爲了解決上述缺點，HTML5新增了不少新的語義化標籤。css

語義標籤的概念

維基百科

語義化是前端開發裏面的一個專用術語，其優勢在於標籤語義化有助於構架良好的html結構，有利於搜索引擎的創建索引、抓取；另外，亦有利於頁面在不一樣的設備上顯示儘量相同；此外，亦有利於構建清晰的機構，有利於團隊的開發、維護。html

通俗來講：語義化的意思是從名稱一眼就能看出其內容和做用是什麼，語義化標籤就是經過使用淺顯易懂的元素名和屬性名來實現語義化的前端

語義標籤有什麼用？

  • 能夠提升頁面的可訪問性，即在css丟失的狀況下，頁面結構仍然能夠比較清晰的展示；
  • 提升用戶體驗，用戶不夠清楚地方能夠獲得良好的解釋；
  • 有利於頁面seo，讓搜索引擎更容易明白頁面結構和內容的主次順序；
  • 有利於頁面維護者理解代碼結構，下降維護成本；
  • 方便其餘設備解析（如屏幕閱讀器、盲人閱讀器、移動設備）以語義的方式來渲染網頁

經常使用語義標籤有哪些？

h1到h6標籤 表示不一樣等級的標題

  • 能夠用來表現文本內容的層級結構

<article> 元素表示文檔、頁面、應用或網站中的獨立結構，其意在成爲可獨立分配的或可複用的結構

  • <article> 能夠嵌套使用，可是他們必須是部分與總體的關係
  • <article> 元素的做者信息可經過 <address> 元素提供，可是不適用於嵌套的 <article> 元素
  • <article> 元素的發佈日期和時間可經過 <time> 元素的pubdate屬性表示

<aside>定義側欄標籤

  • 若是使用多個 <aside>，標籤應該在主要內容的後面，這樣有利於SEO的搜索與提高可訪問性
  • 若是是與文章的主要內容有關係的圖像須要用 <figure> 標籤代替

<section> 元素表示文檔中的一個區域（或節），好比，內容中的一個專題組，通常來講會有包含一個標題（heading）

  • 若是元素內容能夠分爲幾個部分的話，應該使用 <article> 而不是 <section>
  • 不要把 <section> 元素做爲一個普通的容器來使用。 通常來講，一個 <section> 應該出如今文檔大綱中

<header> 元素用來表示一些前言性質或導航類的內容。它能夠包含一些標題性質元素，也能夠放置一些好比logo，搜索框，或其它的 <header> 元素等

  • <header> 元素並非一個能夠造成段落內容的元素，因此，不須要在內容目錄裏體現出來

<footer> 元素表示最近一個章節內容或者根節點（sectioning root）元素的頁腳。一個頁腳一般包含該章節做者、版權數據或者與文檔相關的連接等信息

  • <footer> 元素內的做者信息應包含在 <address> 元素中
  • <footer> 元素不是章節內容，所以在outline中不能包含新的章節

<nav> 描繪一個含有多個超連接的區域，這個區域包含轉到其餘頁面，或者頁面內部其餘部分的連接列表

  • 並非全部的連接都必須使用 <nav> 元素,它只用來將一些熱門的連接放入導航欄
  • 一個網頁也可能含有多個 <nav> 元素,例如一個是網站內的導航列表,另外一個是本頁面內的導航列表
  • 對於屏幕閱讀障礙的人,可使用這個元素來肯定是否忽略初始內容

<dl>,<dt>,<dd> (自定義列表)

  • dl: 英文意思爲definition list，做用是定義列表
  • dt: 英文意思爲defines terms，做用是定義列表中的項目
  • dd: 英文意思爲defines description，做用是定義列表中項目的註釋

<b>/<strong> 元素默認均展現爲加粗

  • <b> 表示「文體突出」文字，通俗講就是突出不安分的文字。像概要中的關鍵字，產品名。或者表明強調的排版方式
  • <strong> 表示重程度的強調

<i>/<em> 元素默認均展現爲斜體

  • <i> 表現爲在文章中突出不一樣意見或語氣或的一段文本,例如外語，科技術語、或者是排版用的斜體文字
  • <em> 表示強調

<mark>用來突出顯示文本，他的效果就像是用熒光筆給重點的語句作標同樣

<address> 元素可讓做者爲它最近的 <article> 或者 <body> 祖先元素提供聯繫信息。在後一種狀況下，它應用於整個文檔

  • 當表示一個和聯繫信息無關的任意的地址時，應使用 <p> 元素
  • 這個元素不能包含除了聯繫信息以外的任何信息，好比出版日期
  • 一般，<address> 元素能夠放在當前section的 <footer> 元素中，若是存在的話

<figure> 這個元素是用來引入圖表、圖形、照片等，對應的場景就是像是雜誌中的圖片同樣

  • <figure> 元素能夠包含多個內容塊，可是隻能有一個 <figcaption>（能夠理解成給圖表加標題）標籤
  • 能夠用 <h1> ~ <h6> 來給 <figure> 增長標題；
  • <figcaption> 不能單獨出現，須要有配套的內容一塊兒出現

<time> 能夠經過這個標籤標記一個具體的時間或日期，應用場景一般就是一篇文章的發表時間

  • datetime中的時間最好與 <time> 標籤中的文本元素日期同樣，寫法能夠不同
  • 若是這個時間是表明整個文章或是頁面的時間須要添加pubdate屬性
  • 不要在 <time> 標籤中使用不確切的時間如：「今天中午」、「上週末」
  • 若是 使用pubdate屬性須要注意的是要在同一個父標籤下面不要出現張冠李戴的問題
  • <time> 標籤不能在嵌套另外一個 <time> 標籤
  • datatime中的時間格式須要是標準的機器可能的時間 如:YYYY-MM-DDThh:mm:ss

注意

  • 儘量少的使用無語義的標籤div和span
  • 在語義不明顯時，既可使用div或者p時，儘可能用p，由於p在默認狀況下有上下間距，對兼容特殊終端有利
  • 使用表格時，標題要用caption，表頭用thead，主體部分用tbody包圍，尾部用tfoot包圍。表頭和通常單元格要區分開，表頭用th，單元格用td
  • 表單域要用fieldset標籤包起來，並用legend標籤說明表單的用途
  • 每一個input標籤對應的說明文本都須要使用label標籤，而且經過爲input設置id屬性，在lable標籤中設置for=someld來讓說明文本和相對應的input關聯起來
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程