Web語義化 - dolphinX－IT工程師數位筆記本

文章出處

在昨天和做SEO的同學聊了一會兒，當然我沒有學會搜索引擎優化的技巧和知識，但在此之前一直對HTML5中header、footer、sidebar、article等標簽嗤之以鼻，覺得這個和div沒有什么區別，頂多添加個style的事兒，當然自己在寫頁面的時候也從來沒用過h1~h6這幾個標簽，相信還有很多和我有同樣疑惑的前端小菜，特此解一下惑。

一個小問題

先看一段HTML代碼

<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>

就算是沒有看到頁面效果，相信很多同學看到內容后也能明白這個表格在描述什么，但是計算機（搜索引擎）卻不明白，計算機并不知道Name或者Age代表title，而下面的是內容。但如果這么寫

<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>

這樣即使我們不看內容也能了解這大概是什么，計算機也會理解哪些是標題，哪些是header，哪些是內容。

Web 語義化

這個東西我也是和同學們聊了聊天兒，自己翻了些資料，所以這里僅說一下個人的理解。HTML的每個標簽都有其特定含義（語義），Web語義化是指使用語義恰當的標簽，使頁面有良好的結構，頁面元素有含義，能夠讓人和搜索引擎都容易理解。

如果可以在合適的位置使用恰當的標簽，那么寫出來的頁面語義明確，結構清晰，搜索引擎也可以認出哪些是頁面重要內容，予以較高的權值。h1~h6這幾個標簽在搜索引擎中權值非常高，用它們作頁面標題就是一個簡單的SEO優化了，知道了這個你還使用DIV+CSS來寫標題嗎？（不是說直接用h1~h6標簽做標題，要這幾個標簽+CSS）

回到開始時的疑惑，這時候header、footer、sidebar、article等標簽的出現就不是那么讓人困惑了，HTML5的一大革新就是語義化標簽的完善

使用這樣結構寫出的網頁其語義顯而易見。在有些面試的時候會問到類似strong 和font-weight: bold有什么區別，這時候就可以從語義化的角度解答了。

一些標簽語義

標簽	語義
h1~h6	標題
th	table的header
p	段落
ul	無序列表
ol	排序列表
dl	definition list，定義列表
dt	definition title，定義名稱
dd	definition description定義描述
em	emphasized，局部強調,段落內強調
strong	更強烈的強調，全文強調