※本記事は、Tech Academyの下記YouTube動画を参考に書かせて頂いております。
もくじ
前回のおさらい
前回は、HTMLの基本となる構造について、4つのタグを通して学んでいきました。
今回は実際に、4つのタグの中に入るタグのうち、よく使われるものについて学んでいきましょう。
よく使われるタグ
まずはタグの紹介からします。今回学ぶタグは、以下の4種類です。
- metaタグ
- titleタグ
- divタグ
- spanタグ
それぞれ順番にみていきましょう。
metaタグ
metaタグは、文書の情報を伝えるために使われるタグです。記述する場所は、headタグの内側です。
前回は以下のコードまで記述しました。
<!doctype html>
<html lang="ja">
<head>
</head>
<body>
</body>
</html>それでは早速、headタグの内側にmetaタグを入れていきましょう。
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
</head>
<body>
</body>
</html>このように記述してみました。metaタグは、情報を伝えるためのタグですので、「ここからここまで」を表す</meta>のような閉じタグは必要ありません。
charset=”UTF-8″について
metaタグの後ろに書かれたcharset="UTF-8"は、文字コードを意味しています。この記述によって、index.htmlが「UTF-8」という文字コードで書かれていることを示しています。
titleタグ
titleタグは、文書のタイトルを伝えるためのタグです。例えば、パソコンで何かページを見る時に、上のタブにタイトルが表示されますよね。このタイトルの表示の役割を担うのが、titleタグとなります。
titleタグも、headタグの内側に記述していきます。実際の記述例が下記となります。
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>MyPage</title>
</head>
<body>
</body>
</html>これにより、このHTML文書のタイトルが「MyPage」という名前になりました。実際にこのHTML文書をGoogle Chromeで開いてみると、以下の画像のような形で、ちゃんとタイトルが表示されているのが確認できると思います。
divタグ
divタグは、一つの塊を示すためのタグです。divタグで囲まれる内容は、実際に表示をさせる内容なので、bodyタグの内側に記述します。
早速、コードを書いていきましょう。
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>MyPage</title>
</head>
<body>
<div>これはdivです。</div>
</body>
</html>これを実際にブラウザで表示してみると、以下のようになると思います。
bodyタグに書いたので、しっかりと実際のページに表示されました。
spanタグ
spanタグは、文書の一部を示すためのタグです。spanタグも、divタグと同様、bodyタグの中に記述していきます。
こちらも早速、コードを書いていきましょう。
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>MyPage</title>
</head>
<body>
<div>これはdivです。</div>
<span>これはspanです。</span>
</body>
</html>この状態でブラウザを更新すると、以下のようになることが確認できると思います。
ブロック要素とインライン要素
これまで、実際に文字がページに表示されたところまで確認できましたが、これだけだと、divタグとspanタグの違いがわかりにくいですよね。
divタグとspanタグの決定的な違いは、ブロック要素であるかインライン要素であるかというところです。ブロック要素は、それ自体が一塊であることを示しますが、インライン要素は、文章の一部を示しています。
タグで表示が変わる例
タグは、タグの内側にタグをいれる、いわゆる「入れ子」の状態で使われることがあります。ここまでのコードを見ると、htmlタグの中にheadタグやbodyタグがあり、bodyタグの中にdivタグやspanタグがある、という構造になっているのが理解できると思います。
ここでは、実際にdivタグの内側にspanタグを入れた場合とdivタグを入れた場合で、どのように表示が変わるのかを見ていきましょう。
divタグの内側にspanタグを入れた場合
先ほど記述したdivタグの内側にspanタグを入れてみましょう。
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>MyPage</title>
</head>
<body>
<div>これは<span>div</span>です。</div>
<span>これはspanです。</span>
</body>
</html>この状態でブラウザを更新しても、表示には一切変わりがないことがわかると思いますが、実際には、「div」という文字がspanタグによって囲まれている状態となっています。
ただ、spanタグはあくまでも文書の一部を選択しているだけの状態ですので、特に見た目に変化が起きることはありません。
divタグの内側にdivタグを入れた場合
では、先ほどdivタグの入れ子にしたspanタグを、以下のようにdivタグに変えてみましょう。
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>MyPage</title>
</head>
<body>
<div>これは<div>div</div>です。</div>
<span>これはspanです。</span>
</body>
</html>そうすると、ブラウザの表示は以下のように変わることがわかると思います。
divタグで囲まれた内容は、あくまでも一つの塊を意味しますから、「div」という文字をdivタグで囲んだことによって、一つの塊として独立したような形になっています。
ブロック要素の特徴として、改行されるというものがあります。これはインライン要素にはない特徴となります。
おわりに
今回は、HTMLでよく使われる4つのタグについて見てきました。metaタグやtitleタグはheadタグの内側に書き、divタグやspanタグはbodyタグの内側に書きます。そして、divタグとspanタグは、ブロック要素とインライン要素という特徴の違いがある、ということが理解できれば、この時点では完璧です。
次回は、文書の根幹となる「見出し」や「段落」について、学んでいきます。
