最低限のHTML文書に書くべきは以下の通りである。
<html> <head> </head> <body> </body> </html><と>で囲まれたものを「タグ」、特に、<何々>を「開始タグ」、</何々>を「終了タグ」と呼び、
前節を読んでいると、次のような疑問が生じる。
「実際には表示されないヘッダー部分には何の意味があるのか」。
ヘッダー部分には、例えば、タイトル等の情報を書くことが出来る。
即ち、このHTML文書の題名である。タイトルは、ブラウザの左上や、タブに表示される。
例えば、「私のホームページ」というタイトルで以下のように書き、
ファイル名を「index.html」（ファイル名のデフォルト）として保存する。
ファイル名は、「index.html」以外でも構わないが、必ず半角英数字にして、
ファイル名の末尾に拡張子「.html」を加えなければならない。
拡張子が表示されていない場合は、拡張子を表示するように設定を変更しておいた方がいいだろう。
<html>
<head>
<title>私のホームページ</title>
</head>
<body>
ようこそ、私のホームページへ。
</body>
</html>
前節の「最低限のHTML文書」でもHTML形式の文書ではあるが、せめてタイトルはつけた方が良いだろう。
前節のHTML文書（以下、「ソースコード」とも書く）をそのままブラウザに表示させると、文字化けすることがある。
ブラウザの画面上で右クリックして、「エンコード」を指定すれば文字化けは解消される。
しかし、出来れば、「エンコード」を指定することなく、文字化けを回避できることが望ましい。
そこで、ヘッダー部分に
<meta http-equiv="content-type" content="text/html;charset=utf-8">
を追記する。これは、文字コードが「utf-8」であることを意味する。
ここで、エディタで、「名前を付けて保存」する際に、文字コードを「utf-8」にして保存することに注意。
保存している文字コードが違うと文字化けする。他の文字コードには、「shift-jis」や「euc-jp」があるが、
一般的には、文字コードは、「utf-8」で指定しておくのが望ましいだろう。
なお、文字コードの指定は、以下の様に、<title>タグの前に記述しよう。
そうでなければ、タイトルだけ文字化けしているという現象が発生する可能性がある為である。
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>私のホームページ</title>
</head>
<body>
ようこそ、私のホームページへ。
</body>
</html>
上記では、最低限のHTML文書として、記述してみたが、詳細な書き方をする場合、冒頭に、
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
等と記述しておく方が望ましいだろう。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>私のホームページ</title>
</head>
<body>
ようこそ、私のホームページへ。
</body>
</html>
前節では、詳細な書き方を示したが、これは、HTMLのバージョンが「4.01」の時の書き方であり、
HTML5では、もう少し簡略に表記できるようになった。まず、文書型宣言が、今まで
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
と書いていたところを、
<!DOCTYPE html>
と書くだけで良い。
また、文字エンコーディングも、
<meta http-equiv="content-type" content="text/html;charset=utf-8">
と書いていたところを、
<meta charset="utf-8" />
と書くだけで良い。さらに、<html>を<html lang="ja">
として、言語が日本語であると記述しておくと、より望ましいだろう。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8" /> <title>私のホームページ</title> </head> <body> ようこそ、私のホームページへ。 </body> </html>
ここまで作ったHTML文書を改造して、Webページに背景色を指定してみよう。
例えば、<body>タグを<body bgcolor="#00ffff">と書き換えると、
ページの背景色が水色になる。#で始まる16進数をカラーコードと呼ぶ。
この場合、「#00ffff」の代わりに、「aqua」や「cyan」と書いても良いが、
マイナーな色名を指定した場合、ブラウザによっては、反映されない場合がある。
カラーコードはRGB、即ち左から二桁ずつ、赤緑青の光の三原色の程度を表している。
例えば、主要な色名との対応は、次の表のようになる。
| 色名 | カラーコード | 色名 | カラーコード | 色名 | カラーコード | 色名 | カラーコード |
|---|---|---|---|---|---|---|---|
| black | #000000 | gray | #808080 | silver | #c0c0c0 | white | #ffffff |
| red | #ff0000 | maroon | #800000 | teal | #008080 | aqua cyan |
#00ffff |
| lime | #00ff00 | green | #008000 | purple | #800080 | fuchsia magenta |
#ff00ff |
| blue | #0000ff | navy | #000080 | olive | #808000 | yellow | #ffff00 |
| darkviolet | #9400d3 | gold | #ffd700 | orange | #ffa500 | yellowgreen | #9acd32 |
| 属性 | 用途 |
|---|---|
| bgcolor | ページの背景色を指定 |
| backgrond | ページの背景画像を指定 |
| text | 標準の文字色を指定 |
| link | 未読リンクの色を指定 |
| vlink | 既読リンクの色を指定 |
| alink | クリック時のリンクの色を指定 |
見出しタグを使うと、章や節など、章立てをすることができる。
<h1>～<h6>まであり、<h1>が最も大きく、<h2>、<h3>の順に小さくなっていく。
それぞれフォントサイズがあるが、基本的にはこの順番で使っていく。
フォントサイズが気に入らない等の理由で、順序を飛ばして使うのは望ましくない。
何故なら、各見出しタグのフォントサイズは、スタイルシート等で別途指定することが出来るからだ。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>私のホームページ</title>
</head>
<body bgcolor="#00ffff">
<h1>はじめに</h1>
ようこそ、私のホームページへ。
</body>
</html>