HTML/HTML5

出典: フリー教科書『ウィキブックス（Wikibooks）』
ナビゲーションに移動 検索に移動
Wikipedia
Wikipedia
 ウィキペディアに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要素[編集]

詳細は「JavaScript/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 １行入力フィールドを表示 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要素[編集]

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

aside[編集]

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

main[編集]

主要な文章要素。

article[編集]

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

section[編集]

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

nav[編集]

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

figure[編集]

図表。

figcaption[編集]

figure要素のキャプション。

nav要素[編集]

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

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

脚注[編集]

  1. ^ 2019年にW3CとWHATWGは「HTML Living StandardをHTMLとDOMの唯一の標準とし、W3Cは今後HTMLとDOMに関する標準の策定を行わない」旨合意したことを発表しました。この事により2021年6月現在のHTML5の（唯一の）標準は、HTML Living Standardのみとなっています。
  2. ^ DTDでスキーマを参照しているのでHTML4はSGMLに基づいていると言えます。
  3. ^ DTDをDOCTYPE宣言に含まなくなったことにより、HTML5は最早SGMLではなくなり。この事は使用できる文字列実体参照の相違などに影響します。
  4. ^ https://html.spec.whatwg.org/multipage/canvas.html#2dcontext
  5. ^ HTML Living Standard — Last Updated 22 July 2022(access-date: 2022-07-26)

外部リンク[編集]

このページ「HTML/HTML5」は、まだ書きかけです。加筆・訂正など、協力いただける皆様の編集を心からお待ちしております。また、ご意見などがありましたら、お気軽にトークページへどうぞ。
"https://ja.wikibooks.org/w/index.php?title=HTML/HTML5&oldid=212024" より作成