HTML/HTML5
MediaWiki編集におけるhtml5対応については w:Help:ウィキテキストにおけるHTML を参照。 HTML5(エイチティーエムエルファイブ)とは、HTML 4.01の後継としてW3Cにより2014年に勧告された規格である[1]。
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によるスキーマが参照する仕様でした[2]。しかしHTML5では <!DOCTYPE html>
だけにするように決まりました[3]。
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要素編集
概要編集
canvas要素はダイナミックなビットマップ(ベクター)画像を描画する。二次元コンピュータグラフィックスはCanvas APIにより実現され[4]、ハードウェアアクセラレーションされた二次元及び三次元コンピュータグラフィックスは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引数は、終点の座標位置ではないので、混同しないように注意しましょう。)
簡単な動画の例編集
[TODO:この例では、setInterval()を使って render() を(進捗によらず)キックしていますが、requestAnimationFrame()を使って書き直すべきです]
アニメーション処理などをしたい場合、円や四角などの簡単な図形を動かすだけなら、JavaScriptと要素を連携させれば、ウェブブラウザで簡単な図形がアニメーションする動画を表示させられる。
詳しい解説は、たとえばモジラ公式サイト"Basic animations" などにある。もしかしたらブラウザの種類によって挙動が変わるかもしれないので、実用の際には都度、実機で確認のこと。
下記のコード中にあるsetInterval
の書式と内容は
setInterval(function, delay)
- function で指定した関数を delay ミリ秒ごとに繰り返し実行、
である。
- 簡単なcanvasアニメ
<!DOCTYPE html> <html lang="ja"> <head> <title>簡単なアニメーション</title> </head> <body> <canvas id="canvas" width="600" height="500"></canvas> <script> let ctx = canvas.getContext("2d"), count = 0; setInterval(() => { 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; }, 5); </script> </body> </html>
HTML5で廃止された要素と属性編集
HTML4.01にあった要素と属性が、HTML5ではいくつか廃止されました[5]。
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 1行入力フィールドを表示 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で追加された要素と属性編集
[TODO: detail要素や、a要素のdownload属性の様なHTML5で追加された属性]
文章構造を表す要素編集
header要素編集
ヘッダー(ページ上部に表示される部分・rtlの場合はページの右)を構成する文章要素。
編集
footer要素はフッタ(ページ下部に表示される部分・rtlの場合はページの左)を構成する文章要素。
aside編集
コラムやサイドバーなど、主要なテーマを構成しなし文章要素。
main編集
主要な文章要素。
article編集
その内容だけで独立できる内容
section編集
複数の記事で構成されるところに使う。
編集
nav要素は、他のページやページ内の一部にリンクする、ナビゲーションリンクを持つセクションを表します。
figure編集
図表。
figcaption編集
figure要素のキャプション。
編集
nav要素は、その項目が目次や索引であることを知らせる。
パンくずリストを作るために用いることができる。
脚注編集
- ^ 2019年にW3CとWHATWGは「HTML Living StandardをHTMLとDOMの唯一の標準とし、W3Cは今後HTMLとDOMに関する標準の策定を行わない」旨合意したことを発表しました。この事により2021年6月現在のHTML5の(唯一の)標準は、HTML Living Standardのみとなっています。
- ^ 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)