HTML5 Note #1 : Let's Talk about Semantics

Article #1:Let's Talk about Semantics


Reason:由于第一個 case 很多地方都沒能正確使用 HTML 標(biāo)簽顷级,迫切覺得自己需要掌握 HTML 語義化的知識


為什么要語義化?

  • 不僅人類需要明白HTML語義,機器(搜索引擎爬蟲党涕,輔助工具等)也需要能夠讀懂HTML語義
  • 易于形成結(jié)構(gòu)化的文檔數(shù)據(jù)吻谋,搜索引擎神馬的最喜歡了
  • 從開發(fā)者的角度來說,增強了代碼的可讀性

簡單好用的流程圖

對于如何使用正確的 HTML 標(biāo)簽增淹,可以對照此流程圖判斷使用椿访。
當(dāng)然,前提是最好能夠理解每一個標(biāo)簽的用意及其使用的環(huán)境虑润。
如果所有選擇條件都不成立成玫,那么就回過頭來擁抱老朋友 div 吧。


[先download下來,以后慢慢理解使用]

有可能HTML標(biāo)簽會越來越多么哭当?

總的原則:

  1. 用精小的HTML標(biāo)簽集滿足web上的所有需求猪腕。
  2. 標(biāo)簽名不僅僅表達(dá)了字面上的意義,更多是一種實體類型的抽象

進(jìn)一步語義化HTML

使用 Microdata 或者 Microformat


感想:

  1. 引用原文的一個引用荣病,就不翻譯了:
  1. You are busy creating a website.
  2. You have a thought, “Oh, now I have to add an element.”
  3. Then another thought, “I feel so guilty adding a div. Div-itis is terrible, I hear.”
  4. Then, “I should use something else. The aside element might be appropriate.”
  5. Three searches and five articles later, you’re fairly confident that aside is not semantically correct.
  6. You decide on article, because at least it’s not a div.
  7. You’ve wasted 40 minutes, with no tangible benefit to show for it.
    — Divya Manian

雖然她舉這個栗子的用意是用來反諷語義化無法帶來什么直觀好處码撰,
但是覺得這個簡直就是自己修改第一個case中HTML標(biāo)簽的過程重現(xiàn)。
以后還是得一個一個地將HTML5標(biāo)簽啃下來个盆,才不會重現(xiàn)以上糾結(jié)的情形脖岛。

  1. HTML5標(biāo)簽用法非一成不變,其用途也常引起爭議

問題:

  1. 有工具可以測試自己寫的頁面的語義化程度么颊亮?
  2. 在什么情況下語義化是非常必要的柴梆?
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市终惑,隨后出現(xiàn)的幾起案子绍在,更是在濱河造成了極大的恐慌,老刑警劉巖雹有,帶你破解...
    沈念sama閱讀 219,039評論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件偿渡,死亡現(xiàn)場離奇詭異,居然都是意外死亡霸奕,警方通過查閱死者的電腦和手機溜宽,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,426評論 3 395
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來质帅,“玉大人适揉,你說我怎么就攤上這事∶撼停” “怎么了嫉嘀?”我有些...
    開封第一講書人閱讀 165,417評論 0 356
  • 文/不壞的土叔 我叫張陵,是天一觀的道長魄揉。 經(jīng)常有香客問我剪侮,道長,這世上最難降的妖魔是什么洛退? 我笑而不...
    開封第一講書人閱讀 58,868評論 1 295
  • 正文 為了忘掉前任票彪,我火速辦了婚禮,結(jié)果婚禮上不狮,老公的妹妹穿的比我還像新娘降铸。我一直安慰自己,他們只是感情好摇零,可當(dāng)我...
    茶點故事閱讀 67,892評論 6 392
  • 文/花漫 我一把揭開白布推掸。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪谅畅。 梳的紋絲不亂的頭發(fā)上登渣,一...
    開封第一講書人閱讀 51,692評論 1 305
  • 那天,我揣著相機與錄音毡泻,去河邊找鬼胜茧。 笑死,一個胖子當(dāng)著我的面吹牛仇味,可吹牛的內(nèi)容都是我干的呻顽。 我是一名探鬼主播,決...
    沈念sama閱讀 40,416評論 3 419
  • 文/蒼蘭香墨 我猛地睜開眼丹墨,長吁一口氣:“原來是場噩夢啊……” “哼廊遍!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起贩挣,我...
    開封第一講書人閱讀 39,326評論 0 276
  • 序言:老撾萬榮一對情侶失蹤喉前,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后王财,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體卵迂,經(jīng)...
    沈念sama閱讀 45,782評論 1 316
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,957評論 3 337
  • 正文 我和宋清朗相戀三年绒净,在試婚紗的時候發(fā)現(xiàn)自己被綠了见咒。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 40,102評論 1 350
  • 序言:一個原本活蹦亂跳的男人離奇死亡疯溺,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出哎垦,到底是詐尸還是另有隱情囱嫩,我是刑警寧澤,帶...
    沈念sama閱讀 35,790評論 5 346
  • 正文 年R本政府宣布漏设,位于F島的核電站墨闲,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏郑口。R本人自食惡果不足惜鸳碧,卻給世界環(huán)境...
    茶點故事閱讀 41,442評論 3 331
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望犬性。 院中可真熱鬧瞻离,春花似錦、人聲如沸乒裆。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,996評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至肉迫,卻和暖如春验辞,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背喊衫。 一陣腳步聲響...
    開封第一講書人閱讀 33,113評論 1 272
  • 我被黑心中介騙來泰國打工跌造, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人族购。 一個月前我還...
    沈念sama閱讀 48,332評論 3 373
  • 正文 我出身青樓壳贪,卻偏偏與公主長得像,于是被迫代替她去往敵國和親联四。 傳聞我的和親對象是個殘疾皇子撑碴,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 45,044評論 2 355

推薦閱讀更多精彩內(nèi)容

  • Spring Cloud為開發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見模式的工具(例如配置管理,服務(wù)發(fā)現(xiàn)朝墩,斷路器醉拓,智...
    卡卡羅2017閱讀 134,662評論 18 139
  • 請參看我github中的wiki,不定期更新收苏。https://github.com/ivonzhang/Front...
    zhangivon閱讀 7,129評論 2 19
  • 背景 一年多以前我在知乎上答了有關(guān)LeetCode的問題, 分享了一些自己做題目的經(jīng)驗亿卤。 張土汪:刷leetcod...
    土汪閱讀 12,747評論 0 33
  • 大多數(shù)人的記憶中懦鼠,恐怕都有一位愛嘮叨钻哩,說話啰嗦的媽媽吧。盡管我們很愛自己的媽媽肛冶,可是仍然不可回避的現(xiàn)實是街氢,媽媽們有...
    4a34c445cdc5閱讀 389評論 1 3
  • 我在原始的屋子里 等待相思的結(jié)尾 你來了 為我推開一扇窗門 窗外已是春天 你的臉 開滿春花 我心中的桃花林 已溢滿...
    熊志勇閱讀 400評論 4 13