HTML の書き方

HTML とは

HTML とは、HyperText Markup Language の略で、Web ページを作るためのもっとも基本的なマークアップ言語のひとつです。インターネットで公開されている Web ページ の多くは HTML をベースに作成されています。

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 では非推奨の記述方法でしたが、HTML 5 からは正しい文法となりました。

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>
必要最低限のテキスト
文法的には正しい必要最低限のタグ

DOCTYPE 宣言

<!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>
DOCTYPE 宣言

DOCTYPE 宣言(文書型宣言)とは、1行目に書かれている <!DOCTYPE html> を指します。DOCTYPE 宣言は、ドキュメントと文書型定義 (Document Type Definition:DTD) を結びつけるための命令です。この命令は、ブラウザに読み込まれたページが HTML ドキュメントであること、HTML ドキュメントがどの DTD に従っているかを伝えています。DTD の種類によって、後述するブラウザの表示モードが決定されます。

HTML 4.01 における 3 種類の DTD
DTDの種類定義
Strict非推奨の要素・属性・フレームが使用できない
Transitional非推奨の要素・属性は使用できるが、フレームは使用できない
Frameset非推奨の要素・属性・フレームが使用できる
<!-- HTML 5 -->
<!DOCTYPE html>

<!-- HTML4.01 Strict -->
<!DOCTYPE HTML 
  PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">

<!-- HTML4.01 Transitional -->
<!DOCTYPE HTML 
  PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">

<!-- HTML4.01 Frameset -->
<!DOCTYPE HTML 
  PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
  "http://www.w3.org/TR/html4/frameset.dtd">
DOCTYPE 宣言

HTML5 からは DTD の指定が省略され、<!DOCTYPE html> だけになりました。HTML5 の DOCTYPE 宣言では、ブラウザの表示モードはすべて標準モードとなります。

DOCTYPE スイッチ機能と表示モード

DOCTYPE 宣言は、ブラウザの表示モードを切り替えるスイッチとして機能します。ブラウザの表示モードは標準モード互換モードの 2 種類あります。ブラウザは DOCTYPE 宣言を参照し、どちらの表示モードとするかを決定します。

ブラウザの表示モード
表示モード表示モードの説明
標準モード CSS 標準に準拠してページのレンダリングを行うモード。CSS が正しく解釈されるため、表示レイアウトが崩れにくい。
互換モード 過去のブラウザとの表示互換を保つレンダリングを行うモード。CSS が独自解釈されるため、表示レイアウトが崩れやすい。

関連記事

Category:
プログラミング
公開日:
更新日:
Pageviews:
2,076
Shares:
16
Tag:
HTML
コンテンツ制作