3分でもう怖くない

50代でも分かったHTML5の基礎知識

2012年01月16日 11時30分更新

伊藤和久／Web Professional編集部

ツイートする

　おとそ気分で社内を暇そうにウロウロしていたら「HTML5の常識、わかっていますよね」と怖い怖い一回り年下の編集長から叱られてしまいました。この後、HTML5関係の仕事がくることは間違いがありません。

　しかし、ワタクシは50代。困ったことに、この編集長の「わかる」とワタクシの「わかる」とは程度が違います。これは困りました。正月早々、首筋がすーっと寒くなってしまったので、優しいけど仕事に関しては編集長よりも厳しい二回り年下のデスクに相談。

「HTML 4と比較しながらHTML5の違いをまとめて記事にするところから、始めてみてはどうですか」と先手必勝のようなお題を与えてくれました。どこまでこのお題をこなせるのか。65歳定年になれば、あたりまえの日本企業の縮図のなかで、50歳を過ぎての「HTML5の基礎知識」をまとめてみました。

DOCTYPE宣言が超簡単に

　DOCTYPE宣言が超簡単になったのは有名です。これまでは、

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

とナガナガと呪文のように書いていました。多分、みなさん、この部分は適当にコピー＆ペーストしていましたよね。ところがHTML5では、

<!DOCTYPE html>

だけで済んでしまいます。ついでに、文字コードの宣言も簡単になりました。

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

が、

<meta charset="UTF-8" />

と、こちらも超簡単になっています。

Flash、Silverlightよ、さようなら

　FlashがiPhoneやiPadでサポートされなかったと話題になりましたが、ついにHTML5でも決別宣言です。そもそも、Adobe Flash、Microsoft Silverlightは動画や音声をWebブラウザーで表示しようという意図から始まったわけで、HTMLにFlashはこんな感じで組み込んでいました。

<embed src="video.swf" type="application/x-shockwave-flash" width="400" height="300" bgcolor="#ffff66" pluginspage="http://www.adobe.com/go/getflashplayer_jp" />

ところが、HTML5で動画を表示するのなら、

<video src="video.mp4"></video>

で済んでしまいます。簡単ですね。ちなみに、<video>のcontrols属性で表示される再生や一時停止などのインターフェイスは、ブラウザーによって違います。

文章の一部に特別な意味を持たせるって？

　HTML5では、文章中の一部に特別な意味を持たせるタグが25あります。「文章中の一部に特別な意味を持たせる」ってなんだ？っていうのは、当然の疑問です。例えばリンクを貼ってあるテキスト、コンピューターのコードを表すテキスト、下付き文字、など、などです。新しく増えたタグもあれば、HTML 4で使われていても意味が変わったりしたヤヤコシイタグもあります。

　新設されたタグで目新しいのは、<ruby>、<rt>、<rp>といったルビ関連。

<ruby>中<rt>なか</rt>城<rt>ぐすく</rt></ruby>

と書くと、「中城」と表示された文字の上に小さな文字で「なかぐすく」とルビがふられます。

　意味が変わったタグのひとつは、<i>です。使い方は、

<p>空を見上げると小雪がちらついていました。「<i>寒いわけだ</i>」と独り言をつぶやきながら、会社を後にしました。</p>

となります。<i>～</i>部分は、Webブラウザーでは斜体で表示されます。あれ、これまでと何が違うんだ？っていう感じですが、<i>は声や雰囲気など、他の文章とは区別して表現する時に使うことになりました。横着をして、文字を斜体にする目的で<i>を使ってはいけませんということです。

　もっとヤヤコシイのもあります。重要を意味する<strong>と重要を意味しない太字で表記する<b>のように、どちらも太字で表示されてしまうタグは使い分けにアタマが痛くなります。もちろん、ちゃんと勉強している人にはわかるのでしょうが……。

ディブ、ディブ言ってたのが整理されたみたい

　HTML 4では<div>って多用していました。例えば、

<div id="header">

<div id="menu">

<div id="footer">

<div id="content">

<div class="entry">

というような具合です。ところが、HTML5では<div id="header">を、

<header>

<div id="menu">を、

<nav>

<div id="footer">を、

<footer>

<div id="content">を、

<section>

<div class="entry">を、

<article>

というように、それぞれの意味を示すタグが新設されたので、HTMLを書くのも、読むのもわかりやすくなりました。

フレーム要素がついに廃止に

　かつてWebブラウザーのウィンドウを分割してきた<frame>、<frameset>、<noframes>といったフレーム要素。最近ではあまり見かけなくなりましたが、こんなHTMLを書いてWebブラウザーのウィンドウを3分割しているサイト、以前はよくありましたよね？

<frameset rows="70,*">
　　<frame src="上の長方形の高さは70ピクセルで幅はWebブラウザーのウィンドウ幅">
　　<frameset cols="150,*">
　　　　<frame src="左側の長方形の幅は150ピクセル">
　　　　<frame src="右側の長方形の幅はWebブラウザーのウィンドウ幅から150ピクセルをひいたもの">
　　</frameset>
</frameset>

　ところが、HTML5では「フレームはアクセシビリティに反する」として、<frame>、<frameset>、<noframes>は廃止になりました。

　それじゃあ、どうするのかというと、

<iframe src="in.html" width="400" height="50"></iframe>

と書いて、Webブラウザーのウィンドウに幅400ピクセル、高さ50ピクセルの「枠」を作り、その中に「in.html」に書いたコンテンツを表示します。

　<iframe>はHTML 4でもあった要素ですから、HTML5では<iframe>のみを使う！って覚えておきましょう。

百花繚乱フォームUI

　HTML5になって、入力を受け付けてサーバーに値を送信するためのフォーム、平たく言えばWebブラウザーに表示できる入力欄が充実しました。特に大幅に増えたのが全部で20以上ある<input>のtype属性です。例えば、

<input type="color">

とすると、ドロップダウンで色を選べます。

<input type="range">

とすると、スライダーを使って数値を増減できます。

　さすが、HTML 4に比べてWebアプリケーションが作りやすくなったといわれるHTML5だけのことはあります。

◆

と、ここまで四苦八苦しながら書いてきて、とりあえずデスクにこんなもんでどうでしょうかと、チェックをお願いをしたところ……。

「え～っとですね、対応ブラウザーによってどう違うとか、アタマが痛くなるではなくて詳しく解説するとか、ソースコードを載せたら実行画面もつけるとか。それに、ブロック要素、インライン要素の区分けが廃止になったことに関連してコンテンツ・モデルについても触れてほしいんですが」

　50過ぎのおっさんを傷つけないように精一杯気を使ってもらいましたが、結局、全部にダメ出しをされてしまったうえに、コンテンツ・モデルなどというムズカシイことまで……と途方に暮れていると、怖い怖い編集長が「これを参考にしてください。デスクに編集長から手渡せって言われたんで、渡しておきます。まったく、こういうときだけ編集長、編集長ってアゴで……」。

　手渡されたのが、本日発売の「標準HTML5タグリファレンス」の見本。さっそく、パラパラっとめくってみると、おぉ、あんなことも、こんなこともとデスクに指摘された以上のことが書かれておりました。これを片手に早くデスクのOKをもらえる原稿を書かなくては！