HTML勉強2日目。meta、title、div、spanという4つのタグ。

プログラミング

おはようございます。

本日は、よく使われる4つのタグ、

を勉強しました。

meta、title、div、spanという4つのタグ。

HTML学習2日目となりました。

3日坊主のうちの2日が過ぎた訳です。

僕にしては長く続いた方です。

早速ですが、今回僕が勉強したのは、よく使う4つのタグとなります。

前回の最低限必要な4つのタグで作成した、コードに今回のタグを追加していこうと思います。

meta

文書の情報を伝えるために使われるタグです。

エディタに記述すると以下のようになります。

<!doctype html> 

<html lang="ja"> 
	<head> 
		<meta charset="UTF-8">
	</head>
	<body>
	</body>
</html>

metaタグは情報を伝えるタグなので、

<head>~</head>などのように、2つのタグで挟む必要はありません。

この場合のmetaタグは<meta charset=”UTF-8″>とする事で、

UTF-8という文字コードで書かれた事を示しています。

title

この文書のタイトルを伝えるタグです。

エディタに記述すると以下のようになります。

<!doctype html> 

<html lang="ja"> 
	<head> 
		<meta charset="UTF-8">
		<title>MyPage</title>
	</head>
	<body>
	</body>
</html>

<title>~</title>の中に、この文書のタイトルを入れます。

今回は、MyPageとしています。

実際に、これをブラウザに表示させると以下のようになります。

ブラウザのタブにMyPageと表示されました。

タブバーがない場合は、ウインドウのタイトルバーに表示されます。

また、お気に入り登録やブックマークするときも、このタイトルが表示されます。

div

一つの塊を示すタグです。

エディタに記述すると以下のようになります。

<!doctype html> 

<html lang="ja"> 
	<head> 
		<meta charset="UTF-8">
		<title>MyPage</title>
	</head>
	<body>
		<div>こんにちは、かしこです。</div>
	</body>
</html>

divタグは表示させたいないようなので、<body>~</body>の間に書きます。

今回は、<div>こんにちは、かしこです。</div>と書きました。

これをブラウザに表示させると、以下のようになります。

span

文章の一部を示すタグです。

エディタに記述すると以下のようになります。

<!doctype html> 

<html lang="ja"> 
	<head> 
		<meta charset="UTF-8">
		<title>MyPage</title>
	</head>
	<body>
		<div>こんにちは、かしこです。</div>
		<span>こんばんわ、スパンです。</span>
	</body>
</html>

spanタグも表示させたいないようなので、<body>~</body>の間に書きます。

今回は、<span>こんばんわ、です。</span>と書きました。

これをブラウザに表示させると、以下のようになります。

ここで、ん?divとspan一緒じゃね?

と思ったかと思います。

div と span の違い

どうやら、両者の違いは 要素 であるとの事です。

div = ブロック要素

<div>~</div>で囲われた文書は、これでひと塊であるという事を示す、ブロック要素と呼ばれるものです。

例えば、エディタに以下のように記述します。

<!doctype html> 

<html lang="ja"> 
	<head> 
		<meta charset="UTF-8">
		<title>MyPage</title>
	</head>
	<body>
		<div>こんにちは、<div>かしこ</div>です。</div>
		<span>こんばんわ、スパンです。</span>
	</body>
</html>

かしこ という文章をdivで囲ってみました。

これをブラウザに表示すると、以下のようになります。

divというタグは、一つのブロックを示しています。

前の文章、後ろの文章とは別になるように表示される、これがブロック要素の基本です。

span = インライン要素

<span>~</span>で囲われた文書は、文章の一部であるという事を示す、インライン要素と呼ばれるものです。

かしこ という文章をspanタグで囲ってみます。

<!doctype html> 

<html lang="ja"> 
	<head> 
		<meta charset="UTF-8">
		<title>MyPage</title>
	</head>
	<body>
		<div>こんにちは、<span>かしこ</span>です。</div>
		<span>こんばんわ、スパンです。</span>
	</body>
</html>

これを、ブラウザに表示すると以下のようになります。

あくまでspanタグは文章の一部を選択しているので、見た目は何も変わりません。

しかし、実際にはspanタグで囲われている状態となります。

コメント

タイトルとURLをコピーしました