譯者 | 李睿

審校 | 孫淑娟

HTML5是超文本標記語言(HTML)的第五版，網絡瀏覽器使用它來可視化代碼。它在網站功能、網頁內容開發等方面有一些改進。 ?

HTML的發展 ?

在萬維網的早期，主要的網絡瀏覽器創造者（例如微軟Internet Explorer和Mosaic Netscape）開發了特定于瀏覽器的元素，以增強其瀏覽器的網頁外觀。到上世紀90年代末，他們為Internet Explorer和Netscape創建了不同版本的網站。 ?

1996年，新成立的萬維網聯盟(W3C)建議創建HTML3.2。這個標準涵蓋了當時常用的HTML元素。它還包括對HTML的表示擴展，例如在Internet Explorer和Netscape“瀏覽器大戰”期間創建的中心元素和字體。 ?

很快出現了HTML 4.0(1998)和HTML 4.01(1999)，它們強調表示和結構的分離，同時增強了可訪問性。這些升級在新創建的級聯樣式表(CSS)標準下轉移了表示元素。 ?

HTML5的出現 ?

在2000年之后不久，Mozilla、Opera和蘋果公司聯合起來建立了網絡超文本應用技術工作組(WHATWG)。這個實體的目標與W3C不同，其目的是增強HTML開發，使該語言能夠滿足來自實際創作實踐和瀏覽器行為的新需求。WHATWG的最初文檔Web Applications 1.0和Web Forms1.0被結合起來建立了HTML5。 ?

如今，WHATWG維持著一個正在使用的HTML標準，不使用數字進行分類。WHATWG的工作也為W3C建立自己的HTML5工作組提供了基礎。HTML5在2014年10月正式獲得“推薦”的地位。 ?

HTML5標準的規范由兩個組織共同維護，這偶爾會導致輕微的不一致。大多數瀏覽器開發人員依賴WHATWG版本作為實現參考。 ?

HTML 4.01 Strict是HTML5的基礎，該版本沒有基于表示的元素和其他不推薦的屬性。這導致大多數HTML5使用多年前使用的瀏覽器兼容元素創建。它還引入了許多新元素和全局屬性，并使HTML 4.01中許多不推薦使用的屬性和元素過時。HTML5的一個關鍵特性是包含了一個標準協議，用于處理瀏覽器遺留和格式錯誤的標記。?

HTML5的獨特之處 ?

在這次升級之前，HTML主要關注用于標記網頁可視化內容的元素。HTML5通過提供許多完成任務的新方法走在了前面。在以前的HTML版本中，這些任務需要特定的編程或專有插件，例如Silverlight或Flash。 ?

HTML5的特性包括標記和腳本元素，以及用于在頁面上添加視頻和音頻、本地數據存儲、離線操作和位置數據使用等功能的應用程序編程接口(API)。HTML5解決了標準的Web開發功能，開發團隊不需要為每個應用從頭開始創建功能，而是可以依賴于內置的瀏覽器功能。 ?

HTML5的元素 ?

HTML5引入了許多大多數主流瀏覽器都支持的新元素。下面列出的是HTML5的關鍵元素。 ?

（1）<article>?

這個新的元素用于將特定內容標記為文章的一部分。這些內容將獨立于網站上的其他內容處理，即使其中可能有重疊。 ?

（2）<aside> ?

該元素除了定義包含在其中的內容之外，還定義了其他內容。它經常用于文檔邊欄。雖然該元素在瀏覽器中不以特定形式呈現，但可以使用CSS來設置其樣式。?

該元素旨在識別與頁面主要內容相關的內容，但不是其主要意圖的一部分。例如，可以用它來概括作者信息和“查看更多”鏈接。 ?

（3）<audio>?

該元素允許用戶嵌入頁面的聲音內容，例如音樂或音頻流。<audio>標記與一個或多個<source>標記一起使用，以劃分音頻源。瀏覽器將運行第一個受支持的源。支持的音頻格式包括MP3、OGG和WAV。如果瀏覽器不支持該元素，它將顯示<audio>和</audio>標記之間的文本。?

（4）<bdi> ?

該元素的名稱表示雙向隔離。它的功能是隔離一個文本段，該文本段的格式可能與元素外部的文本不同。<bdi>有助于嵌入用戶生成的內容，其中包含具有未知方向格式的文本。?

（5）<canvas>?

該元素使用JavaScript繪制圖形(方框、路徑、漸變、文本)并向頁面添加圖像。在默認情況下不包括邊框和文本，標記是透明的，僅作為繪制圖形的容器。可以使用不同于元素的腳本生成這些圖形。如果元素在瀏覽器中不受支持或JavaScript被禁用，它將在＜canvas＞標記中顯示任何文本。?

（6）<data>?

該元素用于向內容中添加機器可讀的信息。機器可讀的值由數據處理器提供，而人類可讀的值也提供給web瀏覽器來呈現。 ?

（7）<datalist> ?

該元素為元素提供了一個“自動完成”功能，它指定了一個預設選項的下拉列表，當數據輸入時，瀏覽器將在輸入數據時向用戶顯示這些選項。<datalist>元素的id屬性必須等于<input>元素的list屬性才能綁定它們。?

（8）和 <summary>?

該元素中包含的內容最初是隱藏的，只有在用戶希望看到它時才顯示出來。它可以包含任何內容。 ?

為此創建了一個用戶可以打開或關閉的交互式小部件。這個小部件在默認情況下是關閉的，打開后展開以顯示其中的內容。?

＜summary＞標記定義了＜details＞小部件的可見標題，可以與之交互以查看或隱藏內容。?

（9）<dialog>?

這個元素定義了一個對話框或子窗口，使得在網頁上很容易生成彈出對話框和模態窗口。 ?

（10） <embed> ?

該元素用于嵌入第三方應用程序，這些應用程序通常采用視頻或音頻等多媒體內容的形式。它充當用戶嵌入插件(如Flash動畫)的容器。在HTML5中實現這個元素只需要開始標記。應該注意到，許多現代瀏覽器不再支持Java插件和applet、ActiveX控件或Shockwave Flash，從而限制了該元素的可用性。?

（11）<figure> 和<figcaption>?

該元素用于指定自包含的內容，如圖表、插圖、代碼列表和照片。其內容與主流有關；然而，它的位置不依賴于主流，如果元素被移除，頁面流通常不會受到影響。＜figcaption＞元素允許用戶為＜figure＞添加標題。?

（12）<footer>?

該元素為節或頁定義頁腳。它通常包含作者、聯系方式、版權、“返回頂部”鏈接、網站地圖、相關閱讀等信息。單個文檔可以包含幾個＜footer＞元素。聯系人詳細信息通常插入該元素的<address>標記中。?

（13）<header> ?

該元素通常包含與頁面標題和標題相關的信息。通常情況下，它概述了介紹信息或導航鏈接的容器。它也有助于可視化一個或多個標題元素（從＜h1＞到＜h6＞）、徽標、圖標和作者。該元素甚至可以用于包裝搜索表單或節的目錄。雖然單個文檔可以包含許多<header>元素，但<header>標記不能放在<address>、<footer>或其他<header>屬性中。?

（14）＜keygen＞?

該元素在表單中用于指定密鑰對生成器字段。其目的是為用戶提供一種安全的身份驗證方法。提交表單后，將生成公鑰和私鑰。后者存儲在本地，而前者傳輸到服務器，用于創建客戶端證書，以便將來對用戶進行身份驗證。該元素也有助于創建和驗證數字簽名。?

（15）<main>?

該元素概述了頁面的主要內容，這些內容對于特定文檔來說應該是唯一的。在文檔中重復的內容，如導航鏈接、邊欄、網站徽標、搜索表單和版權數據，不應包含在該元素中。一個文檔不能有多個<main>元素，并且該元素不能是<aside>、<article>、<header>、<footer>或<nav>元素的后代。?

（16）<mark>?

該元素定義必須在段落中突出顯示或標記的文本。?

（17）<meter> ?

該元素也稱為度量，用于在預定義的范圍和分數值內定義標量度量。例如，<meter>可以確定硬盤使用情況或查詢結果相關性。?

（18）<nav>?

該元素概述了網站中通常用于導航鏈接的部分，這些鏈接可以指向當前頁面上的其他位置或其他頁面。常見的＜nav＞元素包括表、菜單和索引。?

不能將文檔中的每個鏈接都包含在<nav>元素中；與其相反，它只適用于較大的導航鏈接塊。具有類似功能的屏幕閱讀器和瀏覽器可以用來知道何時可以跳過初始內容呈現。 ?

（19）<output>?

該元素表示計算的輸出，例如由JavaScript或其他腳本執行的計算。其屬性包括for（用于指定計算結果與計算期間使用的元素之間的關系）、form（用于指定輸出元素所屬的形式）和name（用于命名輸出元素）。?

（20）<progress>?

該元素顯示任務的進度，例如完成的工作量或下載的持續時間。它通常與JavaScript一起使用。 ?

（21）＜ruby＞、＜rt＞和＜rp＞?

該元素用于指定ruby注釋，即附加到主文本的小字體的額外文本。ruby文本的目的是指導用戶理解字符的含義或發音（通常用于日語內容）。?

＜ruby＞通常與＜rt＞和＜rp＞一起使用<ruby>包含需要解釋的字符，＜rt＞包含要給出的信息，可選的＜rp＞標記用于定義在瀏覽器不支持常規ruby注釋的情況下要顯示的內容。?

（22）<section> ?

該元素定義了網頁的特定部分，包括頁眉和頁腳。它用于將頁面劃分為節和子節，特別是當需要多個頁眉、頁腳或其他節標記時。它對相關內容的通用塊進行分組。?

（23）<svg>?

該元素為SVG圖形創建一個容器。它有許多繪制框、路徑、圓、圖形圖像和文本的方法。?

（24）<時間>?

該元素以人類可讀格式顯示日期和時間，還用于以機器可讀格式編碼日期和時間數據。它的應用包括生日提醒、安排日歷事件和提高搜索引擎結果的質量。?

（25）<video>?

該元素用于在網頁中嵌入視頻內容。它應該包含＜source＞標記來概述不同的視頻源，瀏覽器將播放第一個支持的源。支持的視頻格式包括MP4、OGG和WebM。如果瀏覽器不支持此元素，它將顯示<video>和</video>標記之間的文本。?

（26）<wbr>

該元素的名稱表示單詞斷開機會。它指定文本行中可以根據需要添加換行符的位置。如果使用的單詞太長，并且瀏覽器可能會在錯誤的位置斷開，該元素將很有用。?

HTML5的好處 ?

以上看到了HTML5中引入的元素如何簡化多媒體內容的集成并增強語義價值。現在將進一步了解HTML5的好處。?

（1）充實語義?

語義標記描述與特定含義相關聯的標記，而不是簡單地創建特定的視覺輸出。例如，＜h1＞標記清楚地劃分了網頁的主要標題。雖然可以通過使用相關的格式化標記而不是＜h1＞標記使標題文本加粗和變大來實現相同的輸出，但語義含義不會保留。?

以前版本的HTML也有語義標記，如標題標記、鏈接rel和文檔元數據。然而，導航菜單、頁面標題和主要內容部分等常見結構元素在語義上沒有區別。相反，他們都使用了＜div＞標記。?

HTML5通過一系列新的語義元素來解決這個問題，例如＜header＞、＜main＞、＜section＞、＜nav＞、＜aside＞、＜article＞和＜footer＞。此外，新的內聯語義元素（如＜address＞和＜time＞）幫助在線服務（如搜索引擎）快速定位頁面上的相關數據。現有的內聯標記（如粗體、斜體和下劃線）也得到了改進，現在與特定的語義相關聯。?

（2）無插件的富媒體體驗?

隨著互聯網速度越來越快，富媒體已經成為在線體驗的核心部分。雖然HTML最初作為超文本文檔（可能還有一些圖像）的標記語言，但HTML5通過＜視頻＞和＜音頻＞等元素固有地支持富媒體。?

除了功能強大和方便開發人員之外，這個特性還有另一個好處：無插件。Java和Flash等插件的一些缺點包括性能差、用戶選項少、安全漏洞和搜索引擎可見性不足。?

此外，HTML5為用戶提供了新的表單元素以及與CSS和JavaScript的出色集成，簡化了全面的富媒體Web應用程序的創建，而無需依賴插件。?

（3）XML的兼容性?

由于HTML5(也稱為XHTML5)的XML序列化，可以使用“更嚴格” 的XML語法編寫代碼。這對于喜歡格式良好的XHTML(包括引號括起來的屬性值、小寫元素名和所有元素的閉包)提供的整潔性的開發人員非常有用。在期望代碼與其他XML應用程序一起工作的情況下，HTML5文檔必須作為XML服務。?

（4）設計和內容分離 ?

除了鼓勵語義標記之外，HTML5不鼓勵那些僅用于幫助瀏覽器可視化內容的無意義標記(例如關于字體、文本顏色、文本對齊等的聲明)。該標準已經棄用了許多支持這種可視化的元素，并且少數受支持的特性顯示“不推薦實踐”警告。 ?

分離設計和內容簡化了網站的維護和重新設計，因為CSS處理樣式聲明。此外，在一個平臺上看起來不錯的設計決策（比如桌面設備）在另一個平臺（移動設備）上也不一定好看。HTML5通過提供語義場景并允許內容適應來解決這一問題。?

（5）可訪問性和設計響應性 ?

HTML早期的迭代不能與現代技術眾多的屏幕尺寸和縱橫比無縫兼容。這包括手機、平板電腦、電子閱讀器、輔助技術（例如文本到語音轉換器）、屏幕閱讀器抑制樣式，同時提高文本放大和對比度，盲文翻譯。這些技術被試圖將樣式和設計“硬編碼”到頁面內容中的標記所阻礙。 ?

然而，由于語義標簽和可訪問的豐富互聯網應用程序(ARIA)，使用HTML5創建可訪問和響應的網站要簡單得多。例如，屏幕閱讀器可以更容易地解釋HTML5內容，使視障人士更容易在線瀏覽。?

（6）應用程序編程接口 ?

早期的HTML規范只記錄了語言中允許的元素、值和屬性。這種方法適用于簡單的文本網站，但對創建需要編程和腳本的基于Web的應用程序沒有太大幫助。 ?

HTML5通過定義大量簡化與應用程序通信的新API實現了巨大飛躍。它引入了先前需要插件或定制代碼的功能API，包括Web存儲、拖放、地理定位和微數據。 ?

這有助于標準化特定機制，簡化原本復雜的編碼任務，并允許開發者添加跨平臺瀏覽器無縫運行的功能。 ?

（7）持久本地存儲 ?

作為Cookie和客戶端數據庫的混合體，HTML5支持本地瀏覽器存儲。該特性允許瀏覽器同時支持跨多個窗口存儲，增強安全性和性能，并確保即使在瀏覽器關閉后數據也能持久。 ?

持久的本地存儲支持離線操作，并防止Cookie刪除對瀏覽器操作造成不利影響，因為大多數現代瀏覽器都支持由HTML5支持的客戶端數據存儲。它還允許使用HTML5功能而不是第三方插件的應用程序順利運行。 ?

結語 ?

技術優先的企業已經在向HTML5過渡，很快，HTML5將成為跨垂直行業的首選標記語言。任何在線優先的企業都不能忽視這一標準，如果它希望保持相關性的話。使用HTML5，你可以充分利用其前沿的用戶粘性功能、用戶友好性和可訪問性！ ?

原文標題：??What Is HTML5? Meaning, Elements, and Benefits??，作者：Hossein Ashtari