HTMLの基本タグ1（html,head,body…）

この記事で紹介しているHTMLタグ：html, head, body, meta, title, h1, p, br, strong, i

次のサンプルを使ってHTMLの基本タグを解説します。

ファイル名 html01.html

<!DOCTYPE html>
<html>
	<head>
		<title>HTMLの基本タグ1</title>
		<meta charset="utf-8">
	</head>
	<body>
		<h1>HTMLの基本タグ1</h1>
		<p>段落はpタグでくくります。<br>途中にbrタグを入れると改行します。</p>
	</body>
</html>

ブラウザでの表示イメージ

html01.htmlのタグ解説
段落（p）タグと共によく使われるタグ
課題

html01.htmlのタグ解説

1行目から順に解説します。

<!DOCTYPE html>

DOCTYPE宣言と呼びます。必ず1行目に記述します。
HTML5（HTMLのバージョン5）で記述されたサイトですよ、という意味になります

<html lang="ja"> ～ </html>

HTMLの中身を表します。
lang=”ja”の部分は、日本語で記述されたサイトですよ、という意味で、ほかにもlang=”en”など、言語別に存在します…がGoogleはこの記述を無視しているようです。というわけでlang=”ja”の部分は、記述しなくても問題ないかと思います

<head> ～ </head>

HTMLの設定を記述している部分です。ブラウザ上には表示されません。CSS（スタイルシート）などの設定もこのheadタグ内に記述することも多いです。

<meta charset="utf-8">

このHTMLファイルが記述されている文字コードを表します。
基本はUTF8という文字コードが日本語などの全角文字にも対応しているので一般的です。<meta charset=”UTF-8″>と大文字で記述してもOKです

<title> ～ </title>

タイトルタグです。
そのHTMLファイルのタイトルとなります。ブラウザのタブ名にもなり、ブックマークで登録される際の名前にもなる重要な設定タグです。
閲覧者への利便性を考慮して、下記h1タグ（見出しタグ）と同じ文字列を設定することが多いです。

<body> ～ </body>

ホームページに表示されるコンテンツ（文章、画像、リンク等）を記述します。
要するにここに目に見える部分を記述します。

<h1> ～ </h1>

見出しタグです。自動的に改行されます。
デフォルト状態では、段落タグ（pタグ）よりフォントサイズが大きく、太い文字となります。大見出し→小見出しの順にh1～h6までありますが、一般にh4くらいまでが使われます。目次などでも利用されます。

<p> ～ </p>

段落タグです。文章のまとまりを表します。
HTMLでは、文字列は基本的にpタグ内に記述します。
自動的に改行されます。

<br>

段落内改行タグです。上記段落タグ（pタグ）の中で改行をしたいとき使います。
<br>のように用い、終了タグがありません。

段落（p）タグと共によく使われるタグ

段落内の特定の文字列に対してよく使うタグとして、以下のものがあります。

タグ	意味	使い方例
strong	強調したい文字列を表す。ブラウザ上は、太字で表示される	答えは<strong>A</strong>だ
i	何らかの理由で他のテキストと区別されるテキスト。技術用語、外国語のフレーズ、架空の人物の思考など。英文では斜体で表示される	<i>SEO</i>は検索エンジン最適化と訳される