首頁 > web前端 > html教學 > 語意化你的HTML標籤和屬性

語意化你的HTML標籤和屬性

巴扎黑
發布: 2017-04-05 16:52:29
原創
1038 人瀏覽過

分離結構與表現的另一個重要面向是使用語意化的標記來建構文件內容。一個 XHTML 元素的存在就意味著被標記內容的那部分有相應的結構化的意義,沒有理由使用其他的標記。換句話說,不要讓 CSS 使一個 HTML 元素看起來像另一個 HTML 元素,例如用

來取代

標記標題。

首先是關於語意(Semantics)和預設樣式的差別,預設樣式是瀏覽器設定的一些常用tag的表現形式,個人認為他的主要目的就是讓大家直觀的認識標籤(markup)和屬性(attribute)的用途和作用,很明顯Hx系列看起來很像標題,因為擁有粗體和較大的字號。 ,用來區別於其他文字,起到了強調的作用。至於清單和表格很明顯的告訴你他們是做什麼的。

其次,語意化的網頁的好處,最主要的就是對搜尋引擎友好,又了良好的結構和語義你的網頁內容自然容易被搜尋引擎抓取,你網站的推廣便可以省下不少的功夫。

#

,作為標題使用,並且依據重要性遞減。

是最高的等級。例如:

<h1>文档标题</h1>
<h2>次级标题</h2>
登入後複製

而不要使用

文檔標題

,或文檔標題.很明顯搜尋引擎對於後者不會認為他是標題的。

段落標記,知道了

作為段落,你就不會再使用
來換行了,而且不需要

來區分段落與段落。

中的文字會自動換行,而且換行的效果優於
。段落與段落之間的空隙也可以利用CSS來控制,很容易且清楚的區分出段落與段落。在利用行高(line-height)很容易的定義出行間距,再定義首字下沉等效果,那就挺完美了。例如:

<p>Admin10000.com 是WEB开发者学习交流的网站,这里提供大量实用的技术文档及相关资源下载,是网页设计、网络编程人员及其爱好者必备网站。</p>
<p>希望大家能在这里学到WEB开发知识,启发灵感,提高自己的WEB开发水平。</p>
登入後複製

#