HTML5-クイックガイド

HTML5は、HTML 4.01、XHTML 1.0、およびXHTML1.1に代わるHTML標準の次のメジャーリビジョンです。HTML5は、ワールドワイドウェブ上でコンテンツを構造化および表示するための標準です。

HTML5は、World Wide Webコンソーシアム（W3C）とWebハイパーテキストアプリケーションテクノロジーワーキンググループ（WHATWG）の間の協力です。

新しい標準には、以前はAdobe Flash、Microsoft Silverlight、GoogleGearsなどのサードパーティのブラウザプラグインに依存していたビデオ再生やドラッグアンドドロップなどの機能が組み込まれています。

ブラウザのサポート

Apple Safari、Google Chrome、Mozilla Firefox、およびOperaの最新バージョンはすべて多くのHTML5機能をサポートしており、Internet Explorer9.0は一部のHTML5機能もサポートします。

iPhone、iPad、およびAndroidフォンにプリインストールされているモバイルWebブラウザーはすべて、HTML5を優れた方法でサポートしています。

新機能

HTML5には、最新のWebサイトの構築に役立つ多くの新しい要素と属性が導入されています。これは、HTML5で導入された最も顕著な機能のいくつかのセットです。

New Semantic Elements −これらは、<header>、<footer>、および<section>のようなものです。
Forms 2.0 − <input>タグに新しい属性が導入されたHTMLWebフォームの改善。
Persistent Local Storage −サードパーティのプラグインに頼らずに達成するため。
WebSocket −Webアプリケーション向けの次世代双方向通信技術。
Server-Sent Events − HTML5は、WebサーバーからWebブラウザーに流れるイベントを導入し、サーバー送信イベント（SSE）と呼ばれます。
Canvas −これは、JavaScriptでプログラムできる2次元の描画面をサポートします。
Audio & Video −サードパーティのプラグインを使用せずに、Webページにオーディオまたはビデオを埋め込むことができます。
Geolocation −これで、訪問者は自分の物理的な場所をWebアプリケーションと共有することを選択できます。
Microdata −これにより、HTML5を超えて独自の語彙を作成し、カスタムセマンティクスでWebページを拡張できます。
Drag and drop −同じWebページのある場所から別の場所にアイテムをドラッグアンドドロップします。

下位互換性

HTML5は、可能な限り、既存のWebブラウザーとの下位互換性があるように設計されています。その新機能は既存の機能に基づいて構築されており、古いブラウザにフォールバックコンテンツを提供できます。

数行のJavaScriptを使用して、個々のHTML5機能のサポートを検出することをお勧めします。

以前のバージョンのHTMLに慣れていない場合は、次のバージョンを使用することをお勧めします。 HTML Tutorial HTML5の機能を調べる前に。

HTML 5言語には、Webで公開されているHTML 4およびXHTML1ドキュメントと互換性のある「カスタム」HTML構文がありますが、HTML4のより難解なSGML機能とは互換性がありません。

HTML 5には、属性を引用する小文字のタグ名が必要なXHTMLと同じ構文規則がありません。属性には値があり、すべての空の要素を閉じる必要がありました。

HTML5には多くの柔軟性があり、次の機能をサポートしています-

大文字のタグ名。
属性の引用符はオプションです。
属性値はオプションです。
空の要素を閉じることはオプションです。

DOCTYPE

HTML言語はSGMLベースであり、したがってDTDへの参照が必要だったため、古いバージョンのHTMLのDOCTYPEは長くなりました。

HTML 5の作成者は、単純な構文を使用してDOCTYPEを次のように指定します。

<!DOCTYPE html>

上記の構文では大文字と小文字は区別されません。

文字コード

HTML 5の作成者は、単純な構文を使用して、次のように文字エンコードを指定できます。

<meta charset = "UTF-8">

上記の構文では大文字と小文字は区別されません。

<script>タグ

次のように、「text / javascript」の値を持つtype属性をスクリプト要素に追加するのが一般的な方法です。

<script type = "text/javascript" src = "scriptfile.js"></script>

HTML 5は必要な余分な情報を削除し、次の構文を使用できます-

<script src = "scriptfile.js"></script>

<link>タグ

これまでのところ、次のように<link>を書いていました-

<link rel = "stylesheet" type = "text/css" href = "stylefile.css">

HTML 5は必要な余分な情報を削除し、次の構文を使用するだけです。

<link rel = "stylesheet" href = "stylefile.css">

HTML5要素

HTML5要素は、開始タグと終了タグを使用してマークアップされます。タグは、タグ名を間に挟んだ山括弧を使用して区切られます。

開始タグと終了タグの違いは、後者にはタグ名の前にスラッシュが含まれていることです。

以下はHTML5要素の例です-

<p>...</p>

HTML5タグ名では大文字と小文字が区別されず、すべて大文字または大文字と小文字が混在して記述できますが、最も一般的な規則は小文字を使用することです。

ほとんどの要素には、<p> ... </ p>に段落が含まれているなどのコンテンツが含まれています。ただし、一部の要素にはコンテンツを含めることがまったく禁止されており、これらはvoid要素と呼ばれます。例えば、br, hr, link, meta、など。

HTML5要素の完全なリストは次のとおりです。

HTML5属性

要素には、要素のさまざまなプロパティを設定するために使用される属性が含まれる場合があります。

一部の属性はグローバルに定義され、任意の要素で使用できますが、他の属性は特定の要素に対してのみ定義されます。すべての属性には名前と値があり、以下の例のようになります。

以下は、「example」の値を使用してclassという名前の属性でdiv要素をマークアップする方法を示すHTML5属性の例です。

<div class = "example">...</div>

属性は開始タグ内でのみ指定でき、終了タグで使用してはなりません。

HTML5属性は大文字と小文字を区別せず、すべて大文字または大文字と小文字を組み合わせて記述できますが、最も一般的な規則は小文字を使用することです。

HTML5属性の完全なリストは次のとおりです。

HTML5ドキュメント

構造を改善するために、次のタグが導入されました-

section−このタグは、一般的なドキュメントまたはアプリケーションセクションを表します。h1-h6と一緒に使用して、ドキュメントの構造を示すことができます。
article −このタグは、ブログエントリや新聞記事など、ドキュメントの独立したコンテンツを表します。
aside −このタグは、ページの残りの部分にわずかに関連しているコンテンツの一部を表します。
header −このタグは、セクションのヘッダーを表します。
footer −このタグはセクションのフッターを表し、作成者に関する情報、著作権情報などを含めることができます。
nav −このタグは、ナビゲーションを目的としたドキュメントのセクションを表します。
dialog −このタグは、会話をマークアップするために使用できます。
figure −このタグを使用して、キャプションをグラフィックやビデオなどの埋め込みコンテンツと関連付けることができます。

HTML5ドキュメントのマークアップは次のようになります-

<!DOCTYPE html> 

<html>  
   <head> 
      <meta charset = "utf-8"> 
      <title>...</title> 
   </head> 
  
   <body> 
      <header>...</header> 
      <nav>...</nav> 
      
      <article> 
         <section> 
            ... 
         </section> 
      </article> 
      <aside>...</aside> 
      
      <footer>...</footer> 
   </body> 
</html>

<!DOCTYPE html>  

<html>  
   <head> 
      <meta charset = "utf-8"> 
      <title>...</title> 
   </head> 
  
   <body> 
      <header role = "banner"> 
         <h1>HTML5 Document Structure Example</h1> 
         <p>This page should be tried in safari, chrome or Mozila.</p> 
      </header> 
   
      <nav> 
         <ul> 
            <li><a href = "https://www.tutorialspoint.com/html">HTML Tutorial</a></li> 
            <li><a href = "https://www.tutorialspoint.com/css">CSS Tutorial</a></li> 
            <li><a href = "https://www.tutorialspoint.com/javascript">
            JavaScript Tutorial</a></li> 
         </ul> 
      </nav> 
   
      <article> 
         <section> 
            <p>Once article can have multiple sections</p>
         </section> 
      </article> 
   
      <aside> 
         <p>This is  aside part of the web page</p> 
      </aside> 
   
      <footer> 
         <p>Created by <a href = "https://tutorialspoint.com/">Tutorials Point</a></p> 
      </footer> 
   
   </body> 
</html>

次の結果が得られます-

前の章で説明したように、要素には、要素のさまざまなプロパティを設定するために使用される属性が含まれる場合があります。

以下は、「example」の値を使用してclassという名前の属性でdiv要素をマークアップする方法を示すHTML5属性の例です。

<div class = "example">...</div>

属性は内でのみ指定できます start tags で使用してはいけません end tags。

標準属性

以下にリストされている属性は、ほとんどすべてのHTML5タグでサポートされています。

属性	オプション	関数
アクセスキー	ユーザー定義の	要素にアクセスするためのキーボードショートカットを指定します。
整列	右、左、中央	タグを水平方向に配置します
バックグラウンド	URL	要素の後ろに背景画像を配置します
bgcolor	数値、16進数、RGB値	要素の後ろに背景色を配置します
クラス	ユーザー定義の	カスケードスタイルシートで使用する要素を分類します。
contenteditable	真/偽	ユーザーが要素のコンテンツを編集できるかどうかを指定します。
コンテキストメニュー	メニューID	要素のコンテキストメニューを指定します。
データ-XXXX	ユーザー定義の	カスタム属性。HTMLドキュメントの作成者は、独自の属性を定義できます。「data-」で始まる必要があります。
ドラッグ可能	true、false、auto	ユーザーが要素をドラッグできるかどうかを指定します。
高さ	数値	テーブル、画像、またはテーブルセルの高さを指定します。
隠された	隠された	要素を表示するかどうかを指定します。
id	ユーザー定義の	カスケードスタイルシートで使用する要素に名前を付けます。
項目	要素のリスト	要素をグループ化するために使用されます。
itemprop	アイテムのリスト	アイテムをグループ化するために使用されます。
スペルチェック	真/偽	要素のスペルまたは文法をチェックする必要があるかどうかを指定します。
スタイル	CSSスタイルシート	要素のインラインスタイルを指定します。
件名	ユーザー定義ID	要素の対応するアイテムを指定します。
tabindex	タブ番号	要素のタブ順序を指定します。
題名	ユーザー定義の	要素の「ポップアップ」タイトル。
valign	上、中、下	HTML要素内のタグを垂直方向に配置します。
幅	数値	テーブル、画像、またはテーブルセルの幅を指定します。

HTML5タグと関連する属性の完全なリストについては、当社への参照を確認してくださいHTML5のタグを。

カスタム属性

HTML 5で導入されている新機能は、カスタムデータ属性の追加です。

カスタムデータ属性はで始まります data-要件に基づいて名前が付けられます。これが簡単な例です-

<div class = "example" data-subject = "physics" data-level = "complex">
   ...
</div>

上記のコードは、datasubjectとdata-levelという2つのカスタム属性を持つ完全に有効なHTML5になります。これらの属性の値は、標準の属性の場合と同様の方法でJavaScriptAPIまたはCSSを使用して取得できます。

ユーザーがWebサイトにアクセスすると、テキスト、画像、リンクをクリックしたり、定義された要素にカーソルを合わせたりするなど、さまざまなアクティビティを実行します。これらはJavaScriptが呼び出すものの例です events。

イベントハンドラーはJavascriptまたはVBscriptで記述でき、これらのイベントハンドラーをイベントタグ属性の値として指定できます。HTML5仕様では、以下に示すさまざまなイベント属性が定義されています。

次の一連の属性を使用して、 javascript または vbscript HTML5要素に対して発生するイベントがある場合、値として指定されたコード。

以降の章でこれらの要素について詳しく説明しながら、要素固有のイベントについて説明します。

属性	値	説明
オフライン	脚本	ドキュメントがオフラインになるとトリガーされます
onabort	脚本	アボートイベントのトリガー
onafterprint	脚本	ドキュメントが印刷された後にトリガーされます
onbeforeonload	脚本	ドキュメントが読み込まれる前にトリガーします
onbeforeprint	脚本	ドキュメントが印刷される前にトリガーします
onblur	脚本	ウィンドウがフォーカスを失ったときにトリガーされます
oncanplay	脚本	メディアが再生を開始できるときにトリガーしますが、バッファリングのために停止する必要がある場合があります
oncanplaythrough	脚本	バッファリングのために停止することなく、メディアを最後まで再生できる場合にトリガーします
onchange	脚本	要素が変更されたときにトリガーされます
onclick	脚本	マウスクリックでトリガー
oncontextmenu	脚本	コンテキストメニューがトリガーされるとトリガーされます
ondblclick	脚本	マウスのダブルクリックでトリガー
オンドラッグ	脚本	要素がドラッグされるとトリガーされます
ondragend	脚本	ドラッグ操作の終了時にトリガーします
ondragenter	脚本	要素が有効なドロップターゲットにドラッグされたときにトリガーされます
ondragleave	脚本	要素が有効なドロップターゲットを離れるとトリガーされます
オンドラッグオーバー	脚本	要素が有効なドロップターゲット上にドラッグされているときにトリガーされます
ondragstart	脚本	ドラッグ操作の開始時にトリガーされます
オンドロップ	脚本	ドラッグされた要素がドロップされているときにトリガーされます
ondurationchange	脚本	メディアの長さが変更されるとトリガーされます
空にされた	脚本	メディアリソース要素が突然空になったときにトリガーされます。
onended	脚本	メディアが終わりに達したときにトリガーします
onerror	脚本	エラーが発生するとトリガーされます
onfocus	脚本	ウィンドウがフォーカスを取得するとトリガーされます
onformchange	脚本	フォームが変更されたときにトリガーされます
onforminput	脚本	フォームがユーザー入力を取得するとトリガーされます
onhaschange	脚本	ドキュメントが変更されたときにトリガーされます
oninput	脚本	要素がユーザー入力を取得するとトリガーされます
oninvalid	脚本	要素が無効な場合にトリガーします
オンキーダウン	脚本	キーが押されたときにトリガーされます
onkeypress	脚本	キーを押して放すとトリガーされます
onkeyup	脚本	キーが離されるとトリガーされます
オンロード	脚本	ドキュメントが読み込まれるとトリガーされます
onloadeddata	脚本	メディアデータがロードされるとトリガーされます
onloadedmetadata	脚本	メディア要素の期間およびその他のメディアデータが読み込まれるとトリガーされます
onloadstart	脚本	ブラウザがメディアデータの読み込みを開始するとトリガーされます
onmessage	脚本	メッセージがトリガーされるとトリガーされます
onmousedown	脚本	マウスボタンが押されたときにトリガーされます
onmousemove	脚本	マウスポインタが移動するとトリガーされます
onmouseout	脚本	マウスポインタが要素の外に移動するとトリガーされます
onmouseover	脚本	マウスポインタが要素上を移動するとトリガーされます
onmouseup	脚本	マウスボタンを離すとトリガーされます
オンマウスホイール	脚本	マウスホイールが回転しているときにトリガーされます
オンラインオフライン	脚本	ドキュメントがオフラインになるとトリガーされます
オノイン	脚本	ドキュメントがオンラインになるとトリガーされます
オンライン	脚本	ドキュメントがオンラインになるとトリガーされます
onpagehide	脚本	ウィンドウが非表示になるとトリガーされます
onpageshow	脚本	ウィンドウが表示されるとトリガーされます
一時停止	脚本	メディアデータが一時停止されたときにトリガーされます
オンプレイ	脚本	メディアデータの再生が開始されるタイミングをトリガーします
onplaying	脚本	メディアデータの再生が開始されるとトリガーされます
onpopstate	脚本	ウィンドウの履歴が変更されたときにトリガーされます
onprogress	脚本	ブラウザがメディアデータをフェッチしているときにトリガーされます
onratechange	脚本	メディアデータの再生速度が変更されたときにトリガーされます
onreadystatechange	脚本	準備完了状態が変化するとトリガーされます
オンレド	脚本	ドキュメントがやり直しを実行するとトリガーされます
onresize	脚本	ウィンドウのサイズが変更されるとトリガーされます
onscroll	脚本	要素のスクロールバーがスクロールされているときにトリガーされます
オンシーク	脚本	メディア要素のシーク属性が真でなくなり、シークが終了したときにトリガーされます
オンシーク	脚本	メディア要素のシーク属性がtrueであり、シークが開始されたときにトリガーされます
onselect	脚本	要素が選択されるとトリガーされます
オンストール	脚本	メディアデータのフェッチでエラーが発生したときにトリガーされます
onstorage	脚本	ドキュメントが読み込まれるとトリガーされます
onsubmit	脚本	フォームが送信されるとトリガーされます
onsuspend	脚本	ブラウザがメディアデータをフェッチしているが、メディアファイル全体がフェッチされる前に停止した場合にトリガーされます
ontimeupdate	脚本	メディアが再生位置を変更するとトリガーされます
オナンド	脚本	ドキュメントが元に戻すを実行するとトリガーされます
onunload	脚本	ユーザーがドキュメントを離れるとトリガーされます
onvolumechange	脚本	メディアが音量を変更したとき、および音量が「ミュート」に設定されているときにもトリガーされます
待っています	脚本	メディアの再生が停止したときにトリガーされますが、再開されると予想されます

Web Forms 2.0は、HTML4にあるフォーム機能の拡張機能です。HTML5のフォーム要素と属性は、HTML4よりも高度なセマンティックマークアップを提供し、HTML4で必要とされていた面倒なスクリプトやスタイリングから解放されます。

HTML4の<input>要素

HTML4入力要素は type データ型を指定する属性。HTML4は次の型を提供します-

シニア番号	タイプと説明
1	text 名目上改行のない自由形式のテキストフィールド。
2	password 機密情報用の自由形式のテキストフィールドで、名目上改行がありません。
3	checkbox 事前定義されたリストからの0個以上の値のセット。
4	radio 列挙された値。
5	submit ボタンの無料フォームは、フォームの送信を開始します。
6	file MIMEタイプとオプションでファイル名を持つ任意のファイル。
7	image 特定の画像のサイズを基準にした座標で、最後に選択した値である必要があり、フォームの送信を開始するという追加のセマンティクスがあります。
8	hidden 通常はユーザーに表示されない任意の文字列。
9	select 無線タイプによく似た列挙値。
10	textarea 名目上改行制限のない自由形式のテキストフィールド。
11	button ボタンに関連する任意のイベントを開始できるボタンの自由形式。

以下は、ラベル、ラジオボタン、および送信ボタンを使用する簡単な例です-

... 
<form action = "http://example.com/cgiscript.pl" method = "post">  
   <p> 
      <label for = "firstname">first name: </label> 
      <input type = "text" id = "firstname"><br /> 
   
      <label for = "lastname">last name: </label> 
      <input type = "text" id = "lastname"><br /> 
   
      <label for = "email">email: </label> 
      <input type = "text" id = "email"><br> 
   
      <input type = "radio" name = "sex" value = "male"> Male<br> 
      <input type = "radio" name = "sex" value = "female"> Female<br> 
      <input type = "submit" value = "send"> <input type = "reset"> 
   </p> 
</form> 
 ...

HTML5の<input>要素

上記の属性とは別に、HTML5入力要素はいくつかの新しい値を導入しました type属性。これらは以下のとおりです。

NOTE −最新バージョンのを使用して次のすべての例を試してください Opera ブラウザ。

シニア番号	タイプと説明
1	日付時刻タイムゾーンをUTCに設定してISO8601に従ってエンコードされた日付と時刻（年、月、日、時、分、秒、小数部）。
2	日時-ローカル ISO 8601に従ってエンコードされた日付と時刻（年、月、日、時、分、秒、小数部）。タイムゾーン情報はありません。
3	日付 ISO 8601に従ってエンコードされた日付（年、月、日）。
4	月 ISO8601に従ってエンコードされた年と月で構成される日付。
5	週間 ISO8601に従ってエンコードされた年と週の番号で構成される日付。
6	時間 ISO 8601に従ってエンコードされた時間（時、分、秒、小数秒）。
7	数数値のみ受け付けます。step属性は精度を指定し、デフォルトは1です。
8	範囲範囲タイプは、数値の範囲からの値を含む必要がある入力フィールドに使用されます。
9	Eメール電子メールの値のみを受け入れます。このタイプは、電子メールアドレスを含める必要がある入力フィールドに使用されます。簡単なテキストを送信しようとすると、email @ example.com形式の電子メールアドレスのみを入力する必要があります。
10	url URL値のみを受け入れます。このタイプは、URLアドレスを含む必要がある入力フィールドに使用されます。単純なテキストを送信しようとすると、http：//www.example.com形式またはhttp://example.com形式のいずれかでURLアドレスのみを入力するように強制されます。

<output>要素

HTML5では、スクリプトによって記述された出力など、さまざまなタイプの出力の結果を表すために使用される新しい要素<output>が導入されました。

あなたは使用することができます for出力要素と、計算に影響を与えたドキュメント内の他の要素との関係を指定する属性（たとえば、入力またはパラメーターとして）。for属性の値は、他の要素のIDのスペース区切りのリストです。

<!DOCTYPE HTML>

<html>
   <head>
      <script type = "text/javascript">
         
         function showResult() {
            x = document.forms["myform"]["newinput"].value;
            document.forms["myform"]["result"].value = x;
         }
      </script>
   </head>
   
   <body>

      <form action = "/cgi-bin/html5.cgi" method = "get" name = "myform">
         Enter a value : <input type = "text" name = "newinput" />
         <input type = "button" value = "Result"  onclick = "showResult();" />
         <output name = "result"></output>
      </form>
		
   </body>
</html>

次の結果が得られます-

プレースホルダー属性

HTML5はと呼ばれる新しい属性を導入しました placeholder。<input>要素と<textarea>要素のこの属性は、フィールドに入力できる内容のヒントをユーザーに提供します。プレースホルダーテキストには、キャリッジリターンやラインフィードを含めることはできません。

プレースホルダー属性の簡単な構文は次のとおりです-

<input type = "text" name = "search" placeholder = "search the web"/>

この属性は、Mozilla、Safari、およびCromeブラウザの最新バージョンでのみサポートされています。

<!DOCTYPE HTML>

<html>
   <body>

      <form action = "/cgi-bin/html5.cgi" method = "get">
         Enter email : <input type = "email" name = "newinput" 
            placeholder = "[email protected]"/>
         <input type = "submit" value = "submit" />
      </form>

   </body>
</html>

これにより、次の結果が生成されます-

オートフォーカス属性

これは単純なワンステップパターンであり、ドキュメントの読み込み時にJavaScriptで簡単にプログラムでき、特定の1つのフォームフィールドに自動的にフォーカスします。

HTML5はと呼ばれる新しい属性を導入しました autofocus これは次のように使用されます-

<input type = "text" name = "search" autofocus/>

この属性は、Mozilla、Safari、およびChromeブラウザの最新バージョンでのみサポートされています。

<!DOCTYPE HTML>

<html>
   <body>
   
      <form action = "/cgi-bin/html5.cgi" method = "get">
         Enter email : <input type = "text" name = "newinput" autofocus/>
         <p>Try to submit using Submit button</p>
         <input type = "submit" value = "submit" />
      </form>
      
   </body>
</html>

必要な属性

HTML5がという新しい属性を導入したため、空のテキストボックスが送信されないなど、クライアント側の検証にJavaScriptを使用する必要がなくなりました。 required これは次のように使用され、値を持つことを主張します-

<input type = "text" name = "search" required/>

この属性は、Mozilla、Safari、およびChromeブラウザの最新バージョンでのみサポートされています。

<!DOCTYPE HTML>

<html>
   <body>
   
      <form action = "/cgi-bin/html5.cgi" method = "get">
         Enter email : <input type = "text" name = "newinput" required/>
         <p>Try to submit using Submit button</p>
         <input type = "submit" value = "submit" />
      </form>
      
   </body>
</html>

次の結果が得られます-

SVGは S校正可能 Vエクター Graphicsは、2DグラフィックスとグラフィカルアプリケーションをXMLで記述するための言語であり、XMLはSVGビューアによってレンダリングされます。

SVGは主に、円グラフ、X、Y座標系の2次元グラフなどのベクトルタイプの図に役立ちます。

SVGは、2003年1月W3C勧告14.になって、あなたはでSVG仕様の最新バージョンを確認することができますSVG仕様。

SVGファイルの表示

ほとんどのWebブラウザーは、PNG、GIF、およびJPGを表示できるのと同じようにSVGを表示できます。Internet Explorerユーザーは、ブラウザーでSVGを表示できるようにするために、Adobe SVGViewerをインストールする必要がある場合があります。

HTML5へのSVGの埋め込み

HTML5では、を使用してSVGを直接埋め込むことができます <svg>...</svg> 次の簡単な構文を持つタグ-

<svg xmlns = "http://www.w3.org/2000/svg">
   ...    
</svg>

Firefox 3.7には、次の手順を使用してHTML5を有効にできる構成オプション（ "about：config"）も導入されています。

タイプ about:config Firefoxのアドレスバーにあります。
「気をつけて約束します！」をクリックします。表示される警告メッセージのボタン（そしてそれを遵守していることを確認してください！）。
タイプ html5.enable ページ上部のフィルターバーに入力します。
現在は無効になっているので、クリックして値をtrueに切り替えます。

これで、Firefox HTML5パーサーが有効になり、次の例を試すことができるはずです。