你真的理解HTML5標籤語義化嗎?

2021-02-24 w3cschool編程獅

標籤分類

<html></html> 內又有以下幾類:

1. head

<head>標籤用於定義文檔的頭部,它是所有頭部元素的容器。<head>描述了文檔的各種屬性和信息,包括文檔的標題、在 Web 中的位置以及和其他文檔的關係等。head內可存放標籤有:

<base>:為頁面上的所有連結規定默認地址或默認目標。

<link>:主要用於style文件引入

<style>:樣式表區域

<title>:可定義文檔的標題。 <title> 標籤是 <head> 標籤中唯一要求包含的東西。

<meta>:提供了有關當前HTML元素的元信息 (meta-information)

2. body

<body>標籤內存放文檔的內容。<body>內標籤分類有以下11類:

內容分區

文本內容

內聯文本語義

圖片和多媒體

內嵌內容

腳本

編輯標識

表格內容

表單

交互元素

Web組件

HTML 標籤語義化

語義化到底重不重要?

我們知道,在HTML中,每個標題是通過標題標籤來定義的,標題標籤一共有6個,分別是:h1~6。例子如下:

<h1>我是一級標題</h1>

<h2>我是二級標題</h2>

<h3>我是三級標題</h3>

<h4>我是四級標題</h4>

<h5>我是五級標題</h5>

<h6>我是六級標題</h6>

如果是連續的標題,則可以用 <hgroup> 來連接:

<hgroup>

<h1>我是一級標題</h1>

<h2>我是二級標題</h2>

<h3>我是三級標題</h3>

<h4>我是四級標題</h4>

<h5>我是五級標題</h5>

<h6>我是六級標題</h6>

</hgroup>

如果是段落內容,則用 <p>

<p>我是段落內容</p>

如果我們要列一個列表則可以用 <ol></ol><li></li> 。如果只是要標記項目,我們可以用 <li></li>,例子如下:

<ul>

<li>蘋果</li>

<li>香蕉</li>

<li>奧特曼</li>

<li>橙子</li>

</ul>

若是標記順序,則用 <ol></ol> ,例子如下:

<ol>

<li>向前走300米</li>

<li>右轉</li>

<li>向前走300米</li>

<li>右轉</li>

<li>向前走300米</li>

</ol>

當然我們也可以按需嵌套。

<ol>

<li>先用蛋白一個、鹽半茶匙及澱粉兩大匙攪拌均勻,調成「醃料」,雞胸肉切成約一釐米見方的碎丁並用「醃料」攪拌均勻,醃漬半小時。</li>

<li>用醬油一大匙、澱粉水一大匙、糖半茶匙、鹽四分之一茶匙、白醋一茶匙、蒜末半茶匙調拌均勻,調成「綜合調味料」。</li>

<li>雞丁醃好以後,色拉油下鍋燒熱,先將雞丁倒入鍋內,用大火快炸半分鐘,炸到變色之後,撈出來瀝乾油汁備用。</li>

<li>在鍋裡留下約兩大匙油,燒熱後將切好的幹辣椒下鍋,用小火炒香後,再放入花椒粒和蔥段一起爆香。隨後雞丁重新下鍋,用大火快炒片刻後,再倒入「綜合調味料」繼續快炒。</li>

<ul>

<li>如果你採用正宗川菜做法,最後只需加入花生米,炒拌幾下就可以起鍋了。</li>

<li>如果你在北方,可加入黃瓜丁、胡蘿蔔丁和花生米,翻炒後起鍋。</li>

</ul>

</ol>

在我們平常說話的時候,為了突出重點,我們往往會強調某些詞,就如如下的例子:

<p>我<em>非常</em>喜歡加班</p>

如果是重音強調,則:

<p>魚頭,明天<strong>別遲到</strong>了</p>

如果你在項目的一開始就使用HTML語義化,不僅不會花更多的時間,而且又有以下的可訪問性優點:

1.更便於開發 — 如上所述,你可以使HTML更易於理解,並且可以毫不費力的獲得一些功能。

2.更適配移動端 — 語義化的HTML文件比非語義化的HTML文件更加輕便,並且更易於響應式開發。

3.更便於SEO優化 — 比起使用非語義化的

標籤,搜尋引擎更加重視在「標題、連結等」裡面的關鍵字,使用語義化可使網頁更容易被用戶搜索到。

無障礙設計

在Web開發無障礙性意味著使儘可能多的人能夠使用Web站點,即使這些人的能力是有限的。這裡我們提供關於開發易訪問的內容的信息。

「無障礙性是最常用於描述設施或設施,幫助殘疾人,如「輪椅」。這可以擴展到盲文標識、輪椅坡道,音頻信號在人行橫道,輪廓人行道,網站設計,等等。"

WAI-ARIA

WAI-ARIA 是一項技術,它可以通過瀏覽器和一些輔助技術來幫助我們進一步地識別以及實現語義化,這樣一來能幫助我們解決問題,也讓用戶可以了解發生了什麼。

WAI-ARIA 是W3C編寫的規範,定義了一組可用於其他元素的HTML 特性,用於提供額外的語義化以及改善缺乏的可訪問性。以下是規範中三個主要的特性:

1.角色(role):這定義了元素是幹什麼的;

2.屬性:通過定義一些屬性給元素,讓他們具備更多的語義;

3.狀態:用於表達元素當前的條件的特殊屬性。

後記

HTML語義化非常地重要,雖然在組件化開發的今天,利益沒那麼明顯,但是對於後期維護,用戶訪問以及用戶友好度來說都是非常重要的,在某些國家,語義化跟無障礙標準化甚至是衡量一個線上產品能否上線的標準。

相關焦點

  • HTML5基礎——文字常用標籤(上)
    字體與字號在介紹完標題後,我們還要處理正文的文字,2.1 設置字體——face語法:<font face="宋體">文字</font>其中,font為設置文字的標籤,face為該標籤的屬性,表示文字的字體,<font></font>之間的文字,就是應用字體的文字。
  • 進口水果標籤的秘密,你知道嗎
    進口水果的價格往往大幅高出國產水果,你知道如何識別真假進口水果嗎?你知道進口水果的小標籤隱藏著什麼秘密嗎?  進口水果銷量逐年增長  昨天,記者在東陽世紀聯華超市水果區看到,榴槤、菠蘿蜜、菲律賓香蕉等進口水果被擺在了「黃金地段」,還有工作人員在現場切開整個菠蘿蜜並分裝,吸引了不少市民購買。
  • 食品營養標籤你會看嗎?
    在超市購買食品的時候,你看食品營養標籤嗎?
  • 商品防偽標籤到底是為了防什麼?
    這是個很好很複雜的問題,防偽的原意是為了防偽保真,防偽的形式很多人理解成是一個防偽標籤,防偽的方式理解成通過電話,二維碼防偽標籤,或者在網站上輸入防偽碼實現對產品真偽的驗證。還有通過其它技術對防偽標籤本身的一些驗證,比如滴水變色,加熱溫變,在紫光燈下的隱形信息或顯性信息的顯現等。接下來就從以下幾個方面來解釋一下防偽防的是什麼以及如何為客戶帶來防偽。
  • 靈魂拷問:你真的理解until這個小詞嗎?
    不過到了GRE考試,如果只知道until是「直到」的意思,並不足以幫助我們理解原文。比如下面兩個句子:1. What prevents the planet from continuing its spiral until it collides with the star?2.
  • 所有「進口食品」都需要有中文標籤嗎?
    紅酒沒有中文標籤消費者沈先生要在家招待朋友,想買幾瓶紅酒。於是,沈先生去了某食品店,營業員熱情地向沈先生推薦了一款加拿大冰酒。沈先生當即購買了6瓶帶回家。沈先生拿這款酒招待朋友,杯盞間,一位朋友無心說了一句:這個進口紅酒上一個中文字都沒有,很有檔次啊,不過國內銷售的進口紅酒,應該有中文標籤,好讓我們能看懂嘛。
  • 【全國開班】國內外食品標籤及營養標籤相關法律法規
    GB 7718《預包裝食品標籤通則》的釋義GB 28050《預包裝食品營養標籤通則》的釋義;嬰幼兒主輔食品標籤特定人群主輔食品標籤食品中的過敏源、轉基因三.食品標籤及營養標籤的符合性檢驗食品標籤標示關鍵點的釋義食品營養標籤營養素的標識及聲稱的釋義
  • 教你看懂食品標籤
    有多少次,你在超市裡被食品包裝上高深莫測的標籤弄暈?每天我們吃進肚子裡的食物,你又了解多少?調查顯示,有看食物標籤習慣的人不足25%。讓我們的營養師來為你解密食物標籤,讓你吃得更安心。標籤上要標明食品的類別,類別名稱必須是國家許可的規範名稱,以免企業誤導消費者。比如「果汁」和「果汁飲料」,包裝標註「果汁」就是指產品除了水果中榨出的汁,沒有加水,而「果汁飲料」,則表明摻了水。再比如「乳飲料」,是指以鮮乳或乳製品為原料,經發酵或未經發酵加工製成的製品,其牛奶含量較低,其營養價值不能與純牛奶相提並論。保質期和生產日期是必須要看的。
  • 【綠色奇蹟】飲料瓶回收需要擰瓶蓋撕標籤嗎?
    2014年在臺北參訪,有一幕一直深深的震撼著我:臺灣慈濟環保的志工們,蹲坐在一大堆收回的飲料瓶前面,正在一個一個的拆掉瓶子上的瓶蓋和標籤。請問你們不需要擰瓶蓋,撕標籤的嗎?我向廠長提出這個疑問後,他露出了帶有強烈優越感的神秘笑容:「我們工廠有先進的自動設備。所有的瓶子進入機器後,都會被切成1-2cm左右的碎片。碎片經過水洗後,不同密度的瓶身材料就會自動分層。再通過光電篩選裝置,就分為了不同種類的再生碎片。」在成品區域,確實可以看到瓶身、標籤、瓶蓋等材質基本全都分開了,很少混雜。
  • 進口商品沒有中文標籤?這可不行!
    然而,這些「漂洋過海」好不容易到我們手中的「洋產品」真的令人放心嗎?       今年3月,消費者張先生在丹城某貿易公司購買了兩箱美國進口乾紅葡萄酒,但回家開箱後發現,這兩箱紅酒的內外包裝上均未粘貼中文標籤。明明貨架上的紅酒都是有中文標籤的,詳細標明了進口商、生產廠家、生產日期、保質期等信息,自己買回家的兩箱紅酒怎麼就全是看不懂的英文了,沒有中文標籤的食品可以銷售嗎?
  • Psy.P:我開始理解PG ONE 理解陳冠希
    I’m sick I’m ill I’m sick huh你保證從此不再深夜給我打電話你後悔嗎 你後悔流淚離開他而我在擔心錢太多了怎麼花Woah take a look around 是金子總會發光的更何況是寶藏you only for fun i take it for long time愛同樣是傷害 直到埋葬 拉緊了捨不得放
  • JAC外貿實戰:外貿同仁,我真的理解不了你的糾結
    這個問題,在Jac面對面群裡已經回答了無數次了,三個方面:要麼說服客戶接受你老闆的付款方式,要麼說服老闆接受客戶的付款方式,要麼說服自己接受拿不到訂單的現實! 有其他的辦法嗎? 到了這個時候,我們就不可能再去談客戶了,很有可能會把客戶談崩,只剩下下面兩種可能性,最後一種說服自己,誰都不願意這樣做,那就只剩下一條路了,嘗試著去說服老闆(這些都取決於你對於客戶的判斷,如果你覺得某個客戶還能再磨一下,你就也去磨客戶,但是同時也要去跟老闆談,雙管齊下)。
  • 食品標籤,您會看嗎?
    其實包裝上的食品標籤也是乾貨滿滿,學會看食品標籤,讓您買得放心,吃得安心。在預包裝食品(也就是通常所說的包裝食品)外包裝上面的食品標籤通常標註了食品的生產日期、保質期、配料、質量(品質)等級等,可以告訴消費者食物是否新鮮、產品特點、營養信息等。食品標籤指的就是食品包裝上的文字、圖形、符號及一切說明物。
  • 日本人真的吃不起西瓜嗎?
    霓虹人真的吃不起西瓜嗎?日本西瓜都這樣貴嗎?看一下超市裡擺放的價格標籤就知道了,一個西瓜的價格居然比威士忌還貴,難怪說西瓜在日本是奢侈品( ̄_ ̄|||)、和牛等並列成為日本奢侈食物嗎?這事要是擱在中國,你領著一個大西瓜上領導家裡,哪裡是長臉的事情,根本就是打臉!但是日本就不同了,這樣的方形西瓜,怎麼也得上萬日元的價格,拎著走馬路上,臉上倍兒有光<( ̄ˇ ̄)/好吧沒那麼誇張~~
  • 閱讀理解:選項同義替換就是同義詞替換嗎?
    他們回答說用來做閱讀理解。我一看,就是列舉了一大堆所謂同義詞,比如,其中一個我記憶猶新:achieve=obtain=gain=access to sth.我接著問:「有用嗎?」同學愕然:「不知道啊,還沒考呢?」然後,繼續低頭猛背。這是多少同學的通病啊,拿到一個江湖偏方,不管三七二十一,先用了再說。
  • 水果標籤背後那些你不知道的事
    細心的人發現在一些水果上也貼有標籤,標籤上有一些數字。相信很多人都跟小編一樣,撕掉洗洗就吃了,從來沒注意過那個標籤。超市裡,進口檸檬標籤上標註4958、蛇果4016、黃金奇異果3279、紅提4635……每個水果都有不同的編碼。荷蘭瓦赫寧根大學食品安全學碩士範琳琳介紹,進入PLU碼的查詢網站(www.plucodes.com),輸入「4016」,就會顯示出水果的商品名稱(蛇果)、種屬(蘋果)、大小(大)、學名等內容。
  • Instagram 「吸睛」 秘籍:哪些標籤能讓你成為意見領袖?
    活躍在Instagram上的外國用戶,非常善於利用充當話題歸納的「#」標籤為自己吸引關注度。
  • 你身上有多少「標籤」?
    雖說在這資訊爆炸,信息高度共享的網際網路時代,關於地域、族群、宗教、文化上的隔閡似乎一點沒有變小,裂痕反而越來越大,難免令人困惑。國際上,巴黎暴恐猶在眼前。國內,地域歧視每天都在上演,居然能總結出一整張「地圖標籤」與「歧視鏈」,作為標籤下的個體每天又要如何應對?沒有什麼好辦法,只有增加了解,才能消除誤解。「我從哪裡來」並不重要,重要的是通過你的言行傳遞給周圍的信息才是重要的。
  • 火人節 | 你真的了解十項原則嗎?
    你想玩這個遊戲,就必須遵守遊戲規則。你準備好了嗎?火人節很多地方只要你get naked 就可以skip the line(一位小夥伴為了幫我拿點吃的也是拼了 LOL)如果要帶禮物來給大家記得儘量不要包裝的,包裝製造的垃圾真的很驚人!包容並不是僅僅的一句 I don't care,而是嘗試去理解,並承認不同思想的合理性。如果你只是不同意他人的想法,出於禮貌和禮儀沒有表達,或是不在乎,這不是包容。