SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

ここが違う!サンプルで見るHTML5

HTML4から変化したHTML5のマークアップ
ここが違う!サンプルで見るHTML5(2)

第2回 文書構造とセマンティクス


  • X ポスト
  • このエントリーをはてなブックマークに追加

 連載第2回目では、HTML5で新たに導入された要素を解説する前に、HTML5のタグの書き方について解説します。まずは、旧来から使われてきたHTML4.01のマークアップをご覧ください。

  • X ポスト
  • このエントリーをはてなブックマークに追加

はじめに

 この連載では、今日のウェブ業界の流行語となっている「HTML5」をとりあげ、全6回に分けて、これまでの技術とどのような違いがあるのか、具体的にサンプルのコードを示しながら解説していきます。

過去の連載も読む

HTML5マークアップの基本

 HTML5で新たに導入された要素を解説する前に、HTML5のタグの書き方について解説します。まずは、旧来から使われてきたHTML4.01のマークアップをご覧ください。

HTML4.01のマークアップ
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>ページ・タイトル</title>
<style type="text/css">/* CSS */</style>
<script type="text/javascript">/* JavaScriptコード */</script>
</head>
<body>
...
</body>
</html>

 1行目には、どの種類のHTMLで書かれたのかを宣言するための文書型宣言が書かれています。とても長い記述なので、恐らく一字一句覚えている方は少ないでしょう。

 head要素の中には、このHTMLページに関連する情報が書かれています。まずmeta要素を使って文字エンコーディングが指定されています。これは、このHTMLページがどんな文字コードで作られているのかを表しています。そして、style要素にはCSSが、script要素にはJavaScriptが記述されますが、これらの要素にはtype属性がマークアップされています。

 以上の点を踏まえて、HTML5のマークアップをご覧ください。

HTML5のマークアップ
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ページ・タイトル</title>
<style>/* CSS */</style>
<script>/* JavaScriptコード */</script>
</head>
<body>
...
</body>
</html>

 ご覧の通り、非常にシンプルになりました。これだけシンプルにしてしまうと、HTML5をサポートしたブラウザでしか、正しくページが表現されないのではないかと心配してしまうことでしょう。ところが、Internet Explorer 6でも、期待通りに動作します。

 実は、これらの変更点は、旧来のブラウザでも動作するよう考慮して考え出されたものなのです。では、それぞれの変更点について詳しく見ていきましょう。

文書型宣言

 HTML4.01やXHTML1.0の文書型宣言は、非常に長い記述を必要としました。ところが、ブラウザはすべての記述を判定しているわけではありません。また、XHTML1.0の文書型宣言を記述したからといって、そのページがXMLで書かれたものとして処理されるわけではありません。

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

 結局のところ、この長い記述にほとんど意味がなかったのです。実際には、本来の用途とは別に、レンダリング・モードを振り分けるための識別文字として使われていたに過ぎませんでした。

 レンダリング・モードとは、HTMLページをどのように表示するのかを表します。このレンダリング・モードには、標準モードと互換モードがあります。レンダリング・モードが違うと、同じマークアップ、同じCSSでも、見た目が違ってきます。現在では標準モードとなるよう、文書型宣言を記述することが多いと言えます。

 HTML5の文書型宣言は、どのブラウザでも標準モードでレンダリングされることを念頭に置いて考え出されています。

HTML5のDOCTYPE宣言
<!DOCTYPE html>

 これによって、Internet Explorer 6ですら標準モードでページをレンダリングすることになります。

文字エンコーディング

 旧来のHTMLでは、meta要素に文字エンコーディングを指定しましたが、実際にはContent-Typeを指定する方式でした。

HTML4.01の文字エンコーディング指定
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

 しかし、HTML5で大幅に簡素化されました。HTML5では、meta要素に新たにcharset属性が規定されました。この属性の値に、文字エンコーディングを表す文字列を指定します。

HTML5の文字エンコーディング指定
<meta charset="utf-8">

 これも、旧来のブラウザで文字エンコーディング指定を問題なく認識します。

CSSとスクリプトのタイプ

 旧来のHTMLでは、style要素とscript要素には、type属性を指定する必要がありました。

HTML4.01のCSSとスクリプトのマークアップ
<style type="text/css">/* CSS */</style>
<script type="text/javascript">/* JavaScriptコード */</script>

 ほとんどのサイトでは、スタイルであればCSS、スクリプトであればJavaScriptであることは自明です。そのため、この場合はtype属性を省略できます

HTML5のCSSとスクリプトのマークアップ
<style>/* CSS */</style>
<script>/* JavaScriptコード */</script>

 もちろん、どのブラウザでも問題なく機能します。

次のページ
セクションとアウトライン

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
ここが違う!サンプルで見るHTML5連載記事一覧

もっと読む

この記事の著者

羽田野 太巳(ハタノ フトミ)

有限会社futomi 代表取締役1971年岐阜県生まれ。ホスティングサーバー(共用サーバー)でも利用できるウェブ・アプリケーションの独自開発・販売を手がける。主にPerlによるCGI制作が中心。オーダーメードのウェブ・アプリケーション制作/ウェブ・サーバー管理業務も手がける。2007年にHTML5.JPを開設し、Canvasを使ったJavaScriptライブラリの開発、HTML5の最新情報の発信、HTML5関連仕様の日本語訳を手がける。主な著書に『徹底解説HTML...

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/5600 2011/01/05 16:45

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング