今回は、HTMLでWebサイトを作るのに必要な「doctype・html・head・bodyタグの使い方」について解説していきます。
html・head・bodyタグは絶対に必要
HTMLでサイトを作る場合、どのページでも絶対に必要なタグは以下の4つです。
- doctypeタグ
- htmlタグ
- headタグ
- bodyタグ
doctypeタグ
<!DOCTYPE html>※本来はドキュメントタイプですが、この記事ではタグとして扱います。
doctypeタグとは、そのタグが付いたページがHTML5で作られたページであることを示すタグです。記述する場合は、htmlタグより上に書きます。
補足
HTML4.01ではDOCTYPE宣言を必ず記述しなければいけません。
▼HTML4.01におけるDOCTYPE宣言
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">htmlタグ
<html>
<!--htmlタグに囲まれた部分に様々なタグを入れます。-->
</html>
htmlの全ルート要素において必要なタグのことです。
htmlタグはlang属性を使用することができ、例えば使用している言語が日本語の場合は、以下のように書きます。
<html lang="ja">headタグ
<head>
<!--ここにヘッダ情報を入れます。-->
</head>
headタグは、サイトのヘッダ部分を表すタグのことです。
headタグに囲まれた部分は、以下のタグを入れることができます。
- titleタグ・・・そのページのタイトルを指定するタグ。
- linkタグ・・・外部ソースを指定・参照するタグ。
- metaタグ・・・メタデータを示すタグ。
- baseタグ・・・相対パスURLを指定するタグ。
bodyタグ
<body>
<!--ここに本文を入れます。-->
</body>
bodyタグとは、サイト内の本文であることを示すタグのことです。
このタグで囲まれた部分に、段落を示すpタグ、画像を表示するimgタグ、リンクなど外部のリソースを参照するaタグなど、多くのタグを入れて構築していきます。
サンプルコード
<!DOCTYPE html>
<html>
<head>
<!--ここにヘッダ情報を入れます。-->
</head>
<body>
<!--ここに本文を入れます。-->
</body>
</html>
まとめ
- doctypeタグ：HTML5で作られたページであることを示すタグ。
- htmlタグ：htmlの全ルート要素において必要なタグ。
- headタグ：サイトのヘッド部分を表すタグ。
- bodyタグ：サイト内の本文であることを示すタグ。
というわけで、今回はHTMLでWebサイトを作るのに必要な「doctype・html・head・bodyタグの使い方」について解説しました。
doctypeタグ・htmlタグ・headタグ・bodyタグは、Webサイトを作る時に絶対に必要なタグです。
これからWebサイトを作る際は、基本的なdoctypeタグやhtmlタグ、headタグ、bodyタグを最初に入れておくことを忘れないようにしましょう。
【出典】
小川裕子・加藤善規&できるシリーズ編集部『できるポケット HTML5&CSS3/2.1全事典』(インプレス)
