2
008 1 009 1 HTML5 とは何か? 01 マークアップ言語としてのHTML5 HTML5というキーワードが、テクノロジー業界全体を賑わ せています。ではこのHTML5とはなんでしょうか? HTML5 とは、狭義には HTML HyperText Markup LanguageというWebページを作るための言語の最新バージョンを指し ます。HTMLはタグという仕組みで文章を構造化、意味付け するためのもので、このような仕組みを持つ言語をマークアッ プ言語といいます。テキストに対して「ページタイトル」「見 出し」「段落」といった意味を与えたり、画像などを表示する 指示をしたりします。また、Webページの最大の特徴の1つ、 ハイパーリンクもタグで設定します。 HTMLをWebサーバーにアップロードして公開し、HTML の文章の構造や意味をブラウザーが解釈すると、Webページ が表示されます。つまりHTMLはWebページの文章そのもの であり、内容を決める指示書なのです。 Web の仕組み Web ブラウザ ハイパーリンク HTML Web サーバ Section HTML5は単なるマークアップ言語の1バージョンでは なく、Web全体を進化させる大きな変化の象徴です。 HTML5とは何か? 01 タグを入れてテキストをマークアップ(意味付け)する <!DOCTYPE html> <title> ページタイトル </title> <h1> 見出し </h1> <p> 本文本文本文 <a href="link.html"> リンク </a> 本文本文本文 </p> マークアップ言語のみの改良ではない ここまでの説明を読んで、文書の形式(仕様)が変わっただ けでなぜテクノロジー業界に大きな影響があるのかと疑問に感 じた方もいるでしょう。実は「HTML5」というキーワードは、 マークアップだけでなくもっと広い意味の変化も指しています。 狭義のHTML5は、文書の構造を中心としたマークアップ部 分などに関する仕様を指しますが、広義にはその仕様に伴う 周辺技術の進化も指しています。つまり、表現力を強化する CSS3や、プログラミング言語のECMAScript(JavaScript) の改良も、HTML5の大きな進化の一部です。 HTML5は、文書だけでなくアプリにも使えるような強力な Webを作ろうという流れの中で生まれたWebの最新技術を代 表するキーワードなのです。 広義の HTML と狭義の HTML の関係 広義のHTML5 HTML5 マークアップ ECMAScript 「リアルタイムの描画」や「地理情報の取得」「ファイル保存」 「動画再生」などのブラウザーの新しい機能の仕様 CSS3 本書では、第2章でマークアップ言語としてのHTML5の仕 様について説明し、第3章以降は周辺技術を紹介していきます。 ページタイトル HTML5 文書であることを示す 見出し(headline段落(paragraphハイパーリンク 01_gh-HTML5_2015-chap1.indd 8-9 2015/10/03 18:48

HTML5image.gihyo.co.jp/assets/files/book/2015/978-4-7741-7650...008 ななななななななななななななな 1 009 ななななななななななななななな 1 HTML5とは何か?

Embed Size (px)

Citation preview

Page 1: HTML5image.gihyo.co.jp/assets/files/book/2015/978-4-7741-7650...008 ななななななななななななななな 1 009 ななななななななななななななな 1 HTML5とは何か?

008

ななななななななななななななな

1

009

ななななななななななななななな

1

HTML5とは何か? 01

マークアップ言語としてのHTML5

HTML5というキーワードが、テクノロジー業界全体を賑わせています。ではこのHTML5とはなんでしょうか? HTML5とは、狭義にはHTML(HyperText Markup Language)というWebページを作るための言語の最新バージョンを指します。HTMLはタグという仕組みで文章を構造化、意味付けするためのもので、このような仕組みを持つ言語をマークアップ言語といいます。テキストに対して「ページタイトル」「見出し」「段落」といった意味を与えたり、画像などを表示する指示をしたりします。また、Webページの最大の特徴の1つ、ハイパーリンクもタグで設定します。

HTMLをWebサーバーにアップロードして公開し、HTMLの文章の構造や意味をブラウザーが解釈すると、Webページが表示されます。つまりHTMLはWebページの文章そのものであり、内容を決める指示書なのです。

Webの仕組みWebブラウザ

ハイパーリンク

HTMLWebサーバ

Section

HTML5は単なるマークアップ言語の1バージョンではなく、Web全体を進化させる大きな変化の象徴です。

HTML5とは何か?01 タグを入れてテキストをマークアップ(意味付け)する

<!DOCTYPE html>

<title>ページタイトル </title>

<h1>見出し </h1>

<p>本文本文本文<a href="link.html">リンク </a>

本文本文本文 </p>

マークアップ言語のみの改良ではない

ここまでの説明を読んで、文書の形式(仕様)が変わっただけでなぜテクノロジー業界に大きな影響があるのかと疑問に感じた方もいるでしょう。実は「HTML5」というキーワードは、マークアップだけでなくもっと広い意味の変化も指しています。

狭義のHTML5は、文書の構造を中心としたマークアップ部分などに関する仕様を指しますが、広義にはその仕様に伴う周辺技術の進化も指しています。つまり、表現力を強化するCSS3や、プログラミング言語のECMAScript(JavaScript)の改良も、HTML5の大きな進化の一部です。

HTML5は、文書だけでなくアプリにも使えるような強力なWebを作ろうという流れの中で生まれたWebの最新技術を代表するキーワードなのです。

広義のHTMLと狭義のHTMLの関係

広義のHTML5

HTML5マークアップ ECMAScript

「リアルタイムの描画」や「地理情報の取得」「ファイル保存」「動画再生」などのブラウザーの新しい機能の仕様

CSS3

本書では、第2章でマークアップ言語としてのHTML5の仕様について説明し、第3章以降は周辺技術を紹介していきます。

ページタイトルHTML5文書であることを示す

見出し(headline)段落(paragraph)ハイパーリンク

01_gh-HTML5_2015-chap1.indd 8-9 2015/10/03 18:48

Page 2: HTML5image.gihyo.co.jp/assets/files/book/2015/978-4-7741-7650...008 ななななななななななななななな 1 009 ななななななななななななななな 1 HTML5とは何か?

010

ななななななななななななななな

1

011

ななななななななななななななな

1

Web の歴史 02

HTMLの発展

「5」という数字が示すように、HTML5は突然現れたわけではありません。HTMLはコンピューター用の文書フォーマットとして誕生し、もともとは研究機関で文献を書くために使われていました。初期はほとんどテキストだけの地味なものでしたが、数度の改訂を経て、ユーザーの入力を受け付けるフォームや、表組みや文字色などの書式設定が付け加えられ、HTMLはより多くの機能を持ち表現力豊かな存在へと成長し、多くの人に使われるようになります。

HTMLの改訂

HTML4.0HTML4.01 HTML5HTML3.0

HTML3.2HTML2.0HTML1.0

・strictモード・CSSの本格的 な利用

最 新・表組み・文字色

・文書型定義・フォーム

最初の仕様公開

なお、HTML 4.01の後に、機械が解釈しやすいよう厳密さを増したXHTMLが作られましたが、現在ではシンプルで書きやすいHTML5が主流で、XHTMLはあまり使われません。

HTMLの進化は機能が増える方向ばかりではありません。第2章で説明するように、CSSとの役割分担を明確にするために廃止されたものも数多くあります。

Section

現在広く使われるHTMLとCSS、JavaScript(ECMA Script)はそれぞれ異なる出自を持ちます。

Webの歴史02 CSSとJavaScriptの登場

HTMLはあくまで文書の構造や意味を表すことに特化したものです。そこで、見た目を変更するためにCSS(Cascading Style Sheets)が、プログラミングのためにJavaScriptが使われています。現在のWebページは、この3つの言語で書かれたファイルを組み合わせて作られています。

CSSとJavaScript

HTML

デザイン性 インタラクティブ性

CSSJavaScript

CSSとJavaScriptはそもそもの目的も異なりますが、普及するまでの経緯も大きく違います。CSSは特定のブラウザーに依存しない標準化された仕様として、1996年に策定されました。ところが、当時すでにCSSをサポートしないブラウザーが普及していたため、一般的に使われるようになるのは、2000年代の半ば頃まで待たなければなりませんでした。

一方、JavaScriptは同じ1996年にNetscape Navigator 2.0の独自機能として登場しました。ライバルの Internet Explorer(以降IE) にも類似機能が搭載されたため、 一気に当時の2大ブラウザーで利用可能な状態となります。その後、 これらの機能の微妙な違いが問題となったため、ECMAScriptという標準仕様が策定されました。

つまり、CSSは仕様が先、JavaScriptは実装が先に生まれたのです。いずれも現在では標準化されて広く利用されていますが、その誕生から発展までの状況はまったく逆でした。

01_gh-HTML5_2015-chap1.indd 10-11 2015/10/03 18:48