為什麼使用語義HTML?

Web標準運動的一個重要原則是負責我們今天所在行業的一個重要原則,就是使用HTML元素來代表它們的內容,而不是默認情況下它們在瀏覽器中的顯示方式。 這被稱為使用語義HTML。

什麼是語義HTML

語義HTML或語義標記是向網頁引入意義的HTML,而不僅僅是表示。 例如,一個

標籤表明封閉的文本是一個段落。

這既是語義的,也是表示性的,因為人們知道段落和瀏覽器知道如何顯示它們。

在這個等式的另一面,像這樣的標籤不是語義的,因為它們只定義了文本應該如何看起來(粗體或斜體),並且不為標記提供任何附加含義。

語義HTML標籤的例子包括標題標籤

。 在構建符合標準的網站時,可以使用更多語義HTML標籤。

為什麼你應該關心語義

編寫語義HTML的好處源於任何網頁的驅動目標 - 溝通的願望。 通過在文檔中添加語義標籤,您可以提供有關該文檔的其他信息,這有助於溝通。 具體而言,語義標籤使瀏覽器清楚頁面及其內容的含義。

這種清晰度也與搜索引擎交流,確保為正確的查詢提供正確的頁面。

語義HTML標籤提供有關這些標籤內容的信息,這些信息超出了它們在頁面上的外觀。 包含在標籤中的文本會被瀏覽器立即識別為某種編碼語言。

瀏覽器不會嘗試呈現該代碼,而是理解您正在使用該文本作為針對某種文章或在線教程目的的代碼示例。

使用語義標籤可為您提供更多針對內容樣式的掛鉤。 也許今天你更願意讓你的代碼示例以默認的瀏覽器樣式顯示,但是明天,你想用灰色背景色調出它們,然後你想要定義準確的單間隔字體系列或字體堆棧以用於你的樣品。 通過使用語義標記和巧妙應用的CSS,您可以輕鬆完成所有這些工作。

正確使用語義標籤

當您想要使用語義標籤來傳達意義而不是出於展示目的時,您需要小心不要因為它們的常見顯示屬性而錯誤地使用它們。 一些最常使用的語義標籤包括:

  • blockquote - 有些人使用
    標記縮進不是引號的文本。 這是因為blockquotes默認縮進。 如果您只是希望縮進,但文本不是塊引用,請改用CSS邊距。
  • p - 一些網頁編輯器使用

      (一個包含在paragraoph中的非中斷空格)在頁面元素之間添加額外空間,而不是為該頁面的文本定義實際段落。 與前面提到的縮進示例一樣,您應該使用邊距或填充樣式屬性來添加空間。