譯者 | 李睿

審校 | 孫淑娟

HTML5是超文本標(biāo)記語言(HTML)的第五版，網(wǎng)絡(luò)瀏覽器使用它來可視化代碼。它在網(wǎng)站功能、網(wǎng)頁內(nèi)容開發(fā)等方面有一些改進(jìn)。 ?

HTML的發(fā)展 ?

在萬維網(wǎng)的早期，主要的網(wǎng)絡(luò)瀏覽器創(chuàng)造者（例如微軟Internet Explorer和Mosaic Netscape）開發(fā)了特定于瀏覽器的元素，以增強(qiáng)其瀏覽器的網(wǎng)頁外觀。到上世紀(jì)90年代末，他們?yōu)?/span>Internet Explorer和Netscape創(chuàng)建了不同版本的網(wǎng)站。 ?

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

很快出現(xiàn)了HTML 4.0(1998)和HTML 4.01(1999)，它們強(qiáng)調(diào)表示和結(jié)構(gòu)的分離，同時增強(qiáng)了可訪問性。這些升級在新創(chuàng)建的級聯(lián)樣式表(CSS)標(biāo)準(zhǔn)下轉(zhuǎn)移了表示元素。 ?

HTML5的出現(xiàn) ?

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

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

HTML5標(biāo)準(zhǔn)的規(guī)范由兩個組織共同維護(hù)，這偶爾會導(dǎo)致輕微的不一致。大多數(shù)瀏覽器開發(fā)人員依賴WHATWG版本作為實現(xiàn)參考。 ?

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

HTML5的獨(dú)特之處 ?

在這次升級之前，HTML主要關(guān)注用于標(biāo)記網(wǎng)頁可視化內(nèi)容的元素。HTML5通過提供許多完成任務(wù)的新方法走在了前面。在以前的HTML版本中，這些任務(wù)需要特定的編程或?qū)Ｓ胁寮?/span>Silverlight或Flash。 ?

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

HTML5的元素 ?

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

（1）<article>?

這個新的元素用于將特定內(nèi)容標(biāo)記為文章的一部分。這些內(nèi)容將獨(dú)立于網(wǎng)站上的其他內(nèi)容處理，即使其中可能有重疊。 ?

（2）<aside> ?

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

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

（3）<audio>?

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

（4）<bdi> ?

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

（5）<canvas>?

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

（6）<data>?

該元素用于向內(nèi)容中添加機(jī)器可讀的信息。機(jī)器可讀的值由數(shù)據(jù)處理器提供，而人類可讀的值也提供給web瀏覽器來呈現(xiàn)。 ?

（7）<datalist> ?

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

（8）和 <summary>?

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

為此創(chuàng)建了一個用戶可以打開或關(guān)閉的交互式小部件。這個小部件在默認(rèn)情況下是關(guān)閉的，打開后展開以顯示其中的內(nèi)容。?

＜summary＞標(biāo)記定義了＜details＞小部件的可見標(biāo)題，可以與之交互以查看或隱藏內(nèi)容。?

（9）<dialog>?

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

（10） <embed> ?

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

（11）<figure> 和<figcaption>?

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

（12）<footer>?

該元素為節(jié)或頁定義頁腳。它通常包含作者、聯(lián)系方式、版權(quán)、“返回頂部”鏈接、網(wǎng)站地圖、相關(guān)閱讀等信息。單個文檔可以包含幾個＜footer＞元素。聯(lián)系人詳細(xì)信息通常插入該元素的<address>標(biāo)記中。?

（13）<header> ?

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

（14）＜keygen＞?

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

（15）<main>?

該元素概述了頁面的主要內(nèi)容，這些內(nèi)容對于特定文檔來說應(yīng)該是唯一的。在文檔中重復(fù)的內(nèi)容，如導(dǎo)航鏈接、邊欄、網(wǎng)站徽標(biāo)、搜索表單和版權(quán)數(shù)據(jù)，不應(yīng)包含在該元素中。一個文檔不能有多個<main>元素，并且該元素不能是<aside>、<article>、<header>、<footer>或<nav>元素的后代。?

（16）<mark>?

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

（17）<meter> ?

該元素也稱為度量，用于在預(yù)定義的范圍和分?jǐn)?shù)值內(nèi)定義標(biāo)量度量。例如，<meter>可以確定硬盤使用情況或查詢結(jié)果相關(guān)性。?

（18）<nav>?

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

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

（19）<output>?

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

（20）<progress>?

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

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

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

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

（22）<section> ?

該元素定義了網(wǎng)頁的特定部分，包括頁眉和頁腳。它用于將頁面劃分為節(jié)和子節(jié)，特別是當(dāng)需要多個頁眉、頁腳或其他節(jié)標(biāo)記時。它對相關(guān)內(nèi)容的通用塊進(jìn)行分組。?

（23）<svg>?

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

（24）<時間>?

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

（25）<video>?

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

（26）<wbr>

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

HTML5的好處 ?

以上看到了HTML5中引入的元素如何簡化多媒體內(nèi)容的集成并增強(qiáng)語義價值。現(xiàn)在將進(jìn)一步了解HTML5的好處。?

（1）充實語義?

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

以前版本的HTML也有語義標(biāo)記，如標(biāo)題標(biāo)記、鏈接rel和文檔元數(shù)據(jù)。然而，導(dǎo)航菜單、頁面標(biāo)題和主要內(nèi)容部分等常見結(jié)構(gòu)元素在語義上沒有區(qū)別。相反，他們都使用了＜div＞標(biāo)記。?

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

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

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

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

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

（3）XML的兼容性?

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

（4）設(shè)計和內(nèi)容分離 ?

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

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

（5）可訪問性和設(shè)計響應(yīng)性 ?

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

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

（6）應(yīng)用程序編程接口 ?

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

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

這有助于標(biāo)準(zhǔn)化特定機(jī)制，簡化原本復(fù)雜的編碼任務(wù)，并允許開發(fā)者添加跨平臺瀏覽器無縫運(yùn)行的功能。 ?

（7）持久本地存儲 ?

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

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

結(jié)語 ?

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

原文標(biāo)題：??What Is HTML5? Meaning, Elements, and Benefits??，作者：Hossein Ashtari