HTML5 入門

公開日:
更新日:
0HTML5

HTMLを始めよう

HTMLを始めるためには、テキストエディターとブラウザがあれば今すぐに始めることができます。お気に入りのツールを手に入れたら、クイックスタートとして下記のコードを新規のテキストにコピーし、"hello.html" の名前で保存してからブラウザで開いてみて下さい。保存する際は、文字コードに "UTF-8" を忘れずに指定しましょう。


<!DOCTYPE html>
<html lang=ja>

<!-- head部 -->
<head>
<title> 初めてのHTML </title>
<meta charset="UTF-8">
</head>
<!-- body部 -->
<body>
<h1> 初めてのHTML </h1>
<p> Hello, World Wide Web. </p>
</body>
</html>
 HTMLでHello, World (Wide Web)

開始タグと終了タグ

HTMLは、英単語が2つの不等号 "<" , ">" で囲まれた "タグ" と呼ばれる要素で構成されています。タグには "開始タグ""終了タグ" があり、対になっています。例えば、htmlタグの開始タグは <html> で、終了タグは </html> となります。終了タグには、開始タグの名前の前に / を入れて記述します。タグは、開始タグと終了タグに囲まれた範囲において、ドキュメントの内容をどのように表示するか決定します。


ただし、metaタグ等の一部のタグは終了タグがありません。その場合、<meta ... /> のように、後方に / を付けて区別する書き方もあります。本来はXHTMLの記述方法であるため、HTML4.01では非推奨の記述方法でしたが、HTML5からは正しい文法となりました。

HTMLの構造

HTMLの構造は、<html> で始まり、</html> で終わります。htmlタグは、ドキュメント全体がHTMLで書かれていることをブラウザに伝えています。ブラウザは、ドキュメントをHTMLとして読み込み、レンダリングを行うことで正しく表示されます。


HTMLドキュメントは、<head>, <body> の2つの主要な構造で成り立っています。head部には、ドキュメントに関する情報を記述し、body部にはブラウザに表示したい内容を記述します。

コメント

HTMLドキュメントはタグが多く埋め込まれているため、コメントを付けた方が読みやすくなります。コメントは、特殊なタグ "<!--" , "-->" で囲まれた範囲に記述します。コメントはドキュメントの一部ですが、ブラウザ上には表示されません。ただし、HTMLドキュメントのソースコードは誰でも見ることができるため、コメントに重要な情報は記述するべきではありません。

テキスト

タグでもコメントでもないものはテキストデータとして扱われ、ブラウザによって表示されます。HTMLは、テキスト主体のドキュメントに対して定義付けを行うための言語であるため、テキスト関連のタグが最も多いものになります。マルチメディアデータ(画像、音楽、動画)も、ユーザがコンテンツを楽しむ上では確かに重要ですが、HTMLにとっては付け足しに過ぎません。

テキストの装飾

テキストの文字には、サイズ、色、書体など様々な装飾を施すことが可能です。HTMLの本質はテキストの定義付けとなるため、テキストの装飾はCSS(Cascading Style Sheets)で行います。CSSは、テキストの定義と装飾を分離するための仕様となります。


<!DOCTYPE html>
<html lang=ja>

<!-- head部 -->
<head>
<title> 初めてのHTML </title>
<meta charset="UTF-8">
<!-- CSS部 -->
<style> p { color:blue; } </style>
</head>
<!-- body部 -->
<body>
<h1> 初めてのHTML </h1>
<p> Hello, World Wide Web. </p>
</body>
</html>
 CSSでpタグの文字色を青色に装飾

タグと属性

HTMLは、ドキュメントにタグと呼ばれるマークアップを埋め込む言語です。マークアップとは、指定した範囲の文章を "見出し" や "段落" といった意味付けを行うマーキングを意味します。また、タグは一般的な英単語、もしくはそれらを省略した頭文字で表記されます。例えば、"<p>" タグは "Paragraph" の頭文字で、段落を表します。


すべてのタグは、タグの名前と省略可能な属性のリストからなり、それらが2つの不等号 "<"
">"
の中に記述されます。属性は、1つ以上のスペース、タブ、改行で区切られ、そのタグの振る舞いを指定したり、変更したりするために使われます。タグに属性を付与する場合は、タグの名前の後ろに属性の名前を記述し、値を指定する場合は "=" で区切り、 " ' で囲みます。


<!-- pタグにstyle属性を付与 -->
<p style="color:blue;"> Hello, World Wide Web. </p>
 pタグにstyle属性を付与

タグのネスト

タグは、ネスト構造にすることができます。ネスト構造とは、ロシアのマトリョーシカ人形のように入れ子になっている構造のことです。既にタグによって制御されている範囲に対して、別のタグをネストすることで複合的な効果を持たせることができます。


<!-- タグのネストによる複合的な効果 -->
<a href="http://murashun.jp/"> リンクの一部を<b>太字</b>にします </a>
 タグのネストによる複合的な効果

上記の例では、テキストの一部は "<b>" タグにより太字になっていますが、同時に "<a>" タグによりアンカーの一部でもあります。ただし、タグがネストしている場合、終了タグの順番に注意を払う必要があります。終了タグは、最後の開始タグから順番に終了し、最初に開始されたタグが最後に終了する形でなければなりません。


<!-- 正しいネスト構造 -->
<a href="http://murashun.jp/"> <b>正しい太字のリンク</b> </a>

<!-- 誤ったネスト構造 -->
<a href="http://murashun.jp/"> <b>誤った太字のリンク</a> </b>
 ネスト構造の終了タグの順番

多くのブラウザは、誤ったネスト構造の例でも問題なく動作します。しかし不適切なネストは、HTMLドキュメントが大きくなるにつれて表示が崩れたり、動作がエラーとなる可能性が高まります。HTMLドキュメントが大きい場合、修正箇所の特定が困難になったり、修正範囲が大きくなったりしますので、シンプルな構造を心がけ、不適切なネストは避けましょう。

終了タグを持たないタグ

HTMLには終了タグを持たないタグがいくつかあります。例えば、改行を行う "<br>" タグは終了タグを必要としません。これらの終了タグを持たないタグは、"空要素" と呼ばれます。空要素であるタグは、以下の通りです。


<area>, <base>, <br>, <col>, <embed>, <hr>, <img>,
<input>, <keygen>, <link>, <meta>, <param>, <source>

終了タグを省略できるタグ

空要素以外のタグは、基本的に開始タグと終了タグで囲みます。しかし、終了タグが省略することが認められているタグがいくつかあります。終了タグを省略した場合、次の開始タグの前に、自動的に終了タグが入ります。終了タグが認められているタグは、以下の通りです。


<li>, <dt>, <dd>, <p>, <tr>, <td>, <th>, <rt>, <rp>,
<optgroup>, <option>, <thread>, <tfoot>

開始タグも終了タグも省略できるタグ

もはや意味不明ですが、開始タグも終了タグも省略できるタグがあります。タグが省略されてもブラウザが省略されたものと判断し、適切に扱われます。開始タグも終了タグも省略できるタグは、以下の通りです。


<html>, <head>, <body>, <tbody>, <colgroup>


上記を踏まえた上で、以下のようにHTMLドキュメントを書くこともできます。


<!DOCTYPE html>
<title> 何これ </title>
意味分かんない
 文法的には正しく、ブラウザには厳しい

まとめ

HTML の基本的な書き方について一通り説明しましたが如何だったでしょうか。ブラウザによっては多少の文法エラーも補完してくれるため、最初は間違った書き方をしても気付かないかもしれませんが、まずは HTML に慣れることを優先しましょう。HTML に慣れるまでは、ブラウザで少しずつ表示を確認しながら作っていくとよいでしょう。