HTML5 語義化標簽(移動端必備)

  發布時間:2021-08-22 10:48:49   作者:佚名   我要評論
最近移動端網頁要重寫代碼,移動端都是html5+css3了,想讓網頁顯得有逼格也與時代接軌,語義化不能缺少,更少的代碼,更好的體驗

距HTML5標準規范制定完成并公開發布已經有好些年了,面試時也少不了要問對HTML5語義化得理解。但是在實際運用時,真正使用HTML5標簽來開發的似乎不是很多(ps:查看了幾個巨頭公司網站推論),可能一部分原因是仍有部分用戶使用在使用低版本瀏覽器。

但是就我個人而言,因選取一些標簽時會比較糾結,所以仍使用了div。(PS:正是因為這樣,才有了這篇文章的,沒錯,以后要注意語義化了)

什么是語義化?就是用合理、正確的標簽來展示內容,比如h1~h6定義標題。

語義化優點:

易于用戶閱讀,樣式丟失的時候能讓頁面呈現清晰的結構。
有利于SEO,搜索引擎根據標簽來確定上下文和各個關鍵字的權重。
方便其他設備解析,如盲人閱讀器根據語義渲染網頁
有利于開發和維護,語義化更具可讀性,代碼更好維護,與CSS3關系更和諧。

今天先介紹主體結構標簽,如圖所示:

1、<header>

<header>定義文檔或者文檔的部分區域的頁眉,應作為介紹內容或者導航鏈接欄的容器。

在一個文檔中,您可以定義多個<header>元素,但需要注意的是<header>元素不能作為<address>、<footer> 或 <header> 元素的子元素。

2、<nav>

<nav>描述一個含有多個超鏈接的區域,該區域包含跳轉到其他頁面或頁面內部其他部分的鏈接列表。

在一個文檔中,可定義多個<nav>元素。

3、<main>

<main> 定義文檔的主要內容,該內容在文檔中應當是獨一無二的,不包含任何在文檔中重復的內容,比如側邊欄,導航欄鏈接,版權信息,網站logo,搜索框(除非搜索框作為文檔的主要功能)。

需要注意的是在一個文檔中不能出現多個<main>標簽。

4、<article>

<article>元素表示文檔、頁面、應用或網站中的獨立結構,是可獨立分配的、可復用的結構,如在發布中,它可能是論壇帖子、雜志或新聞文章、博客、用戶提交的評論、交互式組件,或者其他獨立的內容項目。

當<article>元素嵌套使用時,則該元素代表與外層元素有關的文章。例如,代表博客評論的<article>元素可嵌套在代表博客文章的<article>元素中。

5、<aside>

<aside> 元素表示一個和其余頁面內容幾乎無關的部分,被認為是獨立于該內容的一部分且可以被單獨的拆分出來而不會影響整體。通常表現為側邊欄或嵌入內容。

6、<footer>

<footer>定義最近一個章節內容或者根節點元素的頁腳。一個頁腳通常包含該章節作者、版權數據或者與文檔相關的鏈接等信息。

使用footer插入聯系信息時,應在 footer 元素內使用 <address> 元素。

注意不能包含<footer>或者<header>

7、<section>

<section>表示文檔中的一個區域(或節),比如,內容中的一個專題組。

如果元素內容可以分為幾個部分的話,應該使用 <article> 而不是 <section>。
不要把 <section> 元素作為一個普通的容器來使用,特別是當<section>僅僅是為了美化樣式或方便腳本使用的時候,應使用<div>。

這幾個標簽,比較容易混淆的是<section>、<article>,所以這里特別說明:

“Authors are encouraged to use the article element instead of the section element when it would make sense to syndicate the contents of the elemen.”

通俗來說就是<article>比<section>更具有獨立性、完整性。可通過該段內容脫離了所在的語境,是否完整、獨立來判斷。

相關文章

  • HTML5 語義化標簽(移動端必備)

    最近移動端網頁要重寫代碼,移動端都是html5+css3了,想讓網頁顯得有逼格也與時代接軌,語義化不能缺少,更少的代碼,更好的體驗
    2021-08-22
  • html5實現點擊彈出圖片功能

    本文通過實例代碼給大家介紹html5實現點擊彈出圖片功能,代碼簡單易懂,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧
    2021-07-15
  • html5 錄制mp3音頻支持采樣率和比特率設置

    最初有個開源項目libmp3lame-js,直接將 lame 源碼編譯為 js版本,后來有人基于libmp3lame使用 js 進行了重寫,就是如今的lamejs 項目。相比libmp3lame ,自身體積更小,而
    2021-07-12
  • html5表單的required屬性使用

    本文將結合實例代碼,介紹html5表單的required屬性使用,文中通過示例代碼介紹的非常詳細,需要的朋友們下面隨著小編來一起學習學習吧
    2021-07-05
  • html5調用攝像頭實例代碼

    本文給大家分享html5調用攝像頭實例代碼,代碼簡單易懂,對前端html5的學習有很大幫助,如果對html5調用攝像頭相關知識感興趣的朋友一起看看吧
    2021-06-28
  • HTML5頁面音頻自動播放的實現方式

    本文給大家分享三種常規的方法創建自動播放的audio對象,就每種方式通過實例代碼給大家介紹的非常詳細,對html5音頻自動播放相關知識感興趣的朋友一起看看吧
    2021-06-21
  • Html5大屏數據可視化開發的實現

    本文主要介紹了Html5大屏數據可視化開發,可視化可以對統計的數據一目了然,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2021-06-10
  • html實現彈窗的實例

    本文將結合實例代碼,介紹html實現彈窗的實例,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2021-06-09
  • HTML5來實現本地文件讀取和寫入的實現方法

    最近有這樣一個需求就是如何讀取或寫入本地文件系統中的文件, html5來了它提供了一套文件系統的API,可以實現文件讀寫,本文就介紹了如何實現本地文件的讀取和寫入,感興
    2021-05-24
  • HTML 羅盤式時鐘的實現

    看著有點黑科技的感覺就跟前段時間比較火的抖音動態時間那個一個效果,本文主要介紹了HTML 羅盤式時鐘的實現,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們
    2021-05-20

最新評論

精品国内自产拍在线观看