HTML5-概要

HTML5は、HTML 4.01、XHTML 1.0、およびXHTML 1.1に取って代わるHTML標準の次の主要な改訂版です。 HTML5は、World Wide Webでコンテンツを構造化して表示するための標準です。

HTML5は、World Wide Web Consortium（W3C）とWeb Hypertext Application Technology Working Group（WHATWG）の協力です。

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

ブラウザのサポート

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

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

新機能

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

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

下位互換性

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

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

HTMLの以前のバージョンに慣れていない場合は、HTML5の機能を調べる前に、* HTMLチュートリアル*を読むことをお勧めします。

HTML5-構文

HTML 5言語には、Webで公開されているHTML 4およびXHTML1ドキュメントと互換性のある「カスタム」HTML構文がありますが、HTML 4のより難解な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」の値を持つタイプ属性をスクリプト要素に追加するのが一般的な方法です-

<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 など。

link：/html5/html5_tags [HTML5要素]の完全なリストを次に示します。

HTML5属性

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

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

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

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

属性は開始タグ内でのみ指定でき、終了タグでは使用しないでください。

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

link：/html5/html5_attributes [HTML5属性]の完全なリストを次に示します。

HTML5ドキュメント

次のタグは、より良い構造のために導入されています-

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

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

<!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.finddevguides.com/html">HTML Tutorial</a></li>
            <li><a href = "https://www.finddevguides.com/css">CSS Tutorial</a></li>
            <li><a href = "https://www.finddevguides.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://finddevguides.com/">Tutorials Point</a></p>
      </footer>

   </body>
</html>

それは次の結果を生成します-

HTML5-属性

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

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

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

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

属性は*開始タグ*内でのみ指定でき、*終了タグ*で使用することはできません。

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

標準属性

以下にリストされている属性は、ほぼすべてのHTML 5タグでサポートされています。

Attribute	Options	Function
accesskey	User Defined	Specifies a keyboard shortcut to access an element.
align	right, left, center	Horizontally aligns tags
background	URL	Places an background image behind an element
bgcolor	numeric, hexidecimal, RGB values	Places a background color behind an element
class	User Defined	Classifies an element for use with Cascading Style Sheets.
contenteditable	true, false	Specifies if the user can edit the element’s content or not.
contextmenu	Menu id	Specifies the context menu for an element.
data-XXXX	User Defined	Custom attributes. Authors of a HTML document can define their own attributes. Must start with "data-".
draggable	true,false, auto	Specifies whether or not a user is allowed to drag an element.
height	Numeric Value	Specifies the height of tables, images, or table cells.
hidden	hidden	Specifies whether element should be visible or not.
id	User Defined	Names an element for use with Cascading Style Sheets.
item	List of elements	Used to group elements.
itemprop	List of items	Used to group items.
spellcheck	true, false	Specifies if the element must have it’s spelling or grammar checked.
style	CSS Style sheet	Specifies an inline style for an element.
subject	User define id	Specifies the element’s corresponding item.
tabindex	Tab number	Specifies the tab order of an element.
title	User Defined	"Pop-up" title for your elements.
valign	top, middle, bottom	Vertically aligns tags within an HTML element.
width	Numeric Value	Specifies the width of tables, images, or table cells.

HTML5タグと関連する属性の完全なリストについては、リンク：/html5/html5_tags [HTML5タグ]への参照を確認してください。

カスタム属性

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

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

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

上記のコードは、_datasubject_および_data-level_と呼ばれる2つのカスタム属性を持つ完全に有効なHTML5です。標準の属性の場合と同様の方法で、JavaScript APIまたはCSSを使用してこれらの属性の値を取得できます。

HTML5-イベント

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

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

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

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

Attribute	Value	Description
offline	script	Triggers when the document goes offline
onabort	script	Triggers on an abort event
onafterprint	script	Triggers after the document is printed
onbeforeonload	script	Triggers before the document loads
onbeforeprint	script	Triggers before the document is printed
onblur	script	Triggers when the window loses focus
oncanplay	script	Triggers when media can start play, but might has to stop for buffering
oncanplaythrough	script	Triggers when media can be played to the end, without stopping for buffering
onchange	script	Triggers when an element changes
onclick	script	Triggers on a mouse click
oncontextmenu	script	Triggers when a context menu is triggered
ondblclick	script	Triggers on a mouse double-click
ondrag	script	Triggers when an element is dragged
ondragend	script	Triggers at the end of a drag operation
ondragenter	script	Triggers when an element has been dragged to a valid drop target
ondragleave	script	Triggers when an element leaves a valid drop target
ondragover	script	Triggers when an element is being dragged over a valid drop target
ondragstart	script	Triggers at the start of a drag operation
ondrop	script	Triggers when dragged element is being dropped
ondurationchange	script	Triggers when the length of the media is changed
onemptied	script	Triggers when a media resource element suddenly becomes empty.
onended	script	Triggers when media has reach the end
onerror	script	Triggers when an error occur
onfocus	script	Triggers when the window gets focus
onformchange	script	Triggers when a form changes
onforminput	script	Triggers when a form gets user input
onhaschange	script	Triggers when the document has change
oninput	script	Triggers when an element gets user input
oninvalid	script	Triggers when an element is invalid
onkeydown	script	Triggers when a key is pressed
onkeypress	script	Triggers when a key is pressed and released
onkeyup	script	Triggers when a key is released
onload	script	Triggers when the document loads
onloadeddata	script	Triggers when media data is loaded
onloadedmetadata	script	Triggers when the duration and other media data of a media element is loaded
onloadstart	script	Triggers when the browser starts to load the media data
onmessage	script	Triggers when the message is triggered
onmousedown	script	Triggers when a mouse button is pressed
onmousemove	script	Triggers when the mouse pointer moves
onmouseout	script	Triggers when the mouse pointer moves out of an element
onmouseover	script	Triggers when the mouse pointer moves over an element
onmouseup	script	Triggers when a mouse button is released
onmousewheel	script	Triggers when the mouse wheel is being rotated
onoffline	script	Triggers when the document goes offline
online	script	Triggers when the document comes online
ononline	script	Triggers when the document comes online
onpagehide	script	Triggers when the window is hidden
onpageshow	script	Triggers when the window becomes visible
onpause	script	Triggers when media data is paused
onplay	script	Triggers when media data is going to start playing
onplaying	script	Triggers when media data has start playing
onpopstate	script	Triggers when the window’s history changes
onprogress	script	Triggers when the browser is fetching the media data
onratechange	script	Triggers when the media data’s playing rate has changed
onreadystatechange	script	Triggers when the ready-state changes
onredo	script	Triggers when the document performs a redo
onresize	script	Triggers when the window is resized
onscroll	script	Triggers when an element’s scrollbar is being scrolled
onseeked	script	Triggers when a media element’s seeking attribute is no longer true, and the seeking has ended
onseeking	script	Triggers when a media element’s seeking attribute is true, and the seeking has begun
onselect	script	Triggers when an element is selected
onstalled	script	Triggers when there is an error in fetching media data
onstorage	script	Triggers when a document loads
onsubmit	script	Triggers when a form is submitted
onsuspend	script	Triggers when the browser has been fetching media data, but stopped before the entire media file was fetched
ontimeupdate	script	Triggers when media changes its playing position
onundo	script	Triggers when a document performs an undo
onunload	script	Triggers when the user leaves the document
onvolumechange	script	Triggers when media changes the volume, also when volume is set to "mute"
onwaiting	script	Triggers when media has stopped playing, but is expected to resume

HTML5-Webフォーム2.0

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

HTML4の<input>要素

HTML4入力要素は、 type 属性を使用してデータタイプを指定します。HTML4は次のタイプを提供します-

Sr.No.	Type & Description
1	text 名目上改行のない自由形式のテキストフィールド。
2	password 機密情報用の自由形式のテキストフィールド。名目上は改行はありません。
3	checkbox 事前定義リストからのゼロ以上の値のセット。
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 input要素は type 属性にいくつかの新しい値を導入しました。これらは以下にリストされています。

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

Sr.No.	Type & Description
1	datetime タイムゾーンをUTCに設定してISO 8601に従ってエンコードされた日付と時刻（年、月、日、時間、分、秒、秒の小数部）。
2	datetime-local タイムゾーン情報なしでISO 8601に従ってエンコードされた日付と時刻（年、月、日、時間、分、秒、秒の小数部）。
3	date ISO 8601に従ってエンコードされた日付（年、月、日）。
4	month ISO 8601に従ってエンコードされた年と月で構成される日付。
5	week ISO 8601に従ってエンコードされた年と週の番号で構成される日付。
6	time ISO 8601に従ってエンコードされた時間（時、分、秒、小数秒）。
7	number 数値のみを受け入れます。 step属性は精度を指定し、デフォルトは1です。
8	range 範囲タイプは、数値の範囲の値を含む必要がある入力フィールドに使用されます。
9	email 電子メールの値のみを受け入れます。このタイプは、電子メールアドレスを含む必要がある入力フィールドに使用されます。単純なテキストを送信しようとすると、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が required と呼ばれる新しい属性を導入したため、空のテキストボックスが送信されないなど、クライアント側の検証にJavaScriptを使用する必要がなくなります。

<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>

それは次の結果を生成します-

HTML5-SVG

SVGは* S calable V ector G * raphicsの略で、2DグラフィックスとグラフィカルアプリケーションをXMLで記述するための言語であり、XMLはSVGビューアーによってレンダリングされます。

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

SVGはW3C勧告14になりました。 2003年1月。SVG仕様の最新バージョンはhttps://www.w3.org/TR/SVG/[SVG Specification]で確認できます。

SVGファイルの表示

ほとんどのWebブラウザーは、PNG、GIF、およびJPGを表示できるように、SVGを表示できます。 Internet Explorerユーザーは、ブラウザでSVGを表示できるようにhttps://www.adobe.com/svg/viewer/install/[Adobe SVG Viewer]をインストールする必要がある場合があります。

HTML5にSVGを埋め込む

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

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

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

Firefoxのアドレスバーに「 about：config 」と入力します。
「注意してください、約束します！」をクリックします。表示される警告メッセージのボタンを押してください（そして、それに必ず従ってください！）。
html5.enable をページ上部のフィルターバーに入力します。
現在は無効になっているため、クリックして値をtrueに切り替えます。

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