到底什么HTML是語(yǔ)義標(biāo)記？做前端開(kāi)發(fā)為什么要學(xué)寫(xiě)它

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

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

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

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

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

許多 HTML 標(biāo)簽具有語(yǔ)義含義。也就是說(shuō)，元素本身傳達(dá)了一些關(guān)于包含在開(kāi)始標(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)簽的語(yǔ)義含義h1是它用于標(biāo)識(shí)特定網(wǎng)頁(yè)或部分的最重要的標(biāo)題。

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

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

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

正確使用 HTML 元素

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

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

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

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

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

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

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

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

定義語(yǔ)義標(biāo)記

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

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

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

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

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

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

我們?nèi)绾尉帉?xiě)語(yǔ)義標(biāo)記？

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

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

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

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

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

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

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

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

header：用于網(wǎng)頁(yè)標(biāo)題的容器，通常包含網(wǎng)站徽標(biāo)、標(biāo)題元素和網(wǎng)站導(dǎo)航。
footer：用于網(wǎng)頁(yè)頁(yè)腳的容器，除了導(dǎo)航鏈接和返回網(wǎng)頁(yè)頂部的鏈接外，通常還包含作者身份、聯(lián)系方式和版權(quán)信息。
main：一個(gè)高級(jí)元素，用于包含單個(gè)網(wǎng)頁(yè)獨(dú)有的所有內(nèi)容，并且不會(huì)在多個(gè)網(wǎng)頁(yè)中重復(fù)。
nav：包含站點(diǎn)導(dǎo)航鏈接塊的元素。該元素通常放置在頁(yè)面header和footer中，也可以在aside（側(cè)邊欄）元素中使用。
section：該section元素用于標(biāo)記文檔的各個(gè)部分，例如長(zhǎng)篇文章的章節(jié)或主要部分。
aside：用于標(biāo)識(shí)與頁(yè)面上的主要內(nèi)容相關(guān)但不屬于文檔主要流程的內(nèi)容。例如，該什么是語(yǔ)義標(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ī)訪問(wèn)者完全沒(méi)有關(guān)于嵌套在開(kāi)始和結(jié)束標(biāo)記之間的文本的含義或目的。我們不會(huì)使用非語(yǔ)義標(biāo)簽，而是在應(yīng)該以斜體顯示的單詞周圍span添加標(biāo)簽。em通過(guò)使用em標(biāo)簽，使用屏幕閱讀器或訪問(wèn)內(nèi)容的其他計(jì)算機(jī)的訪問(wèn)者將了解應(yīng)用標(biāo)簽以增加對(duì)已標(biāo)記內(nèi)容的強(qiáng)調(diào)。該em元素只是 HTML 標(biāo)記如何為文本內(nèi)容添加語(yǔ)義含義的一個(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é)果頁(yè)面中搜索詞的每次出現(xiàn)。
cite：該cite元素用于標(biāo)識(shí)部分內(nèi)容源自的原始作品。
blockquoteand q: blockquoteand q(quote) 元素用于識(shí)別從另一個(gè)來(lái)源直接引用的文本。
time：該time元素可用于告訴瀏覽器、網(wǎng)絡(luò)爬蟲(chóng)和其他智能設(shè)備，特定的內(nèi)容位代表 24 小時(shí)制的時(shí)間或特定的日歷日期。

我們的字體和 Web 排版教程提供了大量關(guān)于正確使用這些標(biāo)簽來(lái)為文本內(nèi)容分配語(yǔ)義含義的詳細(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)容賦予語(yǔ)義意義。

audio：用于向文檔添加一個(gè)或多個(gè)音頻內(nèi)容源，并允許瀏覽器根據(jù)訪問(wèn)者的設(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

結(jié)束的想法

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

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

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

目標(biāo)

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

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

什么是HTML語(yǔ)義化

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

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

加重標(biāo)簽 strong

高亮標(biāo)簽 mark

引用標(biāo)簽 blockquoto

標(biāo)題標(biāo)簽

html語(yǔ)義化有什么作用

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

html語(yǔ)義化結(jié)構(gòu)

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

搜索引擎

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

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

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

頭部--header元素

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

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

網(wǎng)站的頭部

尾部--footer元素

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

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

網(wǎng)站的底部

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

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

導(dǎo)航鏈接

整體--article元素

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

獨(dú)立的內(nèi)容

章節(jié)--section元素

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

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

整體中的某個(gè)模塊

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

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

側(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àn)于文章中的圖片

總結(jié)

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

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

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

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

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

在線咨詢

上一篇：超文本標(biāo)記語(yǔ)言HTML
下一篇：如何通過(guò)css格子布局一個(gè)簡(jiǎn)單的頁(yè)面

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商