您了解 HTML 和 Web 時，您可能會發現反復遇到一個通常未定義的特定單詞。那個詞是語義的。

你可能會讀到諸如“我們去尋找語義元素”或“我們盡量做到語義化”之類的陳述，但永遠無法清楚地了解語義這個詞的含義。在本文中，我們將探索語義標記的世界，提出術語的有效定義，并將該概念應用于我們編寫 HTML 標記的方式。

什么是語義標記？

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

從語義上使用一個詞就是以一種與該詞的含義正確對齊的方式使用它。當我們誤用一個詞時，我們并不是在語義上使用它。

許多 HTML 標簽具有語義含義。也就是說，元素本身傳達了一些關于包含在開始標簽和結束標簽之間的內容類型的信息。

例如，當瀏覽器遇到一個h1標題時，它會將該標記解釋為表示該元素的內容h1構成了包含該元素的部分的最重要的標題。標簽的語義含義h1是它用于標識特定網頁或部分的最重要的標題。

啟用語義標記的兩種做法

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

0. 語義標記要求根據其預期目的使用 HTML 元素。
1. 語義標記需要內容和表示的分離。

正確使用 HTML 元素

在編寫語義標記時，我們使用 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：

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

文本含義

在網絡的早期，通常會看到這樣的標記：

<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 標記如何為文本內容添加語義含義的一個示例。其他示例包括：

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

我們的字體和 Web 排版教程提供了大量關于正確使用這些標簽來為文本內容分配語義含義的詳細信息。

媒體類型

HTML5 還包括三個標簽，用于標識標簽之間提供的媒體類型。這些標簽有雙重用途。首先，它們向瀏覽器發出信號，需要對特定技術資源（例如視頻播放引擎）進行排隊。其次，他們為內容賦予語義意義。

• audio：用于向文檔添加一個或多個音頻內容源，并允許瀏覽器根據訪問者的設備和瀏覽器選擇最佳選項。
• video：類似于audio元素，但用于將視頻內容添加到標記文檔。
• picture：圖片元素用于允許網絡瀏覽器根據媒體查詢的結果從可用選項中選擇最佳圖像。

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

相關標簽

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

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

結束的想法

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

那么你已經了解清楚語義標記了嗎？

學習一門編程語言之前，了解它的特性，帶著對特性的好奇和疑問去學習是最快最好的學習方法。就像你知道某個地方有很多寶藏，帶著藏寶圖去尋找寶藏，你一定會大有收獲的。

編程語言就是人與計算機進行溝通的語言，在現實生活中，見什么人說什么話我們都很清楚，那在與計算機溝通的世界中，做什么事用什么編程語言溝通也是同樣的道理，前提就是我們要了解這些編程語言，在你需要選擇的時候做出正確的判斷，這也正是我寫此篇文章的意義。

什么是 HTML？

HTML的英文全稱是 Hyper Text Marked Language，中文意思為超文本標記語言。

什么是超文本標記語言？我們先對超文本標記這五個字進行一一的拆分，然后去更好的理解它的意思。在理解超文本時，我們先來理解一下文本在我們的日常生活中代指的是什么東西?

文本包含了比如說你新建的一個Word文檔，一個txt文件，甚至一個Html文件。這三個文件有相同的地方， 也有不同的地方。

相同的地方在于不論是Word文檔，還是txt文件或者是Html文件，我們都能編寫文本的內容。Word文檔的不同在于我們可以在Word文檔中設置一些超鏈接，放一些圖片等操作。

txt文件就有一定的局限性，比如你放一張圖片或者設置超鏈接等這些行為都是不行。在Html文件中，可以存放文本、圖片、音頻、視頻等，甚至在網頁中見到的一些很炫酷的小游戲，都可以在Html文件中去編寫。

那接下來解釋下超文本。我們在Html文件中編寫代碼，其實編寫的是超文本。所謂超文本，大家應該能聯想到超，即超出文本，超文本比文本更高一級，它包含了我們常見的音頻、視頻以及超鏈接等。

這些被我們稱為超文本，在Html文件里面既能存放這些內容，也能存放文本內容，甚至是文章里的一級標題、二級標題、列表、選項等，都可以通過HTML代碼去編寫，這些內容我們就稱為超文本。

那么這些內容到底用哪些來去展現或展示呢？標記。

什么是標記呢？

用百度官網來分析一下“標記”，在網頁頁面上存放很多的內容，有超鏈接、圖片、輸入框等。我們先看看右上角的新聞字樣，這是一個超鏈接，我們看下源碼，打開后的樣子是這樣的：

我們把藍色的新聞部分，也就是我用紅框標記的部分復制一下，其他代碼刪除：

“新聞”被左邊和右邊的“a”包裹起來了，這就構成了超鏈接，這就像我們常見的書名號。如果我們單是輸出紅樓夢字樣，就是一個文本，但如果用《》書名號包裹起來，《紅樓夢》，大家都能知道這是一本書。

把包裹在“新聞”兩邊的a標簽對應包裹在紅樓夢兩邊的書名號來看很類似。用書名號這個標記把紅樓夢給包裹起來，就叫做書名，同理，用帶尖括號的a這個標記把新聞這個文本內容給包裹起來，在網頁中稱為超鏈接，這對帶尖括號的a就叫做標記。

標記是用HTML自己的語法規則把文本內容給包裹起來，這就叫做標記。這種標記的書寫也非常簡單，包裹在文本左邊的叫開始標記，包裹在文本右邊的叫結束標記。我們看到的網頁中顯示的一級標題、二級標題、超鏈接、圖片、音頻等內容其實學習它們所對應的標記就可以了。

HTML的歷史發展過程

接著我們來看下HTML從最原始到現在至今整個HTML語言的歷史發展過程。

• HTML 1.0：在1993年6月作為互聯網工程工作小組(IETF)工作草案發布,由此超文本標記語言第一版誕生。
• HTML 2.0：1995年1 1月作為RFC 1866發布，于2000年6月發布之后被宣布已經過時。
• HTML 3.2：1997年1月14日，HTML3.2版本誕生，成為W3C的推薦標準。
• HTML 4.0：1997年12月18日，HTML4.0版本誕生，由此成為了W3C的推薦標準。
• HTML 4.01（微小改進）：1999年12月24日，HTML4.01版本誕生，成為W3C的推薦標準。
• HTML 5：2014年10月28日，HTML5版本誕生，H5成為W3C推薦的標準。

HTML5的誕生，標記著互聯網時代的發展。比如在HTML5里面誕生的音頻、視頻、圖像、動畫等都做了新的標準，它對于瀏覽器的兼容也是得到了一定的處理，由此可見，HTML的整個歷史發展目前為止我們所使用的版本主要是99年誕生的HTML 4.01以及2014年誕生的HTML5。

HTML的應用

時代在進步，科技在發展，這個超文本標記語言從HTML1.0版本發展到如今的HTML5版本，已經有了極大的改善。

在以前的HTML版本中，常用的是對文本的編輯、超鏈接、圖片等，其用途很廣泛，許多公司用來創建和發布消息，比如布告、技術手冊、各種信函等，都能用它來描述。

HTML是一門嚴謹的編程語言，有組織性、模塊化、規范化的。不過對于開發者而言，不同瀏覽器HTML的兼容性是考慮的問題。隨著HTML5的誕生，我們迎來了一個新的網絡世紀，各種動畫、音頻、視頻、圖像等炫酷的東西都可以做。還有各種小程序、小游戲以及App的開發應用數不勝數，其兼容性也得到了很大的改善，這意味著對前端的需求以及重視程度都有了極大的改變。

HTML是前端很重要的一環，我們學好它才能在前端大軍中齊頭并進，在各種應用小程序的使用中游刃有余，未來的美好生活就掌握在你的手中。

【END】

于所有Web開發人員來說，無論你選擇的是哪種框架或后端語言，都需要大量使用HTML（超文本標記語言）。

HTML標題標記

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>無標題文檔</title>
    </head>
    
    <body>
        <h1>1級標題</h1>
  <h2>2級標題</h2>
  <h3>3級標題</h3>
  <h4>4級標題</h4>
  <h5>5級標題</h5>
  <h6>6級標題</h6>
    </body>
</html>12345678910111213141516復制代碼類型：[html]

圖示

h的級別越小文字大小越小。

當然了，這些文字標題都是左對齊的。

其實在標題標記中還有重要的屬性！詳情見文章------

我們可以給<h1>，<h2>......等標記加屬性值讓其變得更加多樣化！

代碼

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>無標題文檔</title>
    </head>
    
    <body>
        <h1 align="center">1級標題</h1>
        <h2 align="left">2級標題</h2>
        <h3 align="right">3級標題</h3>
        <h4 align="justify">4級標題</h4>
        <h5 align="right">5級標題</h5>
        <h6 align="center">6級標題</h6>
    </body>
</html>12345678910111213141516復制代碼類型：[html]

圖示

align標記在----文章已經有些許敘述，我們再來講講吧。

<h1 align="center"></h1> <!--居中-->
<h2 align="left"</h2> <!--左對齊-->
<h3 align="right"></h3> <!--右對齊-->
<h4 align="justify"></h4><!--段落兩端對齊-->1234復制代碼類型：[html]

所以圖示才是如此顯示的。

開課吧廣場-人才學習交流平臺