1. HTML語義化或者說Web語義化

    所謂語義化這個概念,對於我本人來說最先的出處是招聘信息...好吧,我知道這有點傷,不過事實真的是我在招聘信息上看到對Web前端工程師的基本要求中就有"深入理解HTML語義化"這樣的字眼.這以後這個詞就被我丟到腦後了,直到若干年後的如今纔打算拿出來曬曬,看看本身到底知道些什麼.

    對於Web的語義化,百度百科和維基百科都有一些基礎的解釋,包括設計的背景和初衷以及對將來的美好展望.但我這裏只想說,這個所謂的語義化的東西對咱們到底有什麼用?工做中怎麼用?

    好了,問題簡單了,咱們站在一個至關務實的角度去看所謂的語義化,那麼我認爲最大的用處在於SEO的優化.

    固然好處確定是不只僅如此,否則也不至於你們都說這個好了.因爲我本人基本上參與開發的都是內部或者特定環境下使用的系統,因此對於SEO的優化平時基本上沒有.因此平時對於Web語義化也不是很注重,在參考過一些資料之後才發現它的好處.

    我最先開始學習頁面編程的時候,那個時候你們很推從div+css,我本人也寫的很順手,就是無論什麼內容,無論你要展現什麼.全都是各類div,各類嵌套,而後配合一大堆css樣式.按照web語義化的觀點,這樣的代碼是很糟糕的,結構上沒有含義,一旦css丟失就根本看不出一點結構了.網上說明語義化的時候也有不少人這麼舉例.好比明明能夠用p標籤或者span標籤的地方也通通使用div.這種狀況並很多見.

    之因此說語義化最大的用處在於SEO的優化,由於咱們能夠看代碼比較一下:

<table>
        <tr>
            <td colspan="2">Student List</td>
        </tr>
        <tr>
            <td>Name</td>
            <td>Age</td>
        </tr>
        <tr>
            <td>Byron</td>
            <td>24</td>
        </tr>
        <tr>
            <td>Vincent</td>
            <td>25</td>
        </tr>
        <tr>
            <td>Casper</td>
            <td>27</td>
        </tr>
    </table>

<table>
        <caption>Student List</caption>
        <thead>
            <tr>
                <th>Name</th>
                <th>Age</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Byron</td>
                <td>24</td>
            </tr>
            <tr>
                <td>Vincent</td>
                <td>25</td>
            </tr>
            <tr>
                <td>Casper</td>
                <td>27</td>
            </tr>
        </tbody>
    </table>

    這兩段的代碼你們能夠很容易看出內容是同樣的,顯示效果也沒有什麼區別.可是在第2個裏面,咱們經過代碼結構就能夠知道name和age是表頭,剩下的tr是表內容.這是由於th,tbody這些標籤告訴了咱們它們承載內容的含義.所謂語義化就是使用有含義的標籤去作它該作的事.換句話說,人可以看明白這樣的代碼,可是機器解讀的時候是否是能看明白,語義化就是爲了讓機器也能明白這樣的含義.

    Web語義化是指使用語義恰當的標籤，使頁面有良好的結構，頁面元素有含義，可以讓人和搜索引擎都容易理解