HTMLの基本タグ1(html,head,body…)

HTMLとCSS
スポンサーリンク

この記事で紹介している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のタグ解説

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>は検索エンジン最適化と訳される

課題

習ったことをすぐに生かすことが上達の秘訣だと思います。
以下挑戦してみてください。

1
metaタグで説明のあった文字コードとは何でしょうか?
調べてみて下さい。
調べたことをホームページとして作成してください。

作成ファイル名:html01_mojicode.html

作成イメージ

ヒント:段落タグ、段落内の改行

2
次のような表示となるサイトを作ってみてください。
俳句は各自考えて下さい。

作成ファイル名:html01_haiku.html

スポンサーリンク
HTMLとCSS
スポンサーリンク
dennouをフォローする
電脳産物

コメント