HTMLの基本

HTML は HyperText Markup Language（ハイパーテキストマークアップ言語）の略です。ハイパーテキストは複数のテキスト（文書）がリンクによって連想的に結び付けられたもののこと、マークアップはテキストの中の文字など意味づけを行うことを意味します。HTML は「<body> や <p> などのタグによって意味づけを行い、ハイパーテキストを実現するための言語」という意味になります。

■ HTMLの簡単なサンプル

難しい能書きは後回しにして、HTMLの簡単なサンプルを見てみましょう。「タイトル」の部分にページのタイトルを、「本文」の部分に本文を記述していくことで、HTML文書を作成することができます。<html>、<head>、<title>、<body> についてはそれぞれのマニュアルを参照してください。

<html>
<head>
<title>タイトル</title>
</head>
<body>
本文
</body>
</html>

■ HTMLのこだわりのサンプル

Webデザイナー、コンピュータ技術者など、こだわる人のためのサンプルがこちらです。

<!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=Shift_JIS">
<title>タイトル</title>
</head>
<body>
本文
</body>
</html>

まず、DOCTYPE によって、HTML のバージョンを指定しています。通常は HTML 4.01 Trandisional 程度でよいでしょう。ただし、これを指定する人は、これらのバージョンの差異や仕様について正確に理解し、それに正しく準拠してから指定するようにしましょう。

次に、<meta> タグで文書の漢字コードを指定しています。

■ HTMLの究極のサンプル

もっとこだわる人は、例えば下記のようなサンプルを用います。詳細は <meta> や <link> のマニュアルを参照してください。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta name="generator" content="編集ソフト名など">
<meta name="keywords" content="キーワード1,キーワード2">
<meta name="description" content="ページの説明">
<link rel="stylesheet" href="style.css">
<link rel="contents" href="index.htm" title="目次">
<link rel="prev" href="page23.htm" title="前のページタイトル">
<link rel="next" href="page25.htm" title="次のページタイトル">
<link rev="made" href="mailto:foo@xxx.yyy.zzz">
<title>タイトル</title>
</head>
<body>
<p>本文</p>
</body>
</html>

HTML4.01 Strict 仕様では <body>～</body> の間に直接文章や画像を配置できないという決まりがあるため、<p>～</p> を用いています。

■ HTMLで特殊文字（<、>、&）を書くには

HTML の本文では、アンパサンド（&）、右大不等号（<）、左大不等号（>）をそれぞれ、&、<、> と記述する必要があります。この形式を文字参照と呼びます。加えて、タグの属性部で、"..." の中ではダブルクォーテーション（"）を "、'...' の中ではシングルクォーテーション（'）を ' と記述する必要があります。

太字にするには &lt;b&gt; を用います。
<img src="xx.gif" alt="&quot; や &#39 の説明">

これをブラウザで表示すると次のようになります。

太字にするには <b> を用います。
" や ' の説明

← マウスを乗せてみてください。

■ HTMLでコメント（注釈）を書くには

HTMLソースを編集するときだけ読むことが出来るコメント（注釈、覚書）を記述しておくと、後からソースコードを読み返す際に理解しやすくなります。コメントには  を用います。