Html技巧 語意化你的程式碼 _HTML/Xhtml_網頁製作

Html語意化, 似乎是一個老生常談的問題. Google 一下,也有大把關於語義化的文章. 為什麼要語義化標籤? 我是這樣認為的:Html的每個標籤都有它特定的意義,而語義化,就是讓我們在適當的位置用適當的標籤, 以更好的讓人和機器(機器可理解為瀏覽器可理解為搜尋引擎)都一目了然. 如果我的解釋不夠明了, 請Google.

如何在適當的位置使用適當的標籤? 
這是一個簡單的理解邏輯. 例如, h1~h6標籤是用於標題類的; ul是用於無序列表的; ol是用於有充列表的; dl是用於定義列表的; em,strong標籤是用來強調的…說白了, Html標籤的每個英文釋義決定了它的語義(本文後面, 我會放一份常用Html標籤的英文釋義對照表供參考).
什麼是讓人和機器都能一目了然? 
檢查Html頁面是否語義化最好的方法, 便是去掉頁面的Css連結, 看網頁結構是否井然有序, 頁面是否仍然有很好的可讀性. 為什麼可以這麼說? 大家都知道瀏覽器都有預設的樣式(推薦使用Chrome的Web Developer Tools for Chrome 插件, 或Firefox的Web Developer 字號依序減少、上下邊距的預設樣式, ul、ol、dl都有預設的項目符號, strong預設有加粗的樣式…所以, 同樣的頁面, 語意化良好的Html可以在頁面Css去掉的情況下依然有良好的表現.
還有一點, 好的語義化編碼, 對搜尋引擎有更好的友好性. 搜尋蜘蛛是不認識你的Css的, 但它能識別Html標籤.
下面是一個簡單的例子:

複製代碼

代碼如下:

Mr.Think的部落格

專注Web前端技術,熱愛Php,崇尚簡單生活的凡夫俗子.

Mr.Think的部落格

專注於Web前端技術,熱愛Php,崇尚簡單生活的凡夫俗子.

透過上面的簡單的範例和沒有任何Css定義情況下的效果圖, 該明白了兩者的區別了吧. 如果你在學習Html5, 它的header、footer、sidebar、article等元素都是新增的語意化標籤.
Html編碼語意化是邁向高品質前端開發的一步. 即更好的遵循Web標準, 也能讓你頁面在去掉樣式後依然井然有序. 關於語意化更多更細緻的介紹, 可以自行Google或閱讀阿當的《Web前端開發修煉之道》 第三章.
附: 標籤語意中英文對照表

标签名	英文全拼	中文翻译
a	anchor	锚
abbr	abbreviation	缩写词
acronym	acronym	取首字母的缩写词
address	address	地址
b	bold	粗体
big	big	变大
blockquote	block quotation	区块引用于
br	break	换行
caption	caption	标题
center	center	居中
dd	definition description	定义描述
del	delete	删除
div	division	分隔
dl	definition list	定义列表
dt	definition term	定义术语
em	emphasized	加重
fieldset	fieldset	域集
font	font	字体
h1~h6	header1~header6	标题1~标题6
hr	horizontal rule	水平尺
i	italic	斜体
ins	inserted	插入
legend	legend	图标
li	list item	列表项目
ol	ordered list	排序列表
p	paragraph	段落
pre	preformatted	预定义格式
s	strikethrough	删除线
small	small	变小
span	span	范围
strong	strong	加重
sub	subscripted	下表
sup	superscripted	上标
u	underlined	下划线
ul	unordered list	不排序列表
var	variable	变量