整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
您了解 HTML 和 Web 時，您可能會發現反復遇到一個通常未定義的特定單詞。那個詞是語義的。
你可能會讀到諸如“我們去尋找語義元素”或“我們盡量做到語義化”之類的陳述，但永遠無法清楚地了解語義這個詞的含義。在本文中，我們將探索語義標記的世界，提出術語的有效定義，并將該概念應用于我們編寫 HTML 標記的方式。
根據 Dictionary.com 的說法，語義是指對單詞或句子含義的正確解釋。
從語義上使用一個詞就是以一種與該詞的含義正確對齊的方式使用它。當我們誤用一個詞時，我們并不是在語義上使用它。
許多 HTML 標簽具有語義含義。也就是說，元素本身傳達了一些關于包含在開始標簽和結束標簽之間的內容類型的信息。
例如，當瀏覽器遇到一個h1標題時，它會將該標記解釋為表示該元素的內容h1構成了包含該元素的部分的最重要的標題。標簽的語義含義h1是它用于標識特定網頁或部分的最重要的標題。
如果我們要編寫語義標記，必須采用兩種不同的做法。
在編寫語義標記時，我們使用 HTML 標簽來告訴瀏覽器元素的內容。在語義標記中，標簽不再只是讓內容以人類可讀的格式顯示在網頁上的一種方式。
標簽本身成為一種告訴機器（無論是瀏覽器、計算機、智能手機還是其他智能設備）有關內容含義的方式。
要編寫語義標記，我們必須正確使用 HTML 標簽，以便我們的標記既是人類可讀的，也是機器可讀的。
過去，通常使用標記來定義樣式和控制網頁布局。
標題級別的選擇不是基于層次結構，而是基于 Web 瀏覽器應用的樣式，表格用于網頁布局而不是組織表格數據，一些 HTML 標記（例如frameset）是為了明確定義網頁而創建的布局等等。
當我們編寫語義標記時，我們不能再根據視覺呈現來選擇 HTML 元素。相反，我們根據語義含義選擇 HTML 元素，然后使用CSS定義我們內容的視覺呈現。
在編寫語義標記時，網頁元素的表示與內容本身的標記完全分離和不同。
考慮到這兩種做法，我們可以這樣定義語義標記：
語義標記是使用諸如 HTML 之類的標記語言通過正確選擇標記元素來傳達有關文檔中每個元素的含義的信息，并保持標記和文檔中包含的元素的視覺呈現之間的完全分離.
好的 CSS 可以使普通網站訪問者看不到不好的標記。然而，再多的樣式也不會讓糟糕的標記對計算機化的訪問者更有意義，例如搜索引擎網絡爬蟲、瀏覽器翻譯工具或屏幕閱讀器等輔助技術。
根據 Bruce Lawson的說法，HTML 元素的語義使用“增強了可訪問性、可搜索性、國際化和互操作性”。換句話說，如果您希望所有訪問者都可以訪問您的網站、實現較高的搜索引擎排名、可供來自世界各地的訪問者使用以及與其他 Web 服務有效交互，則必須編寫語義標記。
編寫語義標記是關于創建人類和計算機可讀的 Web 內容。當人類和計算機都可以很好地閱讀網絡時，它就變得更易于訪問，因為計算機能夠更好地分析其內容、索引、交付它，并且開發人員能夠更好地將不同的信息源結合到新的網絡服務中.
我們通過正確選擇和使用 HTML 標記以及通過選擇傳達有關標記所標記信息的某些標記來編寫語義標記。
HTML 中有語義元素和非語義元素。非語義元素的示例是div和span。這些標簽不會告訴計算機有關元素內容含義的任何信息。
雖然有用，并且在某些情況下可以很好地使用，但如果語義標簽可用并且適合特定用途，請在使用非語義標簽之前使用它。
許多語義標簽來自谷歌和Opera等公司完成的網頁標記分析。這些公司發現，許多網站使用id和class屬性來暗示非語義元素內容的含義。
例如，他們發現了很多看起來像這樣的 div：<div id="nav">、<div id="header">和<div id="footer">。此類發現有助于 W3C 識別和定位新的語義標簽以包含在 HTML5 中，例如：nav和。我們可以將最常見和最重要的語義元素分為四類：header``footer``article``aside
過去，div元素是識別和分組網站部分的主要方式。然而，隨著 HTML5 的發布，除了標簽提供的分組屬性之外，我們還有幾個新標簽可供使用，這些標簽提供語義含義div：
在網絡的早期，通常會看到這樣的標記：
<style>
.italics { font-style: italic; }
</style>
<p>Some paragraph content including one
<span class="italics">italicized</span> word.
</p> 今天我們（希望）不會夢想做這樣的事情，因為span元素告訴瀏覽器和其他計算機訪問者完全沒有關于嵌套在開始和結束標記之間的文本的含義或目的。我們不會使用非語義標簽，而是在應該以斜體顯示的單詞周圍span添加標簽。em通過使用em標簽，使用屏幕閱讀器或訪問內容的其他計算機的訪問者將了解應用標簽以增加對已標記內容的強調。該em元素只是 HTML 標記如何為文本內容添加語義含義的一個示例。其他示例包括：
我們的字體和 Web 排版教程提供了大量關于正確使用這些標簽來為文本內容分配語義含義的詳細信息。
HTML5 還包括三個標簽，用于標識標簽之間提供的媒體類型。這些標簽有雙重用途。首先，它們向瀏覽器發出信號，需要對特定技術資源（例如視頻播放引擎）進行排隊。其次，他們為內容賦予語義意義。
您可以在我們的HTML5 媒體教程中了解有關嵌入audio和video元素的更多信息。此外，我們關于在網絡上使用圖像的文章提供了有關何時使用該元素以及何時堅持使用該元素的更多信息。picture``img
幾個 HTML 元素用于表示多個元素之間的相關性。例如，使用有序列表 ( ol) 告訴瀏覽器列表中的項目彼此相關，需要以特定的順序出現。用于表示多個元素之間相關性的其他元素包括：
如果您是 HTML 新手，請花時間學習如何在語義上使用所有這些不同的 HTML 標記。如果您不確定您使用的標簽是否正確，請花幾分鐘時間進行一些研究。正如我們所見，使用正確的標簽很重要。如果您已經使用 HTML 一段時間了，請花點時間了解新的 HTML5 元素以及如何正確使用它們。在過去的幾年里，HTML 變得越來越復雜，繼續使用div帶有class和id屬性，但語義 HTML5 標記的可訪問性和互操作性承諾足以接受這些新的語義元素。
那么你已經了解清楚語義標記了嗎？
正確的標簽做正確的事情。html語義化讓頁面的內容結構化，結構更清晰。便于開發者閱讀和寫出更優雅的代碼,使閱讀源代碼的人對網站更容易將網站分塊，便于閱讀維護理解。同時讓瀏覽器的爬蟲和機器更好的理解和分析,利于SEO。
目標
語義化標簽有什么用？
有哪些結構語義標簽？
就是用正確的標簽做正確的事。如h1標簽，把適當的標簽用在合適的地方，使頁面結構更加的清晰。
標題標簽 h1~h6
加重標簽 strong
高亮標簽 mark
引用標簽 blockquoto
標題標簽
1. 使用html語義化，能使頁面結構更清晰，便于解析。
html語義化結構
2. 有利于SEO。搜索引擎爬蟲依賴于html標簽來確定上下文和關鍵字權重。
搜索引擎
3. 使用html語義化，在沒有css樣式的時候頁面也能正確清晰的呈現
4. 有利于各種設備的解析，如盲人閱讀器，屏幕閱讀器，以特殊的方式來渲染網頁
5. 有利于團隊合作開發與維護，語義化更具有可讀性。
<header>元素描述了文檔的頭部區域，通常是一個網站的頭部
在頁面中你可以使用多個<header> 元素，常用在嵌套結構里
網站的頭部
<footer>元素描述了文檔的底部區域，通常是一個網站的底部
一個頁腳通常包含文檔的作者，著作權信息，鏈接的使用條款，聯系信息等
網站的底部
<nav> 標簽定義導航鏈接的部分。
導航鏈接
<article> 標簽定義獨立的內容，通常是指一個獨立的整體，例如文章的內容作為一個整體，右邊的側邊欄作為一個整體。
獨立的內容
<section> 標簽定義文檔中的節、區段，整體中的某個模塊。
根據W3C HTML5文檔: section 包含了一組內容及其標題。
整體中的某個模塊
<aside> 標簽定義頁面主區域內容之外的內容（比如側邊欄）
側邊欄
<figure>標簽規定獨立的流內容（圖像、圖表、照片、代碼等等）。
<figure> 元素的內容應該與主內容相關，但如果被刪除，則不應對文檔流產生影響。
<figcaption> 標簽定義 <figure> 元素的標題，應該被置于 "figure" 元素的第一個或最后一個子元素的位置。
代碼
常見于文章中的圖片
TML 的語義化標簽是指用于描述內容結構和含義的標簽。
這些標簽不僅僅用于樣式和布局，更重要的是通過標簽本身傳達出內容的語義和結構，使得頁面具有更好的可讀性、可訪問性和搜索引擎優化。
以下是一些常見的 HTML 語義化標簽：
通過使用這些語義化標簽，我們可以更清晰地描述頁面的結構和內容
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
