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

time 2019/09/18

folder プログラミング

おはようございます。

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

meta
title
div
span
div と span の違い

を勉強しました。

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

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

３日坊主のうちの２日が過ぎた訳です。

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

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

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

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>

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