HTMLの構造
HTMLファイルは基本的に次のような構造になっています。
<!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>
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宣言
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
このHTMLがどの仕様に準拠しているかを表します。
HTMLのバージョンや、基準としているDTD仕様のURLなどが指定されます。
DOCTYPE宣言を変えることによって、解釈(レンダリング方法)も変わるので、表示が変わる場合があります。
DOCTYPE宣言を省略することはできますが、ブラウザによってどのHTMLのバージョンで解釈されるかわからないので、省略しないほうがいいです。
[参考記事] DOCTYPE宣言/XML宣言
HTML部
<html>
</html>
HTMLの本体です。
この中にHTMLのさまざまな記述をします。
HEAD部
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis" />
<title>タイトル</title>
……
</head>
HTMLに関する情報です。
このHTMLがどんな文字コードで書かれているか、
付加的に読み込むべきファイルはどんなものがあるのか、
サイト内でどんな位置づけにあるのかなどの、表示には表れない情報を記述します。
[参考記事] 文字コードの指定
BODY部
<body>
……
</body>
表示される本文です。
この部分がブラウザ(Internet ExplorerやFirefox、Google Chrome、Safari)に表示されます。
表示する内容がなく、ただ別ページにジャンプするだけの場合などは不要です。
関連記事
- 文字コードの指定
- HTMLファイルを作って、ブラウザで表示してみる
- 『開始タグ』と『閉じタグ』
- テキストに意味づけをする マークアップ
- 子要素として許可される要素 内包可能要素
- ブロック要素(ブロックレベル要素)とインライン要素
- 見出し H1 H2 H3 H4 H5 H6
- 文章のまとまり、段落 P ADDRESS BLOCKQUOTE
- 表組みを作成する TABLE TH TD
- リストを作成する UL OL DL
- 横罫線を引く HR
- 改行する BR
- 文章中のテキストに意味を付ける インライン要素のマークアップ
- テキストの装飾をする
- 上付き文字、下付き文字を表示する SUP SUB
- 追加された部分、削除された部分であることを示す INS DEL
- リンクなどのパスの指定
- 別のページへのリンク 同ページ内のリンク A
- 他のページを参考にする ソースを見る
- 画像を設置する IMG
- HTML特殊文字 HTMLエスケープ 実体参照
スポンサーリンク
