HTMLの基本構造・書き方

まずはHTMLの基本的な構造を知る

※HTML 4.01では終了タグが省略できたりしますが、当サイトではXHTMLへの移行も視野に入れて「省略形でのタグの書き方」は推奨しない方向で説明していきます。

HTMLの基本構造

HTMLの基本的な構造は図のようになっています。

文書タイプ宣言（DTD）：文書型定義に沿う場合は最初に
html要素：その範囲の文書がHTML形式で記述されていることを宣言します。
head要素：文書の情報を示す範囲です。
- meta要素
- link要素
- style要素
- script要素
- title要素：（省略不可）
などを書くことが出来ます。
body要素：この中に書いたものがブラウザに表示されます。

基本構造はテンプレート化しておくと便利

HTMLファイルを作るごとに基本構造を手打ちするのは面倒。<body>～</body>間だけを書き換えるとHTMLファイルが完成するようにテンプレートにしておくと便利です。

HTML 4.01 Transitional

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=文字コード">
<meta http-equiv="Content-Language" content="ja">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta name="author" content="サイト作成者名">
<meta name="keywords" content="サイト内容に関するキーワード">
<meta name="description" content="サイト内容説明文">
<link rel="shortcut icon" href="favicon.icoまでのパス">
<link rel="stylesheet" type="text/css" href="cssファイルまでのパス">
<title>サイト名等</title>
</head>
<body>
<!--ここから本文-->
</body>
</html>

HTML 4.01 Strict

<!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=文字コード">
<meta http-equiv="Content-Language" content="ja">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta name="author" content="サイト作成者名">
<meta name="keywords" content="サイト内容に関するキーワード">
<meta name="description" content="サイト内容説明文">
<link rel="shortcut icon" href="favicon.icoまでのパス">
<link rel="stylesheet" type="text/css" href="cssファイルまでのパス">
<title>サイト名等</title>
</head>
<body>
<!--ここから本文-->
</body>
</html>

HTML 4.01 Frameset

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html lang="ja">
<head>
<title>フレーム文書</title>
</head>
<frameset rows="20,*">
<frame src="上部に表示されるhtmlのパス" name="menu">
<frame src="下部に表示されるhtmlのパス" name="main">
<noframes>
<body>
<p>フレームをサポートしていないブラウザで表示される代替文</p>
</body>
</noframes>
</frameset>
</html>

XHTML 1.0 Transitional

<?xml version="1.0" encoding="文字コード"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=文字コード" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta name="author" content="サイト作成者名" />
<meta name="keywords" content="サイト内容に関するキーワード" />
<meta name="description" content="" />
<link rel="shortcut icon" href="favicon.icoまでのパス" />
<link rel="stylesheet" type="text/css" href="cssファイルまでのパス" />
<title>サイト名等</title>
</head>
<body>
<!--ここから本文-->
</body>
</html>

XHTML 1.0 Strict

<?xml version="1.0" encoding="文字コード"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=文字コード" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta name="author" content="サイト作成者名" />
<meta name="keywords" content="サイト内容に関するキーワード" />
<meta name="description" content="" />
<link rel="shortcut icon" href="favicon.icoまでのパス" />
<link rel="stylesheet" type="text/css" href="cssファイルまでのパス" />
<title>サイト名等</title>
</head>
<body>
<!--ここから本文-->
</body>
</html>