当ブログ内の記事を探す

最近の投稿

カテゴリー

アーカイブ

RSS

プロフィール

プロフィール用画像

みきてぃ

みきてぃ

20代のブロガーです。IT・インターネット関連や生活関連、趣味の1つである観賞魚などの記事を書いています。

≫詳しいプロフィールを見る

≫お問い合わせはこちら

HTML・CSS

【HTML】doctype・html・head・bodyタグの使い方【初心者向け】

アイキャッチ画像
みきてぃ

今回は、HTMLでWebサイトを作るのに必要な「doctype・html・head・bodyタグの使い方」について解説していきます。

html・head・bodyタグは絶対に必要

HTMLでサイトを作る場合、どのページでも絶対に必要なタグは以下の4つです。

htmlタグ概要
doctypeタグHTML5で作られたページであることを示すタグ。
htmlタグhtmlの全ルート要素において必要なタグ。
headタグサイトのhead部分を表すタグ。
bodyタグサイト内の本文であることを示すタグ。

doctypeタグ

※本来はドキュメントタイプですが、この記事ではタグとして扱います。

1<!DOCTYPE html>

doctypeタグとは、そのタグが付いたページがHTML5で作られたページであることを示すタグです。記述する場合は、htmlタグより上に書きます。

補足

HTML4.01ではDOCTYPE宣言を必ず記述しなければいけません。

HTML4.01におけるDOCTYPE宣言

1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

htmlタグ

1<html>
2<!--htmlタグに囲まれた部分に様々なタグを入れます。-->
3</html>

htmlの全ルート要素において必要なタグのことです。

htmlタグはlang属性を使用することができ、例えば使用している言語が日本語の場合は、以下のように書きます。

1<html lang="ja">

headタグ

1<head>
2<!--ここにヘッダ情報を入れます。-->
3</head>

headタグは、サイトのヘッダ部分を表すタグのことです。

headタグに囲まれた部分は、以下のタグを入れることができます。

htmlタグ概要
titleタグそのページのタイトルを指定するタグ。
linkタグ外部ソースを指定・参照するタグ。
metaタグメタデータを示すタグ。
baseタグ相対パスURLを指定するタグ。

bodyタグ

1<body>
2<!--ここに本文を入れます。-->
3</body>

bodyタグとは、サイト内の本文であることを示すタグのことです。

このタグで囲まれた部分に、段落を示すpタグ、画像を表示するimgタグ、リンクなど外部のリソースを参照するaタグなど、多くのタグを入れて構築していきます。

サンプルコード

1<!DOCTYPE html>
2
3<html><!--html要素の開始タグ-->
4
5<head><!--head要素の開始タグ-->
6
7<!--ここにヘッダ情報を入れます。-->
8
9</head><!--head要素の終了タグ-->
10
11
12<body><!--body要素の開始タグ-->
13
14<!--ここに本文を入れます。-->
15
16</body><!--body要素の終了タグ-->
17
18
19</html><!--html要素の終了タグ-->

まとめ

というわけで、今回はHTMLでWebサイトを作るのに必要な「doctype・html・head・bodyタグの使い方」について解説しました。

最後に、もう一度「doctypeタグ・htmlタグ・headタグ・bodyタグ」について簡単にまとめます。

htmlタグ概要
doctypeタグHTML5で作られたページであることを示すタグ。
htmlタグhtmlの全ルート要素において必要なタグ。
headタグサイトのhead部分を表すタグ。
bodyタグサイト内の本文であることを示すタグ。

doctypeタグ・htmlタグ・headタグ・bodyタグは、Webサイトを作る時に絶対に必要なタグです。

これからWebサイトを作る際は、基本的なdoctypeタグやhtmlタグ、headタグ、bodyタグを最初に入れておくことを忘れないようにしましょう。

出典

小川裕子・加藤善規&できるシリーズ編集部『できるポケット HTML5&CSS3/2.1全事典』(インプレス)

この記事を書いた人

プロフィール用画像

みきてぃ

みきてぃ

20代のブロガーです。IT・インターネット関連や生活関連、趣味の1つである観賞魚などの記事を書いています。

≫詳しいプロフィールを見る

≫お問い合わせはこちら

スポンサーリンク
記事URLをコピーしました