HTML/HTML5

HTML
HTML5

MediaWiki編集におけるhtml5対応については w:Help:ウィキテキストにおけるHTML を参照。

HTML5

HTML5は、従来のHTML規格を発展させ、Web技術の進化に対応するために策定された最新のマークアップ言語です。HTML5は、従来のHTML 4.01およびXHTML 1.0の後継として設計され、2014年10月28日にW3Cによって正式に勧告されました。その後、HTML 5.1（2016年11月1日）、HTML 5.2（2017年12月14日）が順次勧告されましたが、2021年1月28日に廃止されました。現在はWHATWGによるHTML Living Standardが有効な後継規格として運用されています。

HTML5の背景と目的

HTML5は以下の目的で設計されました：

シンプルで柔軟な仕様: HTML4やXHTML1での複雑さを軽減し、Web開発の効率を向上。
最新のWebアプリケーションのニーズに対応: 動画、音声、グラフィックスのネイティブサポートを追加。
デバイス独立性: デスクトップからモバイルデバイスまで広範囲に対応。
後方互換性の維持: 既存のHTMLドキュメントとの互換性を重視。

主な特徴

HTML5では、以下のような新しい要素と機能が導入されました：

新しいセマンティック要素

<article>: 独立したコンテンツを表現。
<section>: コンテンツのセクション化。
<header>: セクションやページのヘッダー。
<footer>: セクションやページのフッター。
<nav>: ナビゲーションリンクのグループ。
<aside>: 補足情報。

マルチメディア要素

<audio>: 音声コンテンツの埋め込み。
<video>: 動画コンテンツの埋め込み。
<canvas>: 動的な2Dグラフィックスの描画。
<svg>: ベクターグラフィックスのサポート。

フォーム関連の拡張

新しい入力タイプ: email, url, date, numberなど。
新しい属性: placeholder, required, patternなど。

JavaScript APIの統合

Geolocation API: 位置情報取得機能。
Web Storage API: クライアントサイドデータストレージ。
WebSocket API: 双方向通信のサポート。

HTML5の構文

HTML5はSGMLに依存しない仕様となり、構文が簡略化されました：

DOCTYPE宣言が簡潔化：
```
<!DOCTYPE html>
```
属性値の引用符が必須ではない。
空要素の閉じタグが不要（例: <img>, <input>）。

HTML Living Standard

W3CによるHTML5.2勧告の廃止後、HTMLの進化はWHATWGによるHTML Living Standardに移行しました。この標準は継続的に更新され、Webブラウザや開発者が最新技術に対応できるよう設計されています。

WHATWGは、HTML Living Standardを次のように説明しています：

継続的更新: 固定されたバージョンを持たず、必要に応じて仕様が追加・修正される。
統一性の確保: ブラウザ間の互換性を強化。
シンプルな参照: 最新の仕様はWHATWG HTML Living Standardで確認可能。

HTML5の意義

HTML5はWeb技術の大きな進化を象徴し、以下のような点で重要な役割を果たしました：

動画や音声のネイティブサポートにより、プラグイン（例: Flash）の依存を減少。
セマンティック要素の導入により、アクセシビリティとSEOが向上。
モバイルデバイスやマルチプラットフォーム対応を推進。

HTML5とHTML Living Standardの比較
特徴	HTML5	HTML Living Standard
バージョン	固定バージョン（HTML5.2まで）	継続的更新
制定機関	W3C	WHATWG
更新頻度	限定的	頻繁
参照先	W3C勧告ページ	WHATWG公式ページ

HTML5の廃止と後継

2021年1月28日にW3CはHTML5.2を廃止し、公式にWHATWGのHTML Living Standardを推奨しました。これにより、HTMLの標準は1つに統一され、Webの開発と運用の一貫性が向上しました。

参考リンク

HTML4.01からの変更点

構造の改善

人が見てもコンピュータが見ても解読しやすい構造とするため、デザインに関係する部分はスタイルシートに記述し、要素や属性でデザインを指定することはしないという姿勢がより徹底された。そのためfont要素やcenter要素などいくつかの要素が廃止され、table要素におけるwidth属性やalign属性なども廃止された。HTML4.01で非推奨であったb要素やu要素などは復活している（非推奨が外された）が、要素の意味づけが変更されている。header, main, section, article, nav, aside, footerなどセクショニング要素が新たに追加され、文書構造をより簡潔に記述できるようになった。

マルチメディアへの対応

マルチメディアへの対応も目的の一つであり、audio, video, embedなどの要素が追加された。

HTML5ソースのサンプル

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="utf-8">
        <title>簡単なページ</title>
    </head>
    <body>
        <header>
            <h1>簡単なページ</h1>
            <nav>
                <ul>
                    <li><a href="#">ホーム</a></li>
                    <li><a href="#">このサイトについて</a></li>
                    <li><a href="#">実績</a></li>
                    <li><a href="#">お問い合わせ</a></li>
                </ul>
            </nav>
        </header>
        <main>
            <section>
                <h2>はじめに</h2>
                <p>このサイトは簡単なページのサンプルです。</p>
                <article>
                    <h3>概要</h3>
                    <p>このページはサンプルです。</p>
                </article>
            </section>
            <aside>
                <h2>コラム</h2>
                <p>コラムのような余談はASIDE要素に記述します。</p>
            </aside>
        </main>
    </body>
</html>

DOCTYPE宣言について

DOCTYPE宣言は、ドキュメントの種類を宣言します。HTML4では、この要素内で「!DOCTYPE html」以降にDTDによるスキーマが参照する仕様でした^[1]。しかしHTML5では <!DOCTYPE html> だけにするように決まりました^[2]。

audio要素とvideo要素

audio要素はオーディオを再生、video要素は動画を再生する。embed要素やobject要素による埋め込みと異なり、この方法ではプラグインを介さずブラウザの機能で直接マルチメディアの再生を行うことが出来る。ただし、ブラウザにより対応フォーマットは異なる。

audio要素とvideo要素のマークアップ例

<!-- audio要素の場合 -->
<audio autoplay controls>
    <source src="example.ogg" type="audio/ogg">
    <source src="example.mp3" type="audio/mp3">
    （ここに未対応環境への代替コンテンツ）
</audio>

<!-- video要素の場合 -->
<video width="320" height="240" autoplay controls>
   <source src="file.ogv" type="video/ogg">
   <source src="file.mp4" type="video/mp4">
    （ここに未対応環境への代替コンテンツ）
</video>

canvas要素

詳細は「JavaScript/Canvas」を参照

概要

canvas要素はダイナミックなビットマップ（ベクター）画像を描画する。二次元コンピュータグラフィックスはCanvas APIにより実現され^[3]、ハードウェアアクセラレーションされた二次元及び三次元コンピュータグラフィックスはWebGLを用いて実現される。

書式

<canvas id="canvas" width="320" height="240">
（ここに未対応環境への代替コンテンツ）
</canvas>

JavaScriptを使用するとcanvasに画像を描くことができる。

挿入するJavaScriptコード例

var ctx    = canvas.getContext("2d");
ctx.fillStyle = "rgb(0,0,200)";
ctx.fillRect(100, 100, 200, 200);

JavaScriptは下記のようにcanvas要素と組み合わせて使用できます。

HTMLでのJavaScriptとcanvasの組み合わせの例

<!DOCTYPE html>
<html lang="ja">
<head>
    <title>簡単なページ</title>
</head>
<body>

  <canvas id="canvas" width="320" height="240">
  </canvas>

  <script>
    var ctx    = canvas.getContext("2d");
    ctx.fillStyle = "rgb(0,0,200)";
    ctx.fillRect(100, 100, 200, 200);
  </script>

</body>
</html>

なお、上記のコードは、実行するとブラウザ画面に青い長方形を描きます。

ctx.fillStyle = "rgb(0,0,200)";

では色指定を行っています。0〜255の範囲で赤・緑・青の色見をそれぞれ指定しています。

ctx.fillRect(100, 100, 200, 200);

の書式は、上記htmlコード例の設定なら、

ctx.fillRect(始点x座標, 始点y座標, 横幅, 縦幅);

です。（第3引数と第4引数は、終点の座標位置ではないので、混同しないように注意しましょう。）

CANVAS要素とJavaScriptを使ったアニメーション

requestAnimationFrame は、ブラウザに次の再描画が行われるタイミングで指定したコードを実行するためのメソッドです。これはブラウザが持つ最適化されたアニメーション制御の仕組みを利用することができ、特にアニメーションや描画の際に使用されます。

一般的に、アニメーションを setInterval や setTimeout を使って実装すると、一定間隔でコードが実行されるため、描画フレームレートやブラウザの最適化に影響を与えることがあります。しかし、requestAnimationFrame を使うと、ブラウザが次の再描画を行う直前にコードを実行するため、フレームレートやパフォーマンスを向上させることができます。

requestAnimationFrame を使用した基本的なアニメーションの流れは以下のようになります：

アニメーションの開始: requestAnimationFrame を最初に呼び出してアニメーションを開始します。
再帰的な処理: 毎フレームごとに実行される関数（通常は animate 関数など）を定義します。この関数内で、次の描画フレームの内容を記述します。
描画: 毎フレームごとに実行される関数内で、要素の描画を行います。通常は Canvas 要素などを操作して描画を更新します。
再帰的な呼び出し: 描画の内容を更新した後、再び requestAnimationFrame を使って次のフレームの描画を要求します。これにより、連続的なアニメーションが実現されます。

以下は、requestAnimationFrame を使ったCANVAS要素とJavaScriptを使ったアニメーションの例です：

簡単なCanvasアニメーション

<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>CANVAS要素とJavaScriptを使ったアニメーション</title>
  </head>
  <body>
    <!-- キャンバス要素 -->
    <canvas id="canvas" width="600" height="500"></canvas>
    <script>
      // 初期化関数
      function init() {
        // アニメーションを開始するため、最初のフレームを要求
        window.requestAnimationFrame(animate);
      }

      // キャンバス要素を取得
      const canvas = document.querySelector("#canvas");
      // 2D コンテキストを取得
      const ctx = canvas.getContext("2d");
      // アニメーション用のカウンター
      let count = 0;

      // アニメーションのための関数
      function animate() {
        // キャンバス全体をクリアして新しいフレームの準備
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        // フィルスタイルを設定
        ctx.fillStyle = `hsl(${360 * count / 255}, 100%, 50%)`;
        // 四角形を描画
        ctx.fillRect(count, count, 40 + count / 2, 40 + count / 2);
        // カウンターを更新
        count++;
        count %= 256;

        // 次のフレームを要求してアニメーションを続行
        window.requestAnimationFrame(animate);
      }

      // 初期化関数を呼び出してアニメーションを開始
      init();
    </script>
  </body>
</html>

この方法を使うと、ブラウザが最適なタイミングでアニメーションを行うため、滑らかなアニメーションやパフォーマンスの向上が期待できます。

CSSを使ったアニメーション

１つ前の例では、CANVAS要素とJavaScriptを使ってアニメーションを実現しましたが、CSSだけでもアニメーションを実現できます。

CSSを使ったアニメーション

<!DOCTYPE html>
<html lang="ja">
<head>
  <title>CSSアニメーション</title>
  <style>
    /* キャンバスのスタイルを定義 */
    #canvas {
      width: 600px;
      height: 500px;
      background-color: #f0f0f0;
      position: relative;
    }

    /* 四角形のスタイルを定義 */
    #rectangle {
      width: 100px;
      height: 100px;
      background-color: red;
      position: absolute;
      top: 0;
      left: 0;
      /* 四角形のアニメーションを定義 */
      animation: animateRectAndColor 5s linear infinite;
    }

    /* アニメーションを定義 */
    @keyframes animateRectAndColor {
      0%, 100% {
        /* 0% と 100% の色と位置 */
        background-color: hsl(0, 100%, 50%);
        transform: translate(0, 0);
      }
      17% {
        /* 17% の色と位置 */
        background-color: hsl(60, 100%, 50%);
        transform: translate(60px, 60px);
      }
      33% {
        /* 33% の色と位置 */
        background-color: hsl(120, 100%, 50%);
        transform: translate(120px, 120px);
      }
      50% {
        /* 50% の色と位置 */
        background-color: hsl(180, 100%, 50%);
        transform: translate(180px, 180px);
      }
      67% {
        /* 67% の色と位置 */
        background-color: hsl(240, 100%, 50%);
        transform: translate(240px, 240px);
      }
      83% {
        /* 83% の色と位置 */
        background-color: hsl(300, 100%, 50%);
        transform: translate(300px, 300px);
      }
      100% {
        /* 100% の色と位置 */
        background-color: hsl(0, 100%, 50%);
        transform: translate(360px, 360px);
      }
    }
  </style>
</head>
<body>
  <div id="canvas">
    <div id="rectangle"></div>
  </div>
</body>
</html>

Canvas要素とJavaScriptを使用したアニメーションとCSSアニメーションのどちらが優れているかは、使用するケースや特定のニーズによって異なります。一般的には、それぞれの方法には特徴があります。

CanvasとJavaScriptを使用したアニメーションの利点：

柔軟性: JavaScriptを使用すると、アニメーションのフレームごとの制御や複雑な計算を行うことができます。これにより、細かい動きや独自のアニメーションを実装することができます。
動的な描画: Canvasは動的な描画に適しており、リアルタイムのインタラクションやゲームなど、リアルタイム性が重要な場合に有用です。

一方、CSSアニメーションの利点：

簡潔さと効率性: CSSアニメーションはプロパティの変更を簡単に行え、ブラウザによってハードウェアアクセラレーションが行われるため、パフォーマンスが向上することがあります。
シンプルなアニメーションに適している: CSSアニメーションはシンプルなトランジションや基本的なアニメーションに適しています。例えば、ボタンのホバーエフェクトや基本的な要素の移動など。

選択は、プロジェクトの目的や要件、そして実装するアニメーションの複雑さによって変わります。複雑なアニメーションや動的な描画を行う場合はCanvasとJavaScriptを使うことが適していますが、単純なアニメーションや基本的なトランジションの場合はCSSアニメーションが手軽かもしれません。

HTML5で廃止された要素と属性

HTML4.01にあった要素と属性が、HTML5ではいくつか廃止されました^[4]。

HTML5で廃止された要素

HTML5では、タイプフェース・グリフ・斜体などのスタイル・色や各種描線などの物理修飾を意味する要素が廃止されました。廃止された機能は、スタイルシートやスクリプトなどを使って、ドキュメント構造の外で定義することになります。

HTML5で廃止された要素
要素	説明	代替
acronym	頭字語の定義	abbr要素
applet	Javaアプレットの埋込み	object要素
basefont	ページの基本フォントサイズの定義	CSSの font-size プロパティ
big	大きなフォントでテキストを表示	CSSの font-size プロパティに、large, x-large, xx-largeやxxx-largeなどを指定
center	中央寄せでテキストを表示	CSSのmarginプロパティ
dir	ディレクトリーリストを表示	ul要素
font	テキストをフォントの大きさ(size)と色(color)を指定して表示	CSSのfontプロパティ
frame	フレームの定義	代替方法はありません。
frameset	フレームセットを定義	代替方法はありません。
isindex	１行入力フィールドを表示	form要素とinput要素
noframes	noframes セクションを定義	代替方法はありません。
strike	テキストに打消し線を引く	意味が通るならdel要素、そうでなければ s要素
tt	テキストをテレタイプ風に表示	CSSで font-family: monospace
u	テキストに下線を引く	意味が通るならins要素、そうでなければCSSで text-decoration:underline

s 要素は、廃止が取り沙汰されましたが、類似機能の strike 要素は廃止され、s 要素は存続となりました。

HTML5で廃止された属性

HTML5では、いくつかの要素に対する属性が廃止されました。

HTML5で廃止された属性
廃止属性	対象要素
rev	link と a
charset	link と a
shape	a
coords	a
longdesc	img と iframe.
target	link
nohref	area
profile	head
version	html
name	img
scheme	meta
archive	object
classid	object
codebase	object
codetype	object
declare	object
standby	object
valuetype	param
type	param
axis	td と th
abbr	td と th
scope	td
align	caption, iframe, img, input, object, legend, table, hr, div, h1, h2, h3, h4, h5, h6, p, col, colgroup, tbody, td, tfoot, th, thead と tr.
alink	body
link	body
vlink	body
text	body
background	body
bgcolor	table, tr, td, th と body.
border	table と object.
cellpadding	table
cellspacing	table
char	col, colgroup, tbody, td, tfoot, th, thead と tr.
charoff	col, colgroup, tbody, td, tfoot, th, thead と tr.
clear	br
compact	dl, menu, ol と ul.
frame	table
frameborder	iframe
hspace	img と object.
vspace	img と object.
marginheight	iframe
marginwidth	iframe
noshade	hr
nowrap	td と thh
rules	table
scrolling	iframe
size	hr
type	li, ol と ul.
valign	col, colgroup, tbody, td, tfoot, th, thead と tr
width	hr, table, td, th, col, colgroup と pre.

HTML5で追加された要素と属性

HTML5では、さまざまな新しい属性が追加されました。その中には、<detail>要素や<a>要素のdownload属性などがあります。

<detail>要素： <detail>要素は、詳細情報を含むコンテンツを作成するために使用されます。通常、折りたたまれた状態で表示され、ユーザーがクリックすると詳細を表示できます。
例：
```
<details>
  <summary>詳細を見る</summary>
  <p>ここに詳細な情報が入ります。</p>
</details>
```
<a>要素のdownload属性： <a>要素のdownload属性は、リンク先のリソースをダウンロードする際のファイル名を指定するために使用されます。通常、この属性を使用すると、リンクをクリックしたときにブラウザがファイルをダウンロードします。
例：
```
<a href="path/to/file.pdf" download="myfile.pdf">PDFファイルをダウンロード</a>
```

これらの属性は、ウェブページをよりインタラクティブにしたり、ユーザーエクスペリエンスを向上させるために使用されます。

文章構造を表す要素

ヘッダー（ページ上部に表示される部分・rtlの場合はページの右）を構成する文章要素。

footer要素はフッタ（ページ下部に表示される部分・rtlの場合はページの左）を構成する文章要素。

aside

コラムやサイドバーなど、主要なテーマを構成しなし文章要素。

main

主要な文章要素。

article

その内容だけで独立できる内容

section

複数の記事で構成されるところに使う。

nav

nav要素は、他のページやページ内の一部にリンクする、ナビゲーションリンクを持つセクションを表します。

figure

図表。

figcaption

figure要素のキャプション。

nav要素

nav要素は、その項目が目次や索引であることを知らせる。

パンくずリストを作るために用いることができる。

脚註

^ DTDでスキーマを参照しているのでHTML4はSGMLに基づいていると言えます。
^ DTDをDOCTYPE宣言に含まなくなったことにより、HTML5は最早SGMLではなくなり。この事は使用できる文字列実体参照の相違などに影響します。
^ https://html.spec.whatwg.org/multipage/canvas.html#2dcontext
^ HTML Living Standard — Last Updated 22 July 2022(access-date: 2022-07-26)

外部リンク

Wikipedia

ウィキペディアにHTML5の記事があります。

HTML Living Standard

ブラウザ

HTML
HTML5

外部リンク

[1] DTDでスキーマを参照しているのでHTML4はSGMLに基づいていると言えます。

[2] DTDをDOCTYPE宣言に含まなくなったことにより、HTML5は最早SGMLではなくなり。この事は使用できる文字列実体参照の相違などに影響します。

[3] ttps://html.spec.whatwg.org/multipage/canvas.html#2dcontext

[4] HTML Living Standard — Last Updated 22 July 2022(access-date: 2022-07-26)

[1]

[2]

[3]

[4]

HTML5

HTML5の背景と目的

主な特徴

新しいセマンティック要素

マルチメディア要素

フォーム関連の拡張

JavaScript APIの統合

HTML5の構文

HTML Living Standard

HTML5の意義

HTML5の廃止と後継

参考リンク

HTML4.01からの変更点

構造の改善

マルチメディアへの対応

HTML5ソースのサンプル

DOCTYPE宣言について

audio要素とvideo要素

canvas要素

概要

CANVAS要素とJavaScriptを使ったアニメーション

CSSを使ったアニメーション

HTML5で廃止された要素と属性

HTML5で廃止された要素

HTML5で廃止された属性

HTML5で追加された要素と属性

文章構造を表す要素

header要素

footer要素

aside

main

article

section

nav

figure

figcaption

nav要素

脚註

外部リンク