您了解 HTML 和 Web 時(shí)，您可能會(huì)發(fā)現(xiàn)反復(fù)遇到一個(gè)通常未定義的特定單詞。那個(gè)詞是語義的。

你可能會(huì)讀到諸如“我們?nèi)ふ艺Z義元素”或“我們盡量做到語義化”之類的陳述，但永遠(yuǎn)無法清楚地了解語義這個(gè)詞的含義。在本文中，我們將探索語義標(biāo)記的世界，提出術(shù)語的有效定義，并將該概念應(yīng)用于我們編寫 HTML 標(biāo)記的方式。

什么是語義標(biāo)記？

根據(jù) Dictionary.com 的說法，語義是指對(duì)單詞或句子含義的正確解釋。

從語義上使用一個(gè)詞就是以一種與該詞的含義正確對(duì)齊的方式使用它。當(dāng)我們誤用一個(gè)詞時(shí)，我們并不是在語義上使用它。

許多 HTML 標(biāo)簽具有語義含義。也就是說，元素本身傳達(dá)了一些關(guān)于包含在開始標(biāo)簽和結(jié)束標(biāo)簽之間的內(nèi)容類型的信息。

例如，當(dāng)瀏覽器遇到一個(gè)h1標(biāo)題時(shí)，它會(huì)將該標(biāo)記解釋為表示該元素的內(nèi)容h1構(gòu)成了包含該元素的部分的最重要的標(biāo)題。標(biāo)簽的語義含義h1是它用于標(biāo)識(shí)特定網(wǎng)頁或部分的最重要的標(biāo)題。

啟用語義標(biāo)記的兩種做法

如果我們要編寫語義標(biāo)記，必須采用兩種不同的做法。

0. 語義標(biāo)記要求根據(jù)其預(yù)期目的使用 HTML 元素。
1. 語義標(biāo)記需要內(nèi)容和表示的分離。

正確使用 HTML 元素

在編寫語義標(biāo)記時(shí)，我們使用 HTML 標(biāo)簽來告訴瀏覽器元素的內(nèi)容。在語義標(biāo)記中，標(biāo)簽不再只是讓內(nèi)容以人類可讀的格式顯示在網(wǎng)頁上的一種方式。

標(biāo)簽本身成為一種告訴機(jī)器（無論是瀏覽器、計(jì)算機(jī)、智能手機(jī)還是其他智能設(shè)備）有關(guān)內(nèi)容含義的方式。

要編寫語義標(biāo)記，我們必須正確使用 HTML 標(biāo)簽，以便我們的標(biāo)記既是人類可讀的，也是機(jī)器可讀的。

分離內(nèi)容和演示

過去，通常使用標(biāo)記來定義樣式和控制網(wǎng)頁布局。

標(biāo)題級(jí)別的選擇不是基于層次結(jié)構(gòu)，而是基于 Web 瀏覽器應(yīng)用的樣式，表格用于網(wǎng)頁布局而不是組織表格數(shù)據(jù)，一些 HTML 標(biāo)記（例如frameset）是為了明確定義網(wǎng)頁而創(chuàng)建的布局等等。

當(dāng)我們編寫語義標(biāo)記時(shí)，我們不能再根據(jù)視覺呈現(xiàn)來選擇 HTML 元素。相反，我們根據(jù)語義含義選擇 HTML 元素，然后使用CSS定義我們內(nèi)容的視覺呈現(xiàn)。

在編寫語義標(biāo)記時(shí)，網(wǎng)頁元素的表示與內(nèi)容本身的標(biāo)記完全分離和不同。

定義語義標(biāo)記

考慮到這兩種做法，我們可以這樣定義語義標(biāo)記：

語義標(biāo)記是使用諸如 HTML 之類的標(biāo)記語言通過正確選擇標(biāo)記元素來傳達(dá)有關(guān)文檔中每個(gè)元素的含義的信息，并保持標(biāo)記和文檔中包含的元素的視覺呈現(xiàn)之間的完全分離.

為什么語義標(biāo)記很重要？

好的 CSS 可以使普通網(wǎng)站訪問者看不到不好的標(biāo)記。然而，再多的樣式也不會(huì)讓糟糕的標(biāo)記對(duì)計(jì)算機(jī)化的訪問者更有意義，例如搜索引擎網(wǎng)絡(luò)爬蟲、瀏覽器翻譯工具或屏幕閱讀器等輔助技術(shù)。

根據(jù) Bruce Lawson的說法，HTML 元素的語義使用“增強(qiáng)了可訪問性、可搜索性、國際化和互操作性”。換句話說，如果您希望所有訪問者都可以訪問您的網(wǎng)站、實(shí)現(xiàn)較高的搜索引擎排名、可供來自世界各地的訪問者使用以及與其他 Web 服務(wù)有效交互，則必須編寫語義標(biāo)記。

編寫語義標(biāo)記是關(guān)于創(chuàng)建人類和計(jì)算機(jī)可讀的 Web 內(nèi)容。當(dāng)人類和計(jì)算機(jī)都可以很好地閱讀網(wǎng)絡(luò)時(shí)，它就變得更易于訪問，因?yàn)橛?jì)算機(jī)能夠更好地分析其內(nèi)容、索引、交付它，并且開發(fā)人員能夠更好地將不同的信息源結(jié)合到新的網(wǎng)絡(luò)服務(wù)中.

我們?nèi)绾尉帉懻Z義標(biāo)記？

我們通過正確選擇和使用 HTML 標(biāo)記以及通過選擇傳達(dá)有關(guān)標(biāo)記所標(biāo)記信息的某些標(biāo)記來編寫語義標(biāo)記。

HTML 中有語義元素和非語義元素。非語義元素的示例是div和span。這些標(biāo)簽不會(huì)告訴計(jì)算機(jī)有關(guān)元素內(nèi)容含義的任何信息。

雖然有用，并且在某些情況下可以很好地使用，但如果語義標(biāo)簽可用并且適合特定用途，請(qǐng)?jiān)谑褂梅钦Z義標(biāo)簽之前使用它。

許多語義標(biāo)簽來自谷歌和Opera等公司完成的網(wǎng)頁標(biāo)記分析。這些公司發(fā)現(xiàn)，許多網(wǎng)站使用id和class屬性來暗示非語義元素內(nèi)容的含義。

例如，他們發(fā)現(xiàn)了很多看起來像這樣的 div：<div id="nav">、<div id="header">和<div id="footer">。此類發(fā)現(xiàn)有助于 W3C 識(shí)別和定位新的語義標(biāo)簽以包含在 HTML5 中，例如：nav和。我們可以將最常見和最重要的語義元素分為四類：header``footer``article``aside

• 文檔結(jié)構(gòu)標(biāo)簽
• 文本含義標(biāo)簽
• 媒體類型標(biāo)簽
• 相關(guān)標(biāo)簽

文件結(jié)構(gòu)

過去，div元素是識(shí)別和分組網(wǎng)站部分的主要方式。然而，隨著 HTML5 的發(fā)布，除了標(biāo)簽提供的分組屬性之外，我們還有幾個(gè)新標(biāo)簽可供使用，這些標(biāo)簽提供語義含義div：

• header：用于網(wǎng)頁標(biāo)題的容器，通常包含網(wǎng)站徽標(biāo)、標(biāo)題元素和網(wǎng)站導(dǎo)航。
• footer：用于網(wǎng)頁頁腳的容器，除了導(dǎo)航鏈接和返回網(wǎng)頁頂部的鏈接外，通常還包含作者身份、聯(lián)系方式和版權(quán)信息。
• main：一個(gè)高級(jí)元素，用于包含單個(gè)網(wǎng)頁獨(dú)有的所有內(nèi)容，并且不會(huì)在多個(gè)網(wǎng)頁中重復(fù)。
• nav：包含站點(diǎn)導(dǎo)航鏈接塊的元素。該元素通常放置在頁面header和footer中，也可以在aside（側(cè)邊欄）元素中使用。
• section：該section元素用于標(biāo)記文檔的各個(gè)部分，例如長篇文章的章節(jié)或主要部分。
• aside：用于標(biāo)識(shí)與頁面上的主要內(nèi)容相關(guān)但不屬于文檔主要流程的內(nèi)容。例如，該什么是語義標(biāo)記？

文本含義

在網(wǎng)絡(luò)的早期，通常會(huì)看到這樣的標(biāo)記：

<style>
 .italics {     font-style: italic; }
</style> 
<p>Some paragraph content including one
   <span class="italics">italicized</span> word.
</p> 

今天我們（希望）不會(huì)夢(mèng)想做這樣的事情，因?yàn)?/span>span元素告訴瀏覽器和其他計(jì)算機(jī)訪問者完全沒有關(guān)于嵌套在開始和結(jié)束標(biāo)記之間的文本的含義或目的。我們不會(huì)使用非語義標(biāo)簽，而是在應(yīng)該以斜體顯示的單詞周圍span添加標(biāo)簽。em通過使用em標(biāo)簽，使用屏幕閱讀器或訪問內(nèi)容的其他計(jì)算機(jī)的訪問者將了解應(yīng)用標(biāo)簽以增加對(duì)已標(biāo)記內(nèi)容的強(qiáng)調(diào)。該em元素只是 HTML 標(biāo)記如何為文本內(nèi)容添加語義含義的一個(gè)示例。其他示例包括：

• h1, h2, h3, h4, h5, 和h6: 標(biāo)題元素標(biāo)簽用于標(biāo)識(shí)應(yīng)該作為標(biāo)題出現(xiàn)的文本。最高級(jí)別或最重要的標(biāo)題是按照重要性降序排列的標(biāo)題h1級(jí)別。h2``h6
• strong：帶有標(biāo)簽的文本strong被賦予了額外的重要性，并且通常以粗體顯示。
• mark：mark標(biāo)簽用于突出在特定上下文中具有特定重要性的文本。例如，它可用于突出顯示搜索結(jié)果頁面中搜索詞的每次出現(xiàn)。
• cite：該cite元素用于標(biāo)識(shí)部分內(nèi)容源自的原始作品。
• blockquoteand q: blockquoteand q(quote) 元素用于識(shí)別從另一個(gè)來源直接引用的文本。
• time：該time元素可用于告訴瀏覽器、網(wǎng)絡(luò)爬蟲和其他智能設(shè)備，特定的內(nèi)容位代表 24 小時(shí)制的時(shí)間或特定的日歷日期。

我們的字體和 Web 排版教程提供了大量關(guān)于正確使用這些標(biāo)簽來為文本內(nèi)容分配語義含義的詳細(xì)信息。

媒體類型

HTML5 還包括三個(gè)標(biāo)簽，用于標(biāo)識(shí)標(biāo)簽之間提供的媒體類型。這些標(biāo)簽有雙重用途。首先，它們向?yàn)g覽器發(fā)出信號(hào)，需要對(duì)特定技術(shù)資源（例如視頻播放引擎）進(jìn)行排隊(duì)。其次，他們?yōu)閮?nèi)容賦予語義意義。

• audio：用于向文檔添加一個(gè)或多個(gè)音頻內(nèi)容源，并允許瀏覽器根據(jù)訪問者的設(shè)備和瀏覽器選擇最佳選項(xiàng)。
• video：類似于audio元素，但用于將視頻內(nèi)容添加到標(biāo)記文檔。
• picture：圖片元素用于允許網(wǎng)絡(luò)瀏覽器根據(jù)媒體查詢的結(jié)果從可用選項(xiàng)中選擇最佳圖像。

您可以在我們的HTML5 媒體教程中了解有關(guān)嵌入audio和video元素的更多信息。此外，我們關(guān)于在網(wǎng)絡(luò)上使用圖像的文章提供了有關(guān)何時(shí)使用該元素以及何時(shí)堅(jiān)持使用該元素的更多信息。picture``img

相關(guān)標(biāo)簽

幾個(gè) HTML 元素用于表示多個(gè)元素之間的相關(guān)性。例如，使用有序列表 ( ol) 告訴瀏覽器列表中的項(xiàng)目彼此相關(guān)，需要以特定的順序出現(xiàn)。用于表示多個(gè)元素之間相關(guān)性的其他元素包括：

• ul: 無序列表用于表示列表中項(xiàng)目之間的關(guān)系，并表明它們不需要按特定順序來理解。
• figure：該figure元素用于將一段內(nèi)容（例如圖像、圖表、圖形或文本）和由figcaption標(biāo)簽標(biāo)記的標(biāo)題組合在一起。通過在標(biāo)簽之間嵌套標(biāo)題和內(nèi)容，figure可以識(shí)別嵌套元素之間的關(guān)系。我們的圖片頁面包含有關(guān)實(shí)施此有用標(biāo)簽的更多信息。
• address：該屬性用于將聯(lián)系人信息與包含該address元素的父元素相關(guān)聯(lián)。例如，當(dāng)添加到 時(shí)article，該address元素提供文章作者的聯(lián)系信息，當(dāng)添加到網(wǎng)頁時(shí)footer，address標(biāo)識(shí)網(wǎng)頁所有者的聯(lián)系信息。

結(jié)束的想法

如果您是 HTML 新手，請(qǐng)花時(shí)間學(xué)習(xí)如何在語義上使用所有這些不同的 HTML 標(biāo)記。如果您不確定您使用的標(biāo)簽是否正確，請(qǐng)花幾分鐘時(shí)間進(jìn)行一些研究。正如我們所見，使用正確的標(biāo)簽很重要。如果您已經(jīng)使用 HTML 一段時(shí)間了，請(qǐng)花點(diǎn)時(shí)間了解新的 HTML5 元素以及如何正確使用它們。在過去的幾年里，HTML 變得越來越復(fù)雜，繼續(xù)使用div帶有class和id屬性，但語義 HTML5 標(biāo)記的可訪問性和互操作性承諾足以接受這些新的語義元素。

那么你已經(jīng)了解清楚語義標(biāo)記了嗎？

正確的標(biāo)簽做正確的事情。html語義化讓頁面的內(nèi)容結(jié)構(gòu)化，結(jié)構(gòu)更清晰。便于開發(fā)者閱讀和寫出更優(yōu)雅的代碼,使閱讀源代碼的人對(duì)網(wǎng)站更容易將網(wǎng)站分塊，便于閱讀維護(hù)理解。同時(shí)讓瀏覽器的爬蟲和機(jī)器更好的理解和分析,利于SEO。

目標(biāo)

語義化標(biāo)簽有什么用？

有哪些結(jié)構(gòu)語義標(biāo)簽？

什么是HTML語義化

就是用正確的標(biāo)簽做正確的事。如h1標(biāo)簽，把適當(dāng)?shù)臉?biāo)簽用在合適的地方，使頁面結(jié)構(gòu)更加的清晰。

標(biāo)題標(biāo)簽 h1~h6

加重標(biāo)簽 strong

高亮標(biāo)簽 mark

引用標(biāo)簽 blockquoto

html語義化有什么作用

1. 使用html語義化，能使頁面結(jié)構(gòu)更清晰，便于解析。

2. 有利于SEO。搜索引擎爬蟲依賴于html標(biāo)簽來確定上下文和關(guān)鍵字權(quán)重。

3. 使用html語義化，在沒有css樣式的時(shí)候頁面也能正確清晰的呈現(xiàn)

4. 有利于各種設(shè)備的解析，如盲人閱讀器，屏幕閱讀器，以特殊的方式來渲染網(wǎng)頁

5. 有利于團(tuán)隊(duì)合作開發(fā)與維護(hù)，語義化更具有可讀性。

頭部--header元素

<header>元素描述了文檔的頭部區(qū)域，通常是一個(gè)網(wǎng)站的頭部

在頁面中你可以使用多個(gè)<header> 元素，常用在嵌套結(jié)構(gòu)里

尾部--footer元素

<footer>元素描述了文檔的底部區(qū)域，通常是一個(gè)網(wǎng)站的底部

一個(gè)頁腳通常包含文檔的作者，著作權(quán)信息，鏈接的使用條款，聯(lián)系信息等

導(dǎo)航鏈接--nav元素

<nav> 標(biāo)簽定義導(dǎo)航鏈接的部分。

整體--article元素

<article> 標(biāo)簽定義獨(dú)立的內(nèi)容，通常是指一個(gè)獨(dú)立的整體，例如文章的內(nèi)容作為一個(gè)整體，右邊的側(cè)邊欄作為一個(gè)整體。

章節(jié)--section元素

<section> 標(biāo)簽定義文檔中的節(jié)、區(qū)段，整體中的某個(gè)模塊。

根據(jù)W3C HTML5文檔: section 包含了一組內(nèi)容及其標(biāo)題。

副區(qū)域--aside元素

<aside> 標(biāo)簽定義頁面主區(qū)域內(nèi)容之外的內(nèi)容（比如側(cè)邊欄）

獨(dú)立的流內(nèi)容--figure元素

<figure>標(biāo)簽規(guī)定獨(dú)立的流內(nèi)容（圖像、圖表、照片、代碼等等）。

<figure> 元素的內(nèi)容應(yīng)該與主內(nèi)容相關(guān)，但如果被刪除，則不應(yīng)對(duì)文檔流產(chǎn)生影響。

<figcaption> 標(biāo)簽定義 <figure> 元素的標(biāo)題，應(yīng)該被置于 "figure" 元素的第一個(gè)或最后一個(gè)子元素的位置。

總結(jié)

TML 的語義化標(biāo)簽是指用于描述內(nèi)容結(jié)構(gòu)和含義的標(biāo)簽。

這些標(biāo)簽不僅僅用于樣式和布局，更重要的是通過標(biāo)簽本身傳達(dá)出內(nèi)容的語義和結(jié)構(gòu)，使得頁面具有更好的可讀性、可訪問性和搜索引擎優(yōu)化。

以下是一些常見的 HTML 語義化標(biāo)簽：

1. <header>：表示頁面或頁面內(nèi)部的頭部，通常包含網(wǎng)站的標(biāo)題、導(dǎo)航欄、標(biāo)志等。
2. <nav>：表示導(dǎo)航欄，用于包含頁面的導(dǎo)航鏈接。
3. <main>：表示頁面的主要內(nèi)容，每個(gè)頁面應(yīng)該只有一個(gè)<main>標(biāo)簽。
4. <article>：表示獨(dú)立的、完整的文章或內(nèi)容塊，如博客文章、新聞報(bào)道等。
5. <section>：表示頁面中的一個(gè)獨(dú)立區(qū)域或部分，可以包含相關(guān)的內(nèi)容組合。
6. <aside>：表示頁面的側(cè)邊欄或附屬內(nèi)容，通常包含與主要內(nèi)容相關(guān)但可以獨(dú)立存在的內(nèi)容。
7. <footer>：表示頁面或頁面內(nèi)部的底部，通常包含版權(quán)信息、聯(lián)系方式等。
8. <figure>和<figcaption>：<figure>表示一組與文檔相關(guān)的圖像、圖表或代碼等媒體內(nèi)容，而<figcaption>則表示這些內(nèi)容的標(biāo)題或說明。
9. <time>：表示日期和時(shí)間，用于標(biāo)記具體的時(shí)間信息。
10. <blockquote>：表示一個(gè)塊引用，通常用于引用其他來源的文本。

通過使用這些語義化標(biāo)簽，我們可以更清晰地描述頁面的結(jié)構(gòu)和內(nèi)容