HTML 5.1

• トップ
• HTMLリファレンス
• HTML概要
• HTML5.1

• HTML 5.1 の概要
• HTML5 と HTML 5.1 の差分

HTML 5.1 の概要

HTML 5.1 は、HTML5 の改訂版です。HTML5 は HTML と 5 をスペース無しで記述しますが、HTML 5.1 はスペース有りで記述することが多い様です。

• https://www.w3.org/TR/html51/

2016年11月1日に初版が勧告され、2017年10月3日に 2nd Edition が勧告されています。

• https://www.w3.org/TR/2017/REC-html51-20171003/
• https://www.w3.org/TR/2016/REC-html51-20161101/

HTML5 と HTML 5.1 の差分

HTML5 と HTML 5.1 の差分は下記の文書に整理されています。

• https://www.w3.org/TR/html51/changes.html#changes-since-50

主に、下記の変更が行われています。

<picture> 要素が追加されました。

<picture>
  <source media="(min-width: 45em)" srcset="large.jpg">
  <source media="(min-width: 32em)" srcset="med.jpg">
  <img src="small.jpg" alt="The wolf runs through the snow.">
</picture>

<img> と <source> に srcset と sizes 属性が追加されました。

<img src="normal.gif" srcset="small.jpg 460w, large.jpg 800w" sizes="(min-width:460px) 200px, 100vw">

<details> と <summary> 要素が追加されました。

<details>
  <summary>検索オプション</summary>
  <div><label><input type="checkbox" name="ch1">日本語サイトのみ</label></div>
  <div><label><input type="checkbox" name="ch2">セーフサーチ無効</label></div>
</details>

<menu> と <menuitem> 要素が追加されました。

<div contextmenu="menu1">MENU</div>
<menu type="context" id="menu1">
  <menuitem onclick="location.href='http://www.yahoo.co.jp/'">Yahoo!</menuitem>
  <menuitem onclick="location.href='http://www.google.co.jp/'">Google</menuitem>
</menu>

<a> や <link> 要素の rev 属性が復活しました。

<link href="chapter2.html" rel="next" rev="prev">

<script> と <style> 要素に nonce 属性が追加されました。

<script nonce="jHBg6G8JGxx8WE==">...</script>

<object> で usemap 属性が廃止されました。

× <object usemap="map1">...</object>

<label> で form 属性が廃止されました。

× <label form="form1">...</label>

<input type="range"> で multiple 属性が廃止されました。

× <input type="range" multiple>

<area> で hreflang と type 属性が廃止されました。

× <area hreflang="ja" type="text/html">

入れ子になった <section> の親要素と子要素双方が <h1> を持つことができなくなりました。

<section>
  <h1>...</h1>
  <section>
    <h1>...</h1>   ← ここに h1 を用いることが禁止されました
  </section>
</section>

セクションが階層化されていれば、<headr> や <footer> を入れ子で使用することが可能となりました。

<header>
  <section>
    <header>...</header>
  <section>
<header>

<option>が 0個以上の空白文字のみからなる文字列を扱えるようになりました。

<option></option>

<input type="submit"> の value 属性が自動翻訳等によって翻訳可能属性となりました。

<input type="submit" value="This text can be translated">

<figcaption> を <figure> 中に記述する場合、一番先頭や最後でなくてもよくなりました。

<figure>
  <img src="..." alt="...">
  <figcaption>...</figcaption>
  <p>...</p>
</figure>

<time> で datetime 属性を指定しない場合は、日時を示すテキストのみを記述することになりました。

× <time><b>2017-11-11 23:27</b></time>
○ <time>2017-11-11 23:27</time>

ひとつの画像に対して同じ href 属性値を持つ <area> が複数ある場合、片方の alt 属性には空文字を指定できていましたが、HTML 5.1 では 1文字以上の文字を指定することが必須となりました。

  <area shape="rect" coords="10,20,30,40" href="green.htm" alt="green">
  <area shape="rect" coords="50,60,70,80" href="green.htm" alt="green">

<img> で width="0" を指定することが可能となりました。

<img src="./cgi/counter.cgi" alt="0" width="0">

<meta> の refresh で ; と url= を省略できるようになりました。

<meta http-equiv="refresh" content="5; url=login.htm">
<meta http-equiv="refresh" content="5 login.htm">