path: root/files/ja/orphaned/web/guide/html/html5/index.html

---
title: HTML5
slug: orphaned/Web/Guide/HTML/HTML5
tags:
  - HTML
  - HTML5
  - References
  - Web Development
translation_of: Web/Guide/HTML/HTML5
original_slug: Web/Guide/HTML/HTML5
---
<p class="summary">HTML5 は <a href="/ja/docs/HTML" title="HTML">HTML</a> で定義されている最新の標準仕様の名称です。この用語は、 2 つの異なる概念を表しています。これは HTML 言語の新しいバージョンであり、新しい要素、属性、動作、<strong>および</strong>より多彩でパワフルなウェブサイトやアプリケーションを構築することができるより大きな一連の技術でもあります。このセットは HTML5 &amp; friends と呼ばれることがあり、よく HTML5 と短縮されます。</p>

<p>このリファレンスは、すべてのオープンウェブ開発者に便利になるように設計されており、機能に基づいていくつかのグループに分類された数多くの HTML5 の技術についてのリソースにリンクしています。</p>

<ul>
 <li><em>Semantics</em>: そのコンテンツが何であるかをよりはっきりと表現することを可能にします。</li>
 <li><em>Connectivity</em>: 新しい革新的な方法でサーバーと通信することができます。</li>
 <li><em>Offline and storage</em>: ウェブページがクライアント側にローカルにデータを格納し、より効率的にオフライン操作をできるようにします。</li>
 <li><em>Multimedia</em>: 動画と音声をオープンウェブの第一級市民にします。</li>
 <li><em>2D/3D graphics and effects</em>: はるかに広い多彩な範囲のプレゼンテーションオプションを可能にします。</li>
 <li><em>Performance and integration</em>: より速度の最適化を行い、コンピューターのハードウェアをより活用します。</li>
 <li><em>Device access</em>: より多彩な入力および出力機器の使用を可能にします。</li>
 <li><em>Styling</em>: もっと洗練されたテーマを書けるようにします。</li>
</ul>

<div class="cleared row topicpage-table">
<div class="section">
<h2 id="Semantics" style="margin: 0pt 0pt 0.25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: medium none;"><img alt="" src="/files/3827/HTML5_Semantics_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">Semantics</h2>

<dl>
 <dt><a href="/ja/docs/Sections_and_Outlines_of_an_HTML5_document">HTML5 のセクションとアウトライン</a></dt>
 <dd>HTML5 ではアウトラインとセクションに関する要素が追加されました。 {{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("nav")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("aside")}}, {{HTMLElement("hgroup")}}</dd>
 <dt><a href="/ja/docs/Using_HTML5_audio_and_video">HTML5 の audio 要素と video 要素の利用</a></dt>
 <dd>{{HTMLElement("audio")}} 要素と {{HTMLElement("video")}} 要素はマルチメディアコンテンツの埋め込みや操作を可能にします。</dd>
 <dt><a href="/ja/docs/Learn/HTML/Forms">フォームの改善</a></dt>
 <dd>HTML5 ではウェブフォームに様々な改善が施されています。制約バリデーション API、多数の新しい属性、 {{HTMLElement("input")}} 要素の属性の新しい {{htmlattrxref("type", "input")}} の値の追加。そして新要素として {{HTMLElement("output")}} が追加されています。</dd>
 <dt>新しいセマンティック要素</dt>
 <dd>セクション、メディア、フォーム要素のほかに、 {{HTMLElement("mark")}}, {{HTMLElement("figure")}}, {{HTMLElement("figcaption")}}, {{HTMLElement("data")}}, {{HTMLElement("time")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}} あるいは {{HTMLElement("meter")}} のような多くの新しい要素、<a href="/ja/docs/Web/HTML/HTML5/HTML5_element_list">妥当な HTML5 の要素</a>はますます増えています。</dd>
 <dt>{{HTMLElement("iframe")}} の改善</dt>
 <dd>{{htmlattrxref("sandbox", "iframe")}}, {{htmlattrxref("srcdoc", "iframe")}} 属性を使用することで、著者は今やセキュリティレベルを明確にし、望まれた {{HTMLElement("iframe")}} 要素の描画が可能となりました。</dd>
 <dt><a href="/ja/docs/MathML">MathML</a></dt>
 <dd>HTML 文書に数式を直接埋め込むことができます。</dd>
 <dt><a href="/ja/docs/HTML/HTML5/Introduction_to_HTML5">HTML5 の紹介</a></dt>
 <dd>この記事では、ウェブデザインやウェブアプリケーションでの HTML5 の利用方法を紹介します。</dd>
 <dt><a href="https://hostingcanada.org/html-cheat-sheet/">HTML5 リファレンスガイド</a></dt>
 <dd>マークアップ作成ツール、コード例、ウェブ開発者ツールを含む HTML5 のクイックリファレンスシートです。このガイドは利用やアクセスがしやすいようにダウンロードできます。このページは W3C の支援によって、 HTML5 を使用した基本的な親しみやすさと経験のために作成されました。</dd>
 <dt><a href="https://websitesetup.org/html5-cheat-sheet/">ダウンロード可能な HTML5 ガイド</a></dt>
 <dd>HTML5 のクイックガイドで、よくある HTML タグと新しい HTML5 のタグを含みます。 Downloadable in PDF and PNG formats.</dd>
 <dt><a href="https://www.wpkube.com/html5-cheat-sheet/">HTML5 虎の巻</a> </dt>
 <dd>HTML 5、要素、イベント属性、互換性をマスターしたいと思う初心者向けの HTML 5 の小さな虎の巻です。</dd>
 <dt><a href="/ja/docs/HTML/HTML5/HTML5_Parser">HTML5 準拠のパーサー</a></dt>
 <dd>HTML 文書のバイト列を DOM に変換するパーサーは拡張され、妥当ではない HTML に直面したときも含め、すべての場合で使用する振る舞いを詳細に定義されるようになりました。これによって、予測可能性や、 HTML5 準拠のブラウザー間で相互運用性が格段に高まりました。</dd>
</dl>

<h2 id="Connectivity" style="margin: 0pt 0pt 0.25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: medium none;"><img alt="" src="/files/3839/HTML5_Connectivity_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">Connectivity</h2>

<dl>
 <dt><a href="/ja/docs/WebSockets" title="WebSockets">Web Socket</a></dt>
 <dd>Web Socket はページとサーバーが永続的な接続を作成し、 HTML ではないデータを交換することを可能にします 。</dd>
 <dt><a href="/ja/docs/Server-sent_events/Using_server-sent_events" title="Server-sent_events/Using_server-sent_events">Server-sent event</a></dt>
 <dd>サーバーがクライアントからのリクエストに対するレスポンスとしてのみデータを送ることができたという、古典的な枠組みより、サーバーがクライアントにイベントを送出することが可能になります。</dd>
 <dt><a href="/ja/docs/WebRTC" title="WebRTC">WebRTC</a></dt>
 <dd>この RTC (Real-Time Communication) という技術によって、プラグインや外部のアプリケーション無しに、ブラウザで直接、他者に接続して、テレビ会議を操作することが可能になります。</dd>
</dl>

<h2 id="Offline_storage" style="margin: 0pt 0pt 0.25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: medium none;"><img alt="" src="/files/3833/HTML5_Offline_Storage_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">Offline &amp; storage</h2>

<p><a href="/ja/docs/HTML/Using_the_application_cache" title="Offline_resources_in_Firefox">オフラインリソース: アプリケーションキャッシュ</a></p>

<dl>
 <dd>Firefox は HTML5 のオフラインリソースの仕様に完全に対応しています。その他のほとんどのブラウザーは、ある程度のレベルでオフラインリソースに対応しています。</dd>
 <dt><a href="/ja/docs/Online_and_offline_events" title="Online_and_offline_events">オンラインおよびオフラインのイベント</a></dt>
 <dd>Firefox 3 は WHATWG の、アプリケーションや拡張機能にアクティブなインターネット接続があるかどうかを検出させ、接続の成功やダウンも検出する、オンラインおよびオフラインのイベントをサポートしています。</dd>
 <dt><a href="/ja/docs/DOM/Storage" title="DOM/Storage">WHATWG のクライアントサイドセッションと、 DOM Storage として知られる永続的なストレージ</a></dt>
 <dd>クライアントサイドセッションと永続的なストレージは、ウェブアプリケーションが、構築されたデータをクライアントサイドに保存することを可能とします。</dd>
 <dt><a href="/ja/docs/IndexedDB" title="IndexedDB">IndexedDB</a></dt>
 <dd>IndexedDB は、インデックスを使って、ブラウザーで大量に構造化されたデータの保存と、このデータの高性能な検索のためのウェブ標準です。</dd>
 <dt><a href="/ja/docs/Using_files_from_web_applications" title="Using_files_from_web_applications">ウェブアプリケーションからファイルを扱う</a></dt>
 <dd>新しい HTML5 File API のサポートが Gecko に加えられており、ウェブアプリケーションはユーザーによって選択されたローカルファイルにアクセスすることができるようになっています。これは、<strong><a href="/ja/docs/HTML/Element/Input#attr-type" title="/ja/docs/HTML/Element/input#attr-type">type</a></strong> が <code>file</code> である  <span style="font-family: monospace;">{{HTMLElement("input")}} </span>HTML 要素の新しい <strong><a href="/ja/docs/HTML/Element/Input#attr-multiple" title="/ja/docs/HTML/Element/input#attr-multiple">multiple</a></strong> 属性を使った、複数のファイル選択のサポートを含みます。 <a href="/ja/docs/DOM/FileReader" title="DOM/FileReader"><code>FileReader</code></a> もあります。</dd>
</dl>

<h2 id="Multimedia" style="margin: 0pt 0pt 0.25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: medium none;"><img alt="" src="/files/3835/HTML5_Multimedia_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">Multimedia</h2>

<dl>
 <dt><a href="/ja/docs/Using_HTML5_audio_and_video" title="Using_audio_and_video_in_Firefox">HTML5 の audio 要素 と video要素の利用</a></dt>
 <dd>{{HTMLElement("audio")}} 要素と {{HTMLElement("video")}} 要素はマルチメディアコンテンツの埋め込みと操作を可能にします。</dd>
 <dt><a href="/ja/docs/WebRTC" title="/ja/WebRTC">WebRTC</a></dt>
 <dd>この RTC (Real-Time Communication) という技術によって、プラグインや外部のアプリケーション無しに、ブラウザで直接、他者に接続して、テレビ会議を操作することが可能になります。</dd>
 <dt><a href="/ja/docs/DOM/Using_the_Camera_API" title="DOM/Using_the_Camera_API">Camera API の利用</a></dt>
 <dd>コンピューターのカメラの使用、操作、およびカメラ画像を格納することができます。</dd>
 <dt>Track and WebVTT</dt>
 <dd>{{HTMLElement("track")}} 要素は字幕とチャプターを可能にします。 <a href="/en-US/docs/HTML/WebVTT" title="HTML/WebVTT">WebVTT</a> はテキストトラックフォーマットです。</dd>
</dl>

<h2 id="2D3D_graphics_AND_effects" style="margin: 0pt 0pt 0.25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: medium none;"><img alt="" src="/files/3841/HTML5_3D_Effects_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">2D/3D graphics AND effects</h2>

<dl>
 <dt><a href="/ja/docs/Canvas_tutorial" title="Canvas チュートリアル">Canvas チュートリアル</a></dt>
 <dd>新しい <code>{{HTMLElement("canvas")}} </code>要素についてと、 Firefox でどのようにグラフや他のオブジェクトを描画するかを学習します。</dd>
 <dt><a href="/ja/docs/Drawing_text_using_a_canvas" title="Drawing_text_using_a_canvas">HTML5 text API for <code>&lt;canvas&gt;</code> elements</a></dt>
 <dd>HTML5 の text API が {{HTMLElement("canvas")}} 要素によってサポートされます。</dd>
 <dt><a href="/ja/docs/WebGL" title="WebGL">WebGL</a></dt>
 <dd>WebGL は、 HTML5 の {{HTMLElement("canvas")}} 要素で利用できる、OpenGL ES 2.0 に厳密に従った API を提供することで、 3D グラフィックスを Web にもたらします。</dd>
 <dt><a href="/ja/docs/SVG" title="SVG">SVG</a></dt>
 <dd>ベクター画像の XML ベースのフォーマット。HTML5 では SVG を直接文書に埋め込む事が可能になりました。</dd>
</dl>
</div>

<div class="section">
<h2 id="Performance_and_Integration" style="margin: 0pt 0pt 0.25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: medium none;"><img alt="" src="/files/3831/HTML5_Performance_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">Performance and Integration</h2>

<dl>
 <dt><a href="/ja/docs/DOM/Using_web_workers" title="Using web workers">Web Worker</a></dt>
 <dd>JavaScript の評価をバックグラウンドのスレッドに委譲することを可能にして、これらの動作がインタラクティブなイベントを低速にすることを防ぐことを可能にします。</dd>
 <dt><code><a href="/ja/docs/DOM/XMLHttpRequest" title="XMLHttpRequest">XMLHttpRequest</a></code> Level 2</dt>
 <dd>ページのいくつかのパーツの非同期に取得することを可能にして、時間とユーザーのアクションによって変化する、動的なコンテンツを表示することを可能とします。これは <a href="/ja/docs/AJAX" title="/ja/docs/AJAX">Ajax</a> の背後にある技術です。</dd>
 <dt>JIT-compiling JavaScript engines</dt>
 <dd>新世代 の JavaScript エンジンは以前よりはるかに強力で、パフォーマンスの向上を導きます。</dd>
 <dt><a href="https://developer.mozilla.org/ja/docs/DOM/Manipulating_the_browser_history" title="https://developer.mozilla.org/ja/docs/DOM/Manipulating_the_browser_history">History API</a></dt>
 <dd>ブラウザーの閲覧履歴の操作ができます。特に対話的に新しい情報を読み込むページに於いて有益な API です。</dd>
 <dt><a href="/ja/docs/HTML/Content_Editable" title="HTML/Content Editable">contentEditable 属性で、あなたのウェブサイトが wiki に変身！</a></dt>
 <dd>HTML5 は contentEditable 属性を標準化しました。この機能についてより学びます。</dd>
 <dt><a href="/ja/docs/DragDrop/Drag_and_Drop" title="DragDrop/Drag_and_Drop">ドラッグ＆ドロップ API</a></dt>
 <dd>HTML5 の ドラッグ＆ドロップ API は、ウェブサイト内部あるいはウェブサイト間の、アイテムのドラッグ及びドロップのサポートを可能にします。これはまた、拡張機能や Mozilla ベースのアプリケーションで使用するための、よりシンプルな API 提供します。</dd>
 <dt><a href="/ja/docs/Focus_management_in_HTML" title="Focus_management_in_HTML">HTML でのフォーカスの管理</a></dt>
 <dd>新しい HTML5 の <code>activeElement</code> と <code>hasFocus</code> 属性がサポートされています。</dd>
 <dt><a href="/ja/docs/Web-based_protocol_handlers" title="Web-based_protocol_handlers">Web ベースのプロトコルハンドラー</a></dt>
 <dd><code>navigator.registerProtocolHandler()</code> メソッドを使って、ウェブアプリケーションをプロトコルのハンドラーとして登録することができます。</dd>
 <dt><a href="/ja/docs/Web/API/Window/requestAnimationFrame" style="font-weight: bold;" title="Web-based_protocol_handlers">requestAnimationFrame</a></dt>
 <dd>アニメーションのレンダリングのに最適なチューニングが施された新しいメソッド。</dd>
 <dt><a href="/ja/docs/DOM/Using_full-screen_mode" title="DOM/Using_full-screen_mode">Fullscreen API</a></dt>
 <dd>ブラウザの UI を表示せずに、ウェブページやアプリケーションがスクリーン全体の使用を制御します。</dd>
 <dt><a href="/ja/docs/API/Pointer_Lock_API" title="API/Pointer_Lock_API">Pointer Lock API</a></dt>
 <dd>ゲームや類似したアプリケーションが、ポインタがウィンドウの境界に達したときにフォーカスを失わないように、コンテンツにポインタをロックすることを可能にします。</dd>
 <dt><a href="/ja/docs/Online_and_offline_events" title="Online_and_offline_events">オンラインおよびオフラインのイベント</a></dt>
 <dd>オフラインで有能な良い Web アプリケーションを構築するため、アプリケーションが実際にオフラインであるときのことを知る必要があります。ついでに、アプリケーションが再度オンライン状態を返したときのことも知る必要があります。</dd>
</dl>

<h2 id="Device_access" style="margin: 0pt 0pt 0.25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: medium none;"><img alt="" src="/files/3837/HTML5_Device_Access_512.png" style="height: 66px; padding-right: 0.5em; vertical-align: middle; width: 77px;">Device access</h2>

<dl>
 <dt><a href="/ja/docs/DOM/Using_the_Camera_API" title="DOM/Using_the_Camera_API">Camera API の利用</a></dt>
 <dd>コンピュータのカメラからの画像の使用、操作、保存が可能になります。</dd>
 <dt><a href="/ja/docs/DOM/Touch_events" title="DOM/Touch_events">Touch events</a></dt>
 <dd>閲覧者のタッチスクリーン押下によって発生するイベントに対応するハンドラ。</dd>
 <dt><a href="/ja/docs/Using_geolocation" title="Using geolocation">Geolocation の利用</a></dt>
 <dd>ブラウザが閲覧者の現在位置を取得し、これを利用する事が出来ます。</dd>
 <dt><a href="/ja/docs/Detecting_device_orientation" title="Detecting_device_orientation">デバイスの方向の検出</a></dt>
 <dd>ブラウザを起動しているデバイスが方向を変えたときに、その情報を得られるようにします。例えば、デバイスの姿勢に反応するゲームを作るための入力デバイス、あるいは縦長または横長というスクリーンの方向に、ページのレイアウトを適応するために利用できます。</dd>
 <dt><a href="/ja/docs/API/Pointer_Lock_API" title="API/Pointer_Lock_API">Pointer Lock API</a></dt>
 <dd>ゲームや類似したアプリケーションが、ポインタがウィンドウの境界に達したときにフォーカスを失わないように、コンテンツにポインタをロックすることを可能にします。</dd>
</dl>

<h2 id="StylIng" style="margin: 0pt 0pt 0.25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: medium none;"><img alt="" src="/files/3829/HTML5_Styling_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">StylIng</h2>

<p><a href="/ja/docs/CSS" title="CSS">CSS</a> は、さらに複雑な方法で要素を形成することができるように拡張されてきました。 CSS はもう一枚岩の仕様ではなく、異なるモジュールがすべてレベル 3 ではありませんが、これはしばしば <a href="/ja/docs/CSS/CSS3" title="CSS/CSS3">CSS3</a> として参照されます。いくつかのモジュールはレベル 1 、あるモジュールはレベル 4 で、その中間のすべてのレベルをカバーしています。</p>

<dl>
 <dt>背景のスタイル付けの新機能</dt>
 <dd>{{cssxref("box-shadow")}}、 <a href="/ja/docs/CSS/Multiple_backgrounds">複数の背景</a>、 CSS の {{cssxref("filter")}} を用いてボックスに影をつけることができるようになりました。これらは <a href="/ja/docs/Learn/CSS/Styling_boxes/Advanced_box_effects">Advanced box effects</a> を読むことで知ることができます。</dd>
 <dt>より飾った境界線</dt>
 <dd>{{cssxref("border-image")}} およびそれに関連する個別指定プロパティを用いて枠線の形成に画像を使うことができるだけでなく、 {{cssxref("border-radius")}} プロパティによって角丸の枠線に対応しています。</dd>
 <dt>スタイルのアニメーション</dt>
 <dd>異なる状態にアニメーションするための <a href="/ja/docs/CSS/Using_CSS_transitions" title="CSS/Using_CSS_transitions">CSS Transitions</a> の使用、またはイベントの引き金無くページのパーツをアニメーションするための <a href="/ja/docs/CSS/Using_CSS_animations" title="CSS/Using_CSS_animations">CSS Animations</a> の使用により、ページの可動要素を操作することができます。</dd>
 <dt>タイポグラフィの改善</dt>
 <dd>著者には、より良いタイポグラフィに到達するための、より良いコントロールがあります。 {{cssxref("text-overflow")}} や<a href="/ja/docs/CSS/hyphens">ハイフネーション</a>はもちろん、<a href="/ja/docs/CSS/text-shadow">影</a>もコントロールでき、またはその<a href="/ja/docs/Web/CSS/text-decoration">装飾</a>はより明確にコントロールすることができます。新しい {{cssxref("@font-face")}} @-規則のおかげで、特別な書体をダウンロードし、適用することができます。</dd>
 <dt>新しい表象的なレイアウト</dt>
 <dd>デザインの柔軟性の向上のため、二つの新しいレイアウトが加えられました。 <a href="/ja/docs/Web/CSS/Using_CSS_multi-column_layouts">CSS 段組みレイアウト</a>と、 <a href="/ja/docs/Web/CSS/Flexbox">CSS フレックスボックスレイアウト</a>です。</dd>
</dl>
</div>
</div>