HTML/HTML5
MediaWiki編集におけるhtml5対応については w:Help:ウィキテキストにおけるHTML を参照。 HTML5（エイチティーエムエルファイブ）とは、HTML 4.01の後継として2014年に勧告された規格である。
HTML4.01からの変更点[編集]
構造の改善[編集]
人が見てもコンピュータが見ても解読しやすい構造とするため、デザインに関係する部分はスタイルシートに記述し、要素や属性でデザインを指定することはしないという姿勢がより徹底された。そのためfont要素やcenter要素などいくつかの要素が廃止され、table要素におけるwidth属性やalign属性なども廃止された。HTML4.01で非推奨であったb要素やu要素などは存続しているが、要素の意味づけが変更されている。header, footer, section, navなどセクショニング要素が新たに追加され、文書構造をより簡潔に記述できるようになった。
マルチメディアへの対応[編集]
マルチメディアへの対応も目的の一つであり、audio, video, embedなどの要素が追加された。
HTML5ソースのサンプル[編集]
<!DOCTYPE html>
<html lang="ja">
<head>
<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>
</section>
</main>
</body>
</html>
DOCTYPEについて[編集]
DOCTYPE とは、そのドキュメントの種類を指定しています。HTML4では、このタグ内で「!DOCTYPE html」以降にさらに設定文を明記することが推奨されていましたが、しかしHTML5では <!DOCTYPE html> だけにするように決まりました。
audio要素とvideo要素[編集]
audio要素はオーディオを再生、video要素は動画を再生する。embed要素やobject要素による埋め込みと異なり、この方法ではプラグインを介さずブラウザの機能で直接マルチメディアの再生を行うことが出来る。ただし、ブラウザにより対応フォーマットは異なる。
<!-- audio要素の場合 -->
<audio autobuffer="true" autoplay="true" controls="true">
<source src="example.ogg" type="audio/ogg">
<source src="example.mp3" type="audio/mp3">
（ここに未対応環境への代替コンテンツ）
</audio>
<!-- video要素の場合 -->
<video width="320" height="240" autobuffer="true" autoplay="true" controls="true">
<source src="file.ogv" type="video/ogg">
<source src="file.mp4" type="video/mp4">
（ここに未対応環境への代替コンテンツ）
</audio>
canvas要素[編集]
canvas要素はダイナミックなビットマップ（ベクター）画像を描画する。2次元コンピュータグラフィックスはSVG、3次元コンピュータグラフィックスはWebGLを用いて実現される。
<canvas id="canvas" width="320" height="240">
（ここに未対応環境への代替コンテンツ）
</canvas>
JavaScriptを使用するとcanvasに画像を描くことができる。
var canvas = document.querySelector("#canvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "rgb(0,0,100)";
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 canvas = document.querySelector("#canvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "rgb(0,0,200)";
ctx.fillRect(100, 100, 200, 200);
</script>
</body>
</html>
なお、このコードは、実行するとブラウザ画面に青い長方形を描きます。
ctx.fillRect(100, 100, 200, 200);
の書式は、上記htmlコード例の設定なら、
ctx.fillRect(始点x座標, 始点y座標, 横幅, 縦幅);
です。（第3引数と第4引数は、終点の座標位置ではないので、混同しないように注意しましょう。）
ページ内がいくつかの文書に分割される場合[編集]
header要素[編集]
header要素はヘッダ（ページ上部に表示される部分）を書くために利用する。
[編集]
footer要素はフッタ（ページ下部に表示される部分）を書くために利用する。
aside[編集]
余談やサイドバーなど、メインでない要素であることを示す。
main[編集]
main要素は、そのページの主要な要素であることを示す。
main要素により、ヘッダやフッタ、サイドバーなどと区別することができる。
しかし、html5の古いバージョンでは、1つのドキュメントに1つのmain要素しか使えないので、使用のさいには気をつけること。
[編集]
nav要素は、その項目が目次や索引であることを知らせる。
パンくずリストを作るために用いることができる。
HTML4対応ファイルを改修する場合[編集]
HTML5で廃止された機能を使う場合（たとえば frameset などはhtml5で廃止された）、HTML4に準拠してHTMLファイルを書く場合があります。
このような場合にも、header要素やnav要素を使いたい場合、html4仕様と矛盾しないでhtml5を意識したコードを書く方法があります。
それは class 属性を利用してdivタグで、
<div class="header">
</div><!-- /header -->
のように書く方法です。
こうすることで、将来もし、html5のどんなタグに対応するかを説明できるので、集団作業では色々と便利です。
なお、 <!-- --> は非表示タグというもので、コメント文みたいなのを書くのに使われます。その非表示タグ内に書かれた文字はブラウザ画面には非表示されません。