21世紀，2016年6月，HTML 5.1從工作草案變為了候選標準。正如你瞭解的那樣，這是將提案變為標準的第二步，Web的如此發展也將影響我們的日常生活。作為候選標準，W3C認為HTML 5.1已經通過了review並且能夠滿足工作組的技術需求了。
幾天前，HTML 5.1被提案進入第三階段：推薦標準（PR）。這意味著這個規範只需要進行微量的修改就可以進入W3C標準的最後一階段了。
隨著HTML 5.1接近最後階段，工作組開始關注於未來。於是工作組正式開始研究HTML 5.2工作草案，因此，W3C在社群中釋出了HTML 5.2規範來讓W3C成員、公眾以及其他組織進行review。
HTML5憑藉語義性、相容性和不需要第三方依賴的API迅速席捲了整個網際網路。這是一場革命性的技術變革。HTML 5.1保留了先前版本全部優良的特性又引入了一些語義元素的重大改進。想想HTML 5.1都帶來了什麼，可想而知HTML 5.2會更為驚豔。
在本文中，我將做一個關於HTML發展的簡短的概述，包括HTML 5，HTML 5.1，和HTML 5.2中引入和廢除的特性。
以下是本文的重點：
- HTML 5引入的語義元素概述；
- 關於HTML 5和HTML 5.1中新特性和未定案特性的變化；
- HTML 5.2的介紹以及對於接下來可能發生的事的猜想；
HTML 5 新的語義元素
HTML 5.1最偉大的創新之一就是引入了新的語義元素。它們也許（很有可能）會成為你如今日常寫碼的一部分。就是因為有了標記性的結構和語義，才使我們的站點有了很大改善。
我將主要提到的元素有：
<main>定義主要內容;<nav>定義主體模組或者導航連結的集合;<article>包含獨立於頁面其他部分的內容；<header>包含介紹部分或者是導航連結的集合；<footer>定義了整個頁面或其中一部分的頁尾（並且通常包含原創作者，版權資訊，聯絡方式和站點地圖）；<aside>定義了所處內容的側邊欄，<section>定義了文件中特定的部分。
將兩個革命性的元素單獨拿出來說，它們幫助我們解決了Flash等技術難題：
<audio>用來在文件中嵌入音訊內容<video>用來在文件中嵌入視訊內容
在上面提到的所有元素中，最有爭議的無非是<main>元素。在W3C規範的描述中它是頁面中的主要內容，然而全球資訊網超文字應用技術工作組(WHATWG)卻定義<main>元素為其他元素主要內容的容器。由於這個區別，WHATWA沒有限制一個文件中<main>元素出現的次數。按WHATWA的定義，如果你在一個頁面中定義了多個<article>元素，你就可以給每個<article>標記<main>元素。
兩種規範在其他方面也有一些不同，例如<hgroup>的存在（W3C標準中刪除了此元素，但它仍舊存在於WHATWG中–譯者注）。這篇文章中不會詳細講解這部分內容，如果你感興趣可以閱讀Aurelio De Rosa的這篇文章，W3C vs. WHATWG HTML5 規範 – 文件中的不同，你可以從中瞭解到很多。
現在我們來看一下HTML 5和HTML 5.1中的不同。
HTML 5 和 HTML 5.1的不同之處
這部分將主要介紹HTML 5.1中一些尚未確定的元素、方法和屬性。我將就其概念和優點進行介紹，並且提供了一些其他資料，如果感興趣可以進行擴充套件閱讀。需要注意的是，這裡提到的大部分新元素都在HTML5中被提出卻因為某些原因沒有通過提案，所以對你來說也許並不陌生。例如 <details> 和<summary>就是從HTML 5轉移至HTML 5.1規範中的。
就像其他規範一樣，HTML 5.1也引入了一些被移除不久的特性。其中之一就是inert屬性，它在2014年被提出。正如Github上這個discussion中所提到的，這個屬性自從被歸入<dialog>元素後就被遺棄了。
開始使用新的元素吧~
HTML 5.1引入的新元素
第一個準備講的就是<picture>元素。它的用處就是把source元素和srcset屬性結合到一起，更方便的是當網頁展示在小螢幕（例如移動裝置）上時，它可以提供記憶體和尺寸較小的圖片。
<picture>元素的另一個功能就是當頁面載入在高解析度螢幕上的時候就提供高密度的圖片。由於這個元素的存在，你可以更好的給使用者展示圖片並且很好的避免過大的高密度圖片與網站不相稱。如果你想更多的瞭解，可以閱讀我的另外兩篇文章：使用Picture元素提升響應式圖片 和 響應式圖片第一步：使用srcset。當然也有一些人主張picture元素的不必要的 (大多數時候)。不管怎樣，這都取決於你的選擇。
接下來介紹<dialog>元素，當下有Chrome和Opera已經對其進行支援，微軟Edge則仍在考慮中。這個元素可以用來作為對話方塊，確認框或者窗體。可以通過把<form>元素的method屬性設定為dialog來把其合併到<dialog>元素中。這樣這個form表單提交的時候，這個對話方塊就會關閉同時把提交按鈕返回的值設定為returnValue。這裡有一個線上的demo，程式碼來自MDN, 由JSFiddle展示。
同時<details>和<summary>也是值得推薦的新增元素。<details>展示給使用者 在這個元件上可以獲取額外的資訊或者控制元件。<summary>元素作為總結，標題，或是圖例放在<details>的內容中，二者互相配合。目前有Chrome，Firefox（版本49+），Opera，Safari支援了<details>元素。我認為這兩個元素未來會在摺疊/展開元件上起很大作用。
HTML 5.1其他新增
除了這些元素，HTML 5.1還新增了如下新增：
<input>元素的type屬性新增了month和week兩個值。正如它們名字所表示的那樣，它們定義控制元件將元素的值設定為代表一個月或者一週的字串。- forceSpellcheck()方法加入到HTMLElement介面中，並且允許開發者通過在元素上呼叫此函式強制使用者執行拼寫和語法檢查，即使使用者沒有聚焦這個單詞。其中一個用途就是inputElement.forceSpellcheck()。不幸的是還沒有瀏覽器支援這個特性。
- allowfullscreen是iframe元素的一個布林型別屬性，它指定了當呼叫
requestFullScreen()方法時，iframe是否接受全屏。當該屬性未被指定時，預設元素不接受全屏模式。 - reportValidity()方法被呼叫時，強制使用者進行
<form>元素的約束校驗。比如當一個必填元素沒有被填寫或者一個欄位涉及到它的pattern屬性時。如果約束的校驗返回正確的結果時，這個函式會返回true，反之則返回false。目前有Chrome和Opera支援了這個方法。
未定案的特性
HTML 5.1規範中也描述了一些當前被認為“at risk”的特性。
我要提的第一個未定案的特性就是<menu>元素。它代表了選單指令的集合，它原本是被設計用來建立工具欄和彈出選單的。當下Chrome和Opeara只有在實驗性網路平臺（Experimental Web Platform features）開啟後才能支援，並且只支援context menu，不支援button menu。Firefox的近期版本也是同樣，目前的其他瀏覽器沒有可以支援的。
接下來要介紹的特性是<menuitem>元素，定義了使用者可以從彈出選單中呼叫的命令。在變種包含了context menu，同時menu可能關聯了一個menu button。當下Chrome和Opeara只有在實驗性網路平臺（Experimental Web Platform features）開啟後才能支援，並且只支援type=”command”。在Firefox中也只有當關閉tag後才能支援帶有contextmenu屬性的<menu>。IE和Edge都沒有支援該元素。
另一個未定案的特性則是<keygen>。這個元素會在控制元件的表單提交的時候生成一對金鑰，私有金鑰會儲存在本地的keystore中，公有金鑰則會被打包傳送到伺服器。 In addition to these elements, the following features are also considered at risk: 除了上面提到的這些元素，下面這些特性也同樣沒有確定：
<input>元素的type的datatime和datatime-local兩個值。前者用來定義一個特定地區的日期和時間，候著則是代表本地日期和時間，沒有時區偏移量資訊。- context屬性為
<div>指定了一個context menu，並且當使用者右鍵點選div時會顯示選單。所有的瀏覽器中，只有Firefox支援了這個屬性。 - inputmode屬性。它指定了當使用者在表格控制元件中輸入內容時，輸入機制會提供更多的幫助。
好了，現在你已經知道了HTML 5.1做了哪些改變，可以進一步瞭解工作組現在在研究的規範內容了。
HTML 5.2會帶來什麼
HTML 5.2規範的制定工作才剛剛開始，所以此時此刻還沒辦法猜測出很多東西。
最重要的特性之一就是<script type="module">和對於模組如何分解、獲取和評估，這也是制定HTML 5.2將要討論的一部分。這個特性加入了對於載入JavaScript模組的支援，以及分解、獲取、解析、評估模組所必須的依賴。關於這個話題想了解更多的話，可以閱讀WHATWG的為Web平臺新增JavaScript模組這篇文章。
另一個開發中的特性就是關於 <meta name="theme-color"> 的定義。它的值可以是包括HEX和RGB在內的任何你在CSS中使用的顏色。一旦頁面中如此使用了，只要瀏覽器和作業系統定製了使用者介面，這個新的meta標籤就會建議它們使用這個顏色。你可以看到Android端的Chrome瀏覽器已經像下圖這樣做出這樣的行為。
對於autocapitalize屬性的標準化也在討論中。當前Safari在IOS上對它的支援由於版本的不同有兩種不同的實現。老版本（IOS 5之前）是作為布林型屬性，而新版本則支援不同的值。已經有提案 釋出建議以一種獨特的方式讓所有瀏覽器支援這個屬性。
最後我想提一下這個關於大綱演算法概念的discussion。大綱演算法是一種基於節段元素的結構而不是標題的level來提供Web頁面大綱的機制。理論上，你可以在一個頁面中所有的標題都使用h1，只要把標題放置於正確的節段元素中，就可以建立出結構化文件。然而實際上還沒有任何代理實現它，因此在網站中依賴這個演算法還是有風險的。
除了開發新的特性之外，工作組同樣致力於使瀏覽器實現已存在的特性。其中之一就是<input>元素與一個<datalist>元素關聯時的行為。
如果你想了解關於工作組工作重點的其他細節，可以關注這個GitHub issue。
總結
我希望我把HTML近些年的重大改變完整的呈現給你了。以上內容也說明了開發者想要緊隨Web的發展是多麼的不容易。