HTML

HTMLとは

　HTMLとは「Hyper Text Markup Language（ハイパーテキスト・マークアップ・ランゲージ）」のことで、Webページの土台となるファイルを作成するために開発された言語です。現在、インターネット上で公開されてるWebページのほとんどは、HTMLで作成されています。

　HyperText Markup Languageを日本語で表すと、「ハイパーテキストに目印をつける言語」といった感じになります。ハイパーテキスト（HyperText）とは、ハイパーリンクを埋め込むことができる高機能なテキストです。ハイパーリンクというのは、ウェブページで下線の付いたテキストなどをクリックすると別ページへ移動する、あのリンクのことです。

　ハイパーテキストでは、Webページから別のWebページにリンクをはったり、Webページ内に画像・動画・音声などのデータファイルをリンクで埋め込むことができます。 HTMLには、このハイパーリンク機能で関連する情報同士を結びつけて、情報を整理するという特徴があります。

　また、目印をつける（Markup）というのは、文書の各部分が、どのような役割を持っているのかを示すということです。HTMLは、主にページ内の文章の構成や、文章の役割を示して情報を構造化し、これは見出しでどこに配置するのか、段落のどこまでをひとまとまりにするか、これはリンクでクリックするとどのページに移動するのか、表、リストなど、文章が構成されている要素がどのような役割を持っているかを明確化する目的で使用し、基本的には世界中の Webページ作成者にとって使いやすい仕様を目指しているものです。

　HTMLでは、文書内の各部分に < と > で挟まれた「タグ」と呼ばれる特殊な目印をつけて、その部分がどんな要素なのかを明確にすることで、コンピュータがその文書の構造を理解できるようになります。具体的には、検索エンジンが Webページの構造を把握して解析したり、ブラウザが Webページ内の各要素の意味を理解して閲覧しやすいように表示することなどが可能になります。

　HTMLは、CSS（Cascading Style Sheets）や JavaScript・TypeScriptとともに Webページを構築するために用いられます。HTMLではタグで必要な文書を挟み込むだけで使えるため、Web開発に携わる人の多くが、最初に学習する言語でもあります。

文字の表示例

HTML for the first time.

HTML source


<p>HTML for the first time.</p>

　この例でいうと <p> と </p> が「タグ」となり、文字列を含む、開始タグの <p> から、終了タグの </p> までのひとまとまりを「要素」と言います。今回この要素は pタグを使っていますので「段落（Paragraph）」を意味します。よって、「HTML for the first time.」という文字列が１つの段落である事がわかります。

※最後のタグ（終了タグ）には「/」が入ることに注意してください。閉じ忘れなどがあると、表示が崩れる原因になります。

　この pタグを h1タグに書き替えると、同じ文字列でも「見出し(heading)」という意味になり、一般的には大きく表示されて段落とは違い、見出しである事がわかりやすい表示になります。

文字の表示例

HTML for the first time.

HTML source


<h1>HTML for the first time.</h1>

　このように、タグによって文字列にさまざまな意味を持たせることができます。HTMLには多くのタグがあります。必要なものから少しづつ覚えていきましょう。

　なお、HTMLは、Markup Language の名の通りマークアップ言語（文書にマークをつける言語）であって、プログラミング言語（アルゴリズムを構築可能な言語）ではありません。そのため、HTMLのみで Webページに動きをつけたり、ログイン処理を行うなどの処理ができるわけではありません。

要素と属性

　まずは、HTMLの構成要素である、「要素」と「属性」のふたつについて解説します。

要素（element）

　見出しや段落、ボックスなどの Webページを区切る部品を指します。<p> といった形で、< と > でくくられて使用され、< と > の間に入力されるタグの種類によって、p要素などと呼ばれます。

　要素は基本的に開始タグと終了タグをセットで使用します。

表示例

HTML for the first time.

HTML source


<p>HTML for the first time.</p>

　開始タグ <p> と終了タグ </p> で囲まれる事で要素として機能します。

　しかし中には、要素には内容を持たない「空要素」と呼ぶものもあります。

空要素の例


<hr>

　この hr要素は、段落を区切る際などに使う要素なのですが、終了タグがありません。こういった要素を「空要素」と呼びます。

属性（attribute）

　要素に付加する情報です。例えば、src="" などで表現されるもので、要素だけでは不足している情報を属性で付加することで複雑な表示を行うことができます。


<img src="photo.png">

　このタグは、img要素（画像を表示させる要素）の src（ソース）属性です。src属性は、sourceの略で、データの位置を指定します。この例の場合、img要素で表示する画像は src属性に入力されている photo.png となります。

HTML5とは

　インターネットで検索を行うと、HTML4や HTML5などの表記を見かけるかもしれません。実は HTMLはバージョンがいくつかあり、そのバージョンによって HTML4、HTML5など数字がつきます。

　HTML5とは、HTMLのバージョン5、改訂第5版です。HTMLの最新バージョンで、以前のバージョンである HTML4と比較すると動画や音声の再生、グラフィックの描画が容易に可能になりました。さまざまな属性が追加され、今までは JavaScriptで対応していたアニメーション などの処理の一部も HTML5で行えるようになっています。

　今後 Web開発では HTML5が主流になるため、これから習得を目指すのであれば HTML5を学習するのがよいでしょう。

　HTML4や XHTML1の目的は、HTMLタグで構造付けされた HTML文書を作成することです。これらのバージョンの HTMLでは、作成された情報をただ公開している分には良いのですが、ユーザーの操作に反応して何らかの情報を処理する、いわゆる Webアプリケーションを作成するには機能不足な面があります。

　HTML5では、これまでの HTML4と同じような HTML文書を作成する機能が改良されているのに加えて、Webアプリケーションを開発するための様々な仕様が新たに盛り込まれています。

　HTML5が普及した際には、今までプラグインなどの HTML以外の技術を併用しないと実現できなかった機能の幾つかが、標準の HTMLや JavaScriptで比較的シンプルに実現できるようになっています。

HTMLと CSSの違い

　CSSは HTMLをデザインする言語です。HTMLで文書構造を示し、CSSでそのデザインを指定します。HTMLのタグに組み込まれたスタイル属性の指定をブラウザが読み取り、CSSの指示に沿ってさまざまな装飾を行うことで、Webページをきれいに見せます。

　HTMLは単体で Webページを構築することができますが、CSSは単体では使用できません。HTMLと CSSは必ずセットで使用されるため、マークアップエンジニア、フロントエンドエンジニア、Webデザイナーにとって、HTMLと CSSのふたつの習得はとても重要です。

HTMLと JavaScriptの違い

　JavaScriptはオブジェクト指向スクリプト言語で、ブラウザ上で動く数少ない言語の一つです。HTMLと違い、プログラミング言語であることから、フォーム入力値の検証によって正しい内容が入力されているかのチェック、ページを再読み込みせずに新しいコンテンツを読み込む、などの UI/UXの向上に役に立ちます。また、UI/UX以外に、Web解析や Web広告などの現場でも多く使用されています。

　Web開発では CSSと並んで必須ともいえる言語であるため、まだ触れたことがないという人は HTMLと同時に学習するのをおすすめします。

HTMLの種類

　現在 Webページで使用されている HTMLには、HTML（HTML4）、XHTML、HTML5などのいくつかの種類があります。基本的なタグの属性や要素は共通ですが、それぞれ使用できるタグや記述のルールなどが異なります。

　どのような特徴があるのか、１つずつ見ていきましょう。

HTMLの特徴

　HTML5と区別するため HTML4と呼ばれることもあります。長らく Webページの制作で使用されてきたため、未だに多くの Webページが HTML4で記述されています。

　HTML4は、ブラウザが解釈できれば記述に表記揺れや曖昧さがあっても問題なく表示できます。また、タグに大文字と小文字が混在した状態で記述しても問題ない、<hr> <br> のような空要素も終了させる必要がないなどの特徴があります。

　XHTMLや HTML5と比較すると表現できることは限られますが、対応しているブラウザが多く、一部の古いブラウザを使用している環境でも表示が崩れません。

XHTMLの特徴

　XHTMLは HTMLと XMLの特徴を組み合わせた Webページを作るために作られた言語です。XMLの「きちんと記述ルールに沿って記述しないと表示できない」という特徴を持つため、タグは全て小文字で統一する必要があります。

　また、全てのタグに終了タグが必要となるため、空要素は <hr /> <br /> のように末尾を /> で終了させます。

　このほか、ページの先頭に XML宣言が必要になります。

XML宣言の例


<?xml version="1.0" encoding="UTF-8"?>

HTML5の特徴

　HTML4では実装されていないさまざまなタグが追加されています。一例として <header> <footer> のようなタグを用いることができるようになりました。また、フォーム関係の機能が強化され、より UXが向上しています。

　一方で HTML4の特徴を継承しているため、XHTMLと異なり記述に曖昧さがあっても表示に問題は生じません。また、<hr> <br> のような空要素は、XHTMLのように終了させても、HTML4のように終了させなくても使用できます。

HTMLの限界

　HTMLが初めて仕様化されたのがいつかを覚えている人は少ないでしょう。HTMLというマークアップ言語は、もともとは、W3Cのディレクターであるティム・バーナーズ＝リー氏が考案しました。HTMLだけでなく、URLや HTTPもあわせて設計されました。その後、HTML1.0として仕様化されたのは 1993年のことです。これがウェブという世界の幕開けでした。

　しかし、W3Cにおける HTMLの開発は、HTML4で一旦終了することとなります。W3Cは、セマンティック・ウェブを理想に掲げ、記述方法があまりに柔軟な SGMLベースの HTMLから、XMLベースの XHTMLへシフトすることになったのです。マークアップが XMLベースになることで、マシンからも読みやすくなります。すべてのウェブ・コンテンツがマシン可読なデータベースとなる世界が期待されていました。

　しかし、マシンが読みやすくなることと引き換えに、人にとっては、とても難しいマークアップとならざるを得ませんでした。

　XHTML1.0は HTML4.01との互換性が考慮されていたため、広く普及しました。しかし、XHTML1.1からは、より XML色が濃いものとなり、新たな機能はモジュールという形式をとることとなりました。有名なモジュールとしては、ベクター・グラフィックを扱う SVG、数式を扱う MathML、そして、日本では馴染みの深いルビを扱う Rudy Annotationなどが挙げられるでしょう。

　W3Cは、XHTMLをさらに進化させるべく XHTML2.0の策定に取り掛かりました。XHTML2.0は、下位互換性をほとんど考慮せず、理想を突き進むことになりました。しかし、この理想に、現実は付いてきませんでした。

　現実的に、ほとんどのウェブ・ページは、HTML4.01または XHTML1.0で作られており、XHTML1.1や XHTML2.0が使われることはほとんどないといっても過言ではない状況となっていました。

　XHTMLではモジュールという形で、様々な機能が追加できる枠組みが用意されているにも関わらず、XHTMLが利用されていない以上、ウェブは進化することができません。ブラウザーの実装と、ウェブ制作者がそれを採用するモチベーションを、XHTML2.0は手に入れることができなかったといえます。

HTML5の誕生

　一方、ブラウザーベンダーは、XHTML2.0を実装する気配がないどころか、この W3Cの方向性に対して疑問を抱くようになりました。

　このような状況の中で、下位互換性などウェブ作成者の意向を反映し、そして、さらなる発展を実現できる新しい HTML策定のため、2004年に、Opera、Mozilla、Appleは、WHATWG（Web Hypertext Application Technology Working Group）というワーキング・グループを独自に設立しました。その時点では HTML5という言葉はなく、「Web Applications 1.0」と「Web Forms 2.0」という名前で仕様が作成されていました。

　W3Cがウェブ制作に求められている機能を実現する仕様を策定しても、それをブラウザーベンダーが実装しない限りは絵に描いた餅でしかありません。XHTML2.0や XHTML用のモジュールは、まさにこの状態だったと言えます。

　この状況に憂慮してか、W3Cは 2007年3月に、後方互換性を考慮した HTML策定に着手することを報道発表しました。これで、公式に WHATWGの方向性を W3Cも共有することになったのです。

　2007年4月になり、WHATWGは、W3C HTMLワーキンググループに対して、WHATWGで策定している仕様を、W3Cで「HTML5」という名前で策定を開始してはどうかと打診し、W3Cはそれを受け入れ、今に至っています。「HTML5」の誕生です。

　その後、W3Cは、2009年7月に XHTML2 WGの活動を 2009年末に終了し、以降は HTML5に注力すると発表しました。W3C HTMLワーキンググループは HTML5策定にリソースを使うこととし、事実上、HTML5は次世代 HTML標準となったのです。