HTML入門 | HTML5の開始 | HTML5の変更点

Tags:

HTML5で追加された要素とタイプ

  • セマンティック要素: <header>, <nav>, <main>, <section>, <aside>, <article>, <footer>, <figure>
  • マルチメディア要素: <video>, <audio>
  • グラフィック要素: <canvas>, <svg>
  • input要素のタイプ: number, date, time, calendar, range

HTML5で追加されたJavaScript API

  • Geolocation
  • Drag and Drop
  • Web Storage
  • Application Cache
  • Web Worker
  • Server Sent Events

HTML5で削除された既存要素

削除された既存要素 説明
<acronym> <abbr>タグに置き換え
<applet> <object>タグに置き換え
<basefont> CSSで適用
<big> CSSで適用
<center> CSSで適用
<dir> <ul>タグに置き換え
<font> CSSで適用
<frame> 削除
<frameset> 削除
<noframes> 削除
<strike> CSSで適用
<tt> CSSで適用

 

HTML5で変更された内容について詳しく知りたい場合は、W3C公式サイトで確認できる。

W3C Recommendation, 14 December 2017

WebブラウザのHTML5対応

現在の主要なWebブラウザの最新バージョンは、すべてHTML5をサポートしている。
ただし、HTML5の新しい要素は古いバージョンのWebブラウザでは正しく表示されない場合がある。
そのため、古いWebブラウザが知らない新しいHTML要素をどのように扱うかを伝える必要がある。

次の例は、Webブラウザが認識しない新しいHTML要素をどのように扱うかを伝える方法である。

<script>document.createElement("mytag")</script>
<style>
  mytag { background-color: #fff2cc; font-size: 20px; font-weight: 600} 
</style>
<mytag>ここだけで使用できるタグです。</mytag>

コード実行

上記の方法を使えば、すべての新しい要素をWebブラウザに表示できる。

Internet Explorer 8より前のバージョンでは、上記のようにHTML要素を新しく定義することは許可されていない。
そのため、上記の方法ではなくHTML5Shivを使用する必要がある。

HTML5Shiv

HTML5Shivは、Internet Explorer 8以前でもHTML5の新しい要素を自由に使用できるように開発されたライブラリである。Sjoerd Visscherによって開発された。

詳しい説明とダウンロードはGitHubで確認できる。
https://github.com/afarkas/html5shiv

適用方法は、下記のようにライブラリファイルをコメントコードとともに<head>タグ内へ挿入すればよい。 すると、Internet Explorer 8以前のブラウザ(IE6〜9)だけがこのJavaScriptファイルを読み込んで適用できる。

<head>
<!--[if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>

参考