正確的標簽做正確的事情。html語義化讓頁面的內容結構化，結構更清晰。便于開發者閱讀和寫出更優雅的代碼,使閱讀源代碼的人對網站更容易將網站分塊，便于閱讀維護理解。同時讓瀏覽器的爬蟲和機器更好的理解和分析,利于SEO。

目標

語義化標簽有什么用？

有哪些結構語義標簽？

什么是HTML語義化

就是用正確的標簽做正確的事。如h1標簽，把適當的標簽用在合適的地方，使頁面結構更加的清晰。

標題標簽 h1~h6

加重標簽 strong

高亮標簽 mark

引用標簽 blockquoto

html語義化有什么作用

1. 使用html語義化，能使頁面結構更清晰，便于解析。

2. 有利于SEO。搜索引擎爬蟲依賴于html標簽來確定上下文和關鍵字權重。

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

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

5. 有利于團隊合作開發與維護，語義化更具有可讀性。

頭部--header元素

<header>元素描述了文檔的頭部區域，通常是一個網站的頭部

在頁面中你可以使用多個<header> 元素，常用在嵌套結構里

尾部--footer元素

<footer>元素描述了文檔的底部區域，通常是一個網站的底部

一個頁腳通常包含文檔的作者，著作權信息，鏈接的使用條款，聯系信息等

導航鏈接--nav元素

<nav> 標簽定義導航鏈接的部分。

整體--article元素

<article> 標簽定義獨立的內容，通常是指一個獨立的整體，例如文章的內容作為一個整體，右邊的側邊欄作為一個整體。

章節--section元素

<section> 標簽定義文檔中的節、區段，整體中的某個模塊。

根據W3C HTML5文檔: section 包含了一組內容及其標題。

副區域--aside元素

<aside> 標簽定義頁面主區域內容之外的內容（比如側邊欄）

獨立的流內容--figure元素

<figure>標簽規定獨立的流內容（圖像、圖表、照片、代碼等等）。

<figure> 元素的內容應該與主內容相關，但如果被刪除，則不應對文檔流產生影響。

<figcaption> 標簽定義 <figure> 元素的標題，應該被置于 "figure" 元素的第一個或最后一個子元素的位置。

總結

.標簽語義化

提到標簽，很多剛入門前端開發的人，肯定都會很納悶，這么多HTML標簽我如何記住呢？我又應該根據什么依據去正確使用它呢？其實這樣的問題，我剛開始和大家一樣苦悶，但是在我學習Web頁面開發的過程中，然后不斷的積累，不斷的總結，發現要想記住HTML標簽以及怎樣更好的去使用這些標簽，需要做到以下三點：

第一點：不要死記硬背，沒意義，只需要記住常用的哪幾個足矣。

第二點：根據內容選擇使用HTML標簽，什么意思呢？見下文分解。

第三點：遵循W3C的規范。

首先，第一點咱們就不用說，不讓死記硬背，就是要多寫頁面，多敲代碼，久而久之孰能生巧，巧能生花，慢慢的你就能記住這些標簽了，而且在開發頁面的過程中，你們會發現，咱們最常用的也就是那么幾個而已。

其次，第二點根據內容選擇使用HTML標簽，這一點非常關鍵，因為你掌握了這一點，你能很好地去使用HTML標簽，并且能讓頁面變得很優質，這也會提高你網頁被搜索引擎收錄。

最后，也就是第三點，這一點自然不用懷疑，如果要想讓頁面更好的在不同的瀏覽器中呈現出一致的效果，那么必須遵循W3C的規范。

說了這么多，只是一些學習需要注意的問題，下面才是真正解開怎樣去使用和記住標簽這個謎團的方法。

我們在使用標簽的過程中，大家會發現類似的標簽，比如標題標簽（h1-h6）、p（段落標簽）、a（超鏈接標簽）以及圖片標簽（img）等，通過這些標簽的名稱，咱們是不是不難理解吧，很直觀的就知道這些標簽該怎么，用于何處。而這些名稱的含義就是我們所說的標簽語義化。隨著智能手機的出來，移動Web都是通過H5去開發頁面，而H5中的HTML標簽就比之前版本的HTML標簽更加具有語義化。

那么什么是標簽語義化呢？所謂的標簽語義化，指的就是標簽所代表的含義。咱們可以通過標簽的含義，正確地去使用它。

標簽語義化的作用：

• 通過使用語義化標簽，更能精準地將其把內容呈現出來。
• 通過使用語義化標簽，讓頁面結構更加的清晰，方便代碼的閱讀和維護。
• 能讓瀏覽器或網絡爬蟲更好地解析，從而更好地分析和抓取網頁中的內容。
• 使用語義化標簽還能讓搜索引擎得到更好的優化。

如下圖所示，通過使用語義化標簽和沒使用任何標簽，就能直觀感受到語義化標簽的好處。

那么如何去判斷一個頁面中，語義化是否良好呢？很簡單，直接扒掉CSS這層漂亮的衣服，當我們把CSS去掉后，如果頁面中的結構依然組織有序，并且有良好的可讀性，那么它就是非常良好的。

如何去使用這些標簽呢？首先根據內容確定語義化的標簽，其次再根據呈現需求，使用CSS樣式。因此HTML標簽并非通過死記硬背，而是通過在使用的過程中，利用HTML標簽的語義化去記憶。如下圖所示，通過使用語義化標簽，瞬間就能把普通的文本，以更清晰的結構呈現出來。

2.常用標簽分類匯總

通常我們常見的標簽有標題標簽、段落標簽、水平線標簽、換行標簽以及div和span標簽，這些標簽又被統稱為排版標簽。

在開發中，排版標簽主要是和CSS搭配使用，主要是用于顯示網頁的整體結構，也是網頁布局中常用的標簽。下面我一一了解一下。

排版標簽：

【1】標題標簽（h1-h6）

• 縮寫來源：標題標簽的英文單詞是head，因此它使用它的縮寫h來表示。
• 語義：標題標簽主要是用于突顯標題內容，它是h1-h6（分為1級標題、2級標題、3級標題......6級標題），級別依次遞減。級別越小，標題就會越小。
• 語法格式如下：

呈現的效果如下：

一句話總結：使用了標題標簽的文字會加粗，會根據級別顯示文字的大小，并且一行只能放一個標題。

【2】段落標簽（p）

• 縮寫來源：p標簽的英文單詞是paragraph，表示段落的意思。
• 語義：p標簽可以把html文檔分割為若干段落。在網頁中要想把文字以段落的形式呈現，并且有條不紊的，那么段落就是必備的標簽。
• 語法格式如下：

【3】水平線標簽（hr）

• 縮寫來源：hr的英文單詞是horizontal，表示橫線的意思。
• 語義：它表示分隔線，用于將文字內容分隔開，讓文檔結構看起來更加清晰，層次分明。當然在網頁中除了使用分隔線（hr）標簽來實現，還可以通過圖片插入以及CSS樣式來實現，只不過使用hr標簽是最簡單的方式。提示：CSS樣式是頁面中的重點，此處主要是介紹HTML，因此暫不做詳細說明。
• 語法格式：<hr />。
• 標簽特點：它是一個單標簽，hr標簽默認是以水平線的樣式進行顯示。

【4】換行標簽（br）

• 縮寫來源：br的英文單詞是break，打斷、換行的意思。
• 語義：表示換行的意思。在html中，一個段落的文字會從左到右依次排列顯示，直到瀏覽器窗口的最右端，才會自動換行。如果我們在實際開發中碰到需要將文本內容強制換行顯示的，此時就可以使用換行標簽實現。
• 語法格式：<br />。
• 標簽特點：它也是一個單標簽。
• 示例：將以下內容通過br標簽強制換行

呈現效果：

【5】div和span標簽

• 縮寫來源：div的英文是division，表示分割、分區的意思。span沒有縮寫，表示跨度、跨距和范圍的意思。
• 語義：div和span標簽，沒有任何語言，主要是用于網頁布局使用。
• 語法格式：<div>這是一個div盒子</div> <span>這是一個span盒子</span>
• div和span的區別：div標簽，主要是用于布局，在沒有使用其它干預的情況下，一行只能放一個div。而span標簽，也是用來布局，在沒有任何其它的干預的情況下，一行上可以放很多span標簽。此處的效果，大家可以根據語法，自行在實現查看一下對比效果。

最后給大家來一個完美的總結：

難道這就完了嗎？咱們的標簽就只有這些常用的嗎？那當然不是，咱們接下來再看我們的文本格式化標簽。

文本格式化標簽

文本格式化標簽的作用：通常文本格式化標簽主要用于網頁中文字樣式的設置，比如字體加粗、斜體或下劃線等效果，當然后期也會通過CSS樣式來實現，會更加完美。

常見的文本格式化標簽如下：

它們分別的區別：

• b和strong：b標簽只是加粗，strong除了加粗，還具有強調的意思，更具語義化。
• i和em：i只是讓文本顯示斜體的效果，而em在斜體的效果上加強了語義。
• s和del：s只是讓文本顯示刪除線，而得了不僅顯示刪除線，還加強了語義。
• u和ins：u只是添加了下劃線，而ins不僅顯示了下劃線，還加強了語義。

我么網頁中除了排版標簽、文本格式化標簽，當然還少不了圖片標簽（img），通過圖片的展示，會讓整個頁面更加的生動形象。那么下面再來看一下這個標簽吧。

圖片標簽（img）

• 縮寫來源：img的英文單詞是image，表示圖像、影像的意思。
• 語義：用于顯示圖片內容。
• 語法格式：<img src='圖像url' />，在這個的語法中，我們發現img標簽使用了src屬性，這個屬性主要是用于指定圖像的文件路徑，也是img的必須屬性。
• img標簽常見屬性如下所示：

• 標簽特點：img標簽主要是用于在網頁中插入圖像，它是一個單標簽。
• 知識點擴展：通過img標簽，我們會發現，html標簽除了自身外，它們還具有一些屬性，這些屬性，我們稱為標簽屬性，通過標簽屬性可以設置標簽的一些外在特性。標簽屬性的基本語法格式：<標簽名 屬性1="值1" 屬性2="值2" ...>內容 </標簽名>。

標簽屬性的特點：

• 一個標簽可以擁有多個屬性，必須寫在開始標簽中，位于標簽名后面。
• 屬性之間不分先后順序，標簽名與屬性、屬性與屬性之間均以空格分開。
• 任何標簽的屬性都有默認值，省略該屬性則使用默認值。
• 標簽的屬性采用的是鍵值對的格式key="value"的形式。

鏈接標簽

• 縮寫來源：a標簽的英文單詞是anchor，表示錨、鐵錨的意思。
• 語義：表示超文本鏈接。
• 語法格式：<a href="跳轉目標" target="目標窗口的彈出方式">文本或圖像</a>。
• 常見的屬性：

提示：

• 比如添加作為外部鏈接，需要添加外部地址。
• 內部鏈接，就是頁面直接內部相互鏈接，因此只需要使用名稱即可，比如

• 如果沒有確定鏈接目標，通常使用"#"表示暫時空鏈接。
• 除了可以創建文本鏈接，還可以給網頁中的元素，如圖像、表格、音頻、視頻都可以添加超鏈接。

注釋標簽

• 注釋標簽：用于在HTML文檔中添加一些便于閱讀和理解，但又不需要顯示在頁面中的文字說明，此時就需要使用注釋標簽。它是HTML中的一種特殊標簽，它不會在瀏覽器中顯示，但是會在源代碼中查看到。
• 語法格式：

• 提示：注釋通常是給咱們開發者看的，程序是不會執行這個代碼的。

好了，各位小伙伴，今天我就給大家分享到這兒了，希望我給大家總結的內容，能幫到正在瀏覽我這篇內容的前端開發者，也希望你們有所收獲。如果喜歡的，可以點擊關注，會繼續給大家分享更多的內容。

義HTML標記允許您向標記添加含義，以便搜索引擎、屏幕閱讀器和web瀏覽器能夠理解它。默認情況下，當用戶代理讀取您的內容時，它不理解上下文和含義。語義HTML標記允許您向用戶提供結構化內容，這對于頁面搜索引擎優化和可訪問性尤其重要。想要對語義HTML標記了解更多，建議參加web前端培訓，可以在短時間內獲得快速提升。

盡管語義標記存在于早期的HTML版本中，但HTML5規范在塊級和內聯級的語法中都添加了一些新的語義元素。

最常用的語義標記

最常用的語義元素是HTML5出現之前就已經存在的，這也許并不奇怪。實際上，沒有三個語義標記，您甚至無法創建HTML文檔：

<html>這封信包含了整頁，

<head>包含呈現頁面所需的所有信息，

<body>包含頁面內容的。

這三個語義元素構成了每個HTML文檔的主干。在web前端培訓，你可以學習使用語義元素來創建HTML文檔。除此之外，以下是最流行的語義元素，所有這些元素都由早期的HTML規范定義：

<ul>、<ol>和<li>用于定義有序和無序列表，

<p>對于段落，

<table>對于表，

<form>對于表單，

<img>對于圖像，

<h1>，<h2>，<h3>，<h4>，<h5>，<h6>，用于不同級別的標題。

上面的一些元素也有補充標記，它們也是語義標記。例如，<table>具有<thead>、<tbody>和<tfoot>，可用于標記表格的頁眉、正文和頁腳。想要學習更多關于html語言標記的知識，不妨報個web前端培訓班，有專業講師指導教學，可以讓你更全面掌握這部分的技能。

HTML 5中的塊級語義元素

塊級語義標記有兩種主要類型：分段元素、語義流元素

1.分段元素在HTML文檔中創建一個不同的分段。它們的內容在文檔大綱中被視為單獨的塊，因此它們可以有自己的標題和頁腳標記。其中有四項：

<article>對于博客帖子和文章等自包含塊，

<aside>用于側邊欄，

<nav>對于導航塊，

主題內容塊的<section>。

2.語義流元素具有語義，但不會在文檔中創建不同的塊，因此它們不能有自己的標題和頁腳元素。它們有很多，以下是使用最廣泛的：

<main>用于文檔的主內容塊（一頁只能使用一次），

<header>用于頁面或分段元素的頁眉部分，

<footer>用于頁面或分區元素的頁腳部分，

<audio>用于音頻嵌入，

<video>用于視頻嵌入，

<figure>用于塊級圖像塊。

想要了解這兩種元素是如何使用的，可以參加web前端培訓學習一下，理論課程+項目課程，雙管齊下，提高學習效率，在最短的時間內學到最多最有效的知識。

HTML5中的內聯級語義標記

可以在塊級元素中使用內聯標記，例如段落或列表中的強調文本字符串。除了塊級語義元素外，HTML5還引入了兩個語義內聯標記，盡管之前的規范也包括語義內聯標記，例如超鏈接的<a>或縮寫的<abbr>。

HTML5的語義內聯元素的創建目標是替換以前經常使用的非語義內聯標記，分別是粗體文本的<b>標記和斜體文本的<i>。但是，根據經驗，HTML應該只用于定義含義和結構。所有的樣式都應該用CSS來完成。

HTML語義的最終目標是創建用戶代理（如web瀏覽器、屏幕閱讀器和搜索引擎機器人）可以輕松瀏覽和理解的文檔大綱。為此，您需要明智地使用語義和非語義標記。對HTML感興趣的同學，建議報名參加web前端培訓，這里有清晰的學習路線，課程緊跟市場和企業需求，讓你學有所成，快速找到滿意的工作。

了解更多