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)簽會越來越多么哭当?
總的原則:
- 用精小的HTML標(biāo)簽集滿足web上的所有需求猪腕。
- 標(biāo)簽名不僅僅表達(dá)了字面上的意義,更多是一種實體類型的抽象
進(jìn)一步語義化HTML
使用 Microdata 或者 Microformat
感想:
- 引用原文的一個引用荣病,就不翻譯了:
- You are busy creating a website.
- You have a thought, “Oh, now I have to add an element.”
- Then another thought, “I feel so guilty adding a div. Div-itis is terrible, I hear.”
- Then, “I should use something else. The aside element might be appropriate.”
- Three searches and five articles later, you’re fairly confident that aside is not semantically correct.
- You decide on article, because at least it’s not a div.
- 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é)的情形脖岛。
- HTML5標(biāo)簽用法非一成不變,其用途也常引起爭議
問題:
- 有工具可以測試自己寫的頁面的語義化程度么颊亮?
- 在什么情況下語義化是非常必要的柴梆?