Web標準運動的一個重要原則是負責我們今天所在行業的一個重要原則,就是使用HTML元素來代表它們的內容,而不是默認情況下它們在瀏覽器中的顯示方式。 這被稱為使用語義HTML。
什麼是語義HTML
語義HTML或語義標記是向網頁引入意義的HTML,而不僅僅是表示。 例如,一個
標籤表明封閉的文本是一個段落。
這既是語義的,也是表示性的,因為人們知道段落和瀏覽器知道如何顯示它們。
在這個等式的另一面,像和這樣的標籤不是語義的,因為它們只定義了文本應該如何看起來(粗體或斜體),並且不為標記提供任何附加含義。
語義HTML標籤的例子包括標題標籤
到,,和。 在構建符合標準的網站時,可以使用更多語義HTML標籤。
為什麼你應該關心語義
編寫語義HTML的好處源於任何網頁的驅動目標 - 溝通的願望。 通過在文檔中添加語義標籤,您可以提供有關該文檔的其他信息,這有助於溝通。 具體而言,語義標籤使瀏覽器清楚頁面及其內容的含義。
這種清晰度也與搜索引擎交流,確保為正確的查詢提供正確的頁面。
語義HTML標籤提供有關這些標籤內容的信息,這些信息超出了它們在頁面上的外觀。 包含在標籤中的文本會被瀏覽器立即識別為某種編碼語言。
瀏覽器不會嘗試呈現該代碼,而是理解您正在使用該文本作為針對某種文章或在線教程目的的代碼示例。
使用語義標籤可為您提供更多針對內容樣式的掛鉤。 也許今天你更願意讓你的代碼示例以默認的瀏覽器樣式顯示,但是明天,你想用灰色背景色調出它們,然後你想要定義準確的單間隔字體系列或字體堆棧以用於你的樣品。 通過使用語義標記和巧妙應用的CSS,您可以輕鬆完成所有這些工作。
正確使用語義標籤
當您想要使用語義標籤來傳達意義而不是出於展示目的時,您需要小心不要因為它們的常見顯示屬性而錯誤地使用它們。 一些最常使用的語義標籤包括:
- blockquote - 有些人使用標記縮進不是引號的文本。 這是因為blockquotes默認縮進。 如果您只是希望縮進,但文本不是塊引用,請改用CSS邊距。
- p - 一些網頁編輯器使用
  p>(一個包含在paragraoph中的非中斷空格)在頁面元素之間添加額外空間,而不是為該頁面的文本定義實際段落。 與前面提到的縮進示例一樣,您應該使用邊距或填充樣式屬性來添加空間。
- ul - 像blockquote一樣,將
標籤內的文本括在大多數瀏覽器中的文本中。 這在語義上不正確且HTML無效,因為只有- 標籤在
標籤內有效。 再次使用邊距或填充樣式縮進文本。
- h1-h6 - 標題標籤可用於使字體更大更大膽,但如果文本不是標題,則不應位於標題標籤內。 如果您想更改頁面上特定文本的大小或重量,請使用font-weight和font-size CSS屬性。
通過使用具有含義的HTML標籤,您可以創建傳遞更多信息的頁面,而不是僅使用
標籤包圍所有內容。
哪些HTML標籤是語義的?
儘管幾乎每個HTML4標籤和所有HTML5標籤都具有語義含義,但一些標籤本質上主要是語義的。
例如,HTML5已將和標籤的含義重新定義為語義。 標記沒有表達額外的重要性,而是通常以粗體顯示的文本。 標籤也沒有表達額外的重要性或強調,而是定義了通常以斜體顯示的文本。
語義HTML標籤
<簡稱> 縮寫 <縮寫> 縮寫
長引文 定義 <地址> 文件作者地址 <舉> 引文 <代碼> 代碼參考 的 電傳文字 邏輯劃分 <跨度> 通用內聯樣式容器 <德爾> 已刪除的文字 <插件> 插入文字 重點 的 強調重點
一級標題
二級標題
三級標題
第四級標題
第五級標題
六級標題
主題休息 文本由用戶輸入
預先格式化的文本
短內聯報價 示例輸出 <子> 標 標 可變或用戶定義的文本
,和。 在構建符合標準的網站時,可以使用更多語義HTML標籤。
為什麼你應該關心語義
編寫語義HTML的好處源於任何網頁的驅動目標 - 溝通的願望。 通過在文檔中添加語義標籤,您可以提供有關該文檔的其他信息,這有助於溝通。 具體而言,語義標籤使瀏覽器清楚頁面及其內容的含義。
這種清晰度也與搜索引擎交流,確保為正確的查詢提供正確的頁面。
語義HTML標籤提供有關這些標籤內容的信息,這些信息超出了它們在頁面上的外觀。 包含在標籤中的文本會被瀏覽器立即識別為某種編碼語言。
瀏覽器不會嘗試呈現該代碼,而是理解您正在使用該文本作為針對某種文章或在線教程目的的代碼示例。
使用語義標籤可為您提供更多針對內容樣式的掛鉤。 也許今天你更願意讓你的代碼示例以默認的瀏覽器樣式顯示,但是明天,你想用灰色背景色調出它們,然後你想要定義準確的單間隔字體系列或字體堆棧以用於你的樣品。 通過使用語義標記和巧妙應用的CSS,您可以輕鬆完成所有這些工作。
正確使用語義標籤
當您想要使用語義標籤來傳達意義而不是出於展示目的時,您需要小心不要因為它們的常見顯示屬性而錯誤地使用它們。 一些最常使用的語義標籤包括:
- blockquote - 有些人使用標記縮進不是引號的文本。 這是因為blockquotes默認縮進。 如果您只是希望縮進,但文本不是塊引用,請改用CSS邊距。
- p - 一些網頁編輯器使用
&nbsp; p>(一個包含在paragraoph中的非中斷空格)在頁面元素之間添加額外空間,而不是為該頁面的文本定義實際段落。 與前面提到的縮進示例一樣,您應該使用邊距或填充樣式屬性來添加空間。
- ul - 像blockquote一樣,將
標籤內的文本括在大多數瀏覽器中的文本中。 這在語義上不正確且HTML無效,因為只有- 標籤在
標籤內有效。 再次使用邊距或填充樣式縮進文本。
- h1-h6 - 標題標籤可用於使字體更大更大膽,但如果文本不是標題,則不應位於標題標籤內。 如果您想更改頁面上特定文本的大小或重量,請使用font-weight和font-size CSS屬性。
通過使用具有含義的HTML標籤,您可以創建傳遞更多信息的頁面,而不是僅使用
標籤包圍所有內容。
哪些HTML標籤是語義的?
儘管幾乎每個HTML4標籤和所有HTML5標籤都具有語義含義,但一些標籤本質上主要是語義的。
例如,HTML5已將和標籤的含義重新定義為語義。 標記沒有表達額外的重要性,而是通常以粗體顯示的文本。 標籤也沒有表達額外的重要性或強調,而是定義了通常以斜體顯示的文本。
語義HTML標籤
<簡稱> 縮寫 <縮寫> 縮寫
長引文 定義 <地址> 文件作者地址 <舉> 引文 <代碼> 代碼參考 的 電傳文字 邏輯劃分 <跨度> 通用內聯樣式容器 <德爾> 已刪除的文字 <插件> 插入文字 重點 的 強調重點
一級標題
二級標題
三級標題
第四級標題
第五級標題
六級標題
主題休息 文本由用戶輸入
預先格式化的文本
短內聯報價 示例輸出 <子> 標 標 可變或用戶定義的文本