では、今回もHTMLの基礎について学んでいきましょー
前回紹介したのは、HTMLに必ず必要なタグでした、それに対して今回は、＂よく使われるタグ＂を紹介していきましょー
まずはmeta（メタ）というタグです、このmetaというタグは、文書の情報を伝える為に使われるタグです
meta: 高次な（程度や水準の高いこと）
より詳しく、みたいなイメージ
詳細が書かれる場所
これだけでは分かりづらいかもしれませんが、実際にどのように使われるのかは、実際に書きながら確認していきたいと思います
続いて登場するのが、title（タイトル）タグです、titleタグは、この文書のタイトルを伝える為に使われます
続いてdiv（ディブ）というタグが登場します、divというタグは、一つの塊を示す、そのようなタグになっています
div = division（区分、段）
divはブロックレベル要素
それに対してspan（スパン）タグは、文書の一部を示す、タグになっています
span: 親指と小指で張った長さ（9インチ、23cm）、全長
spanはインライン要素
では、実際にこれらがどのように使われるのか、確認をしていきましょー
前回作ったファイルを確認します、この中に今のタグを書きながら紹介していきましょー
まずはmetaタグです
<head>タグの内側にmetaタグを書いてみます、今回はmetaと書いた後に、charset（キャラセット）と書いて、イコール、ダブルコーテーションで囲み、UTF-8としてみます
charset（チャーセット、キャラセット）:
文字セット、文字集合
<meta charset="UTF-8">
metaタグは情報を伝えるタグですので、ここから、ここまで、のような二つのタグで挟む必要はありません
今回のmetaタグは、この文書が、UTF-8という文字コードで書かれたことを示しています
続いてtitleタグです、titleタグを書いて、titleタグを閉じます、その内側に今回はMyPageという風に名前を付けてみました
<title>MyPage</title>
これによって、このhtml文書のタイトルがMyPageというものである、ということを伝えることができます
では、実際にこれがどのように表示されるのか、確認をしてみましょー
一旦書いた、このファイルを保存して、そして、開いてみましょー
このようにして、ここに、MyPageと、タグのところに表示されています
これがこの文章のタイトルである、ということを示したのが、表示されている部分です
タブブラウザでない場合には、ウィンドウのタイトルバーのとこに表示されることになります
またお気に入り登録や、ブックマークをする際にも、この部分が表示されることになります
では、ファイルに戻りましょー
続いては、divというタグがありました、divは表示させる内容なので、bodyの内側に書くことになります
divタグを書いて、ここに、これはdivです。と書いてみました
<body>
<div>これはdivです。</div>
</body>
まず保存して、これをまた表示させてみましょー
ブラウザーを更新してみます
すると、これはdivです。という風に表示されました
同じようにして、次の行にspanタグを書いてみます
そしてこちらには、これはspanです。と書いてみます
<body>
<div>これはdivです。</div>
<span>これはspanです。</span>
</body>
同じく保存して、更新をしてみましょー
すると、これはspanです。と表示されました
えー、この二つの違い、これだけでは、よく分からないかもしれません
ただdivタグは、これで一塊りである、ということを示す、ブロック要素と呼ばれるもので、spanタグは文章の一部を示すインライン要素、である、ということがポイントです
またタグは、入れ子と言われる、タグの内側にタグがある、という状態で使われることがあります
実際に今回も、htmlの内側にbodyがあり、divタグがある状態になっています
では、この更に内側にspanタグを足してみましょー
divという三文字を囲むように、spanタグを書いてみます
<body>
<div>これは<span>div</span>です。</div>
<span>これはspanです。</span>
</body>
保存して、ブラウザーを更新してみます
見た目は何も変わりませんでした
実際には、divの3文字が、spanタグで囲まれています
この時、spanタグはあくまでも、文書の一部、文章の一部を選択している状態になっていますので、特に見た目に変化はありません
それに対して、これがdivになると、どうなるのかやってみましょー
spanで囲んだ、divの3文字をdivタグで囲むように変更してみます
保存してー、そして、更新をすると、このようになりました
divというタグは、＂一つのブロック＂を示しています、前の内容、そして、後ろの内容とは別になるように表示される、これがブロック要素の基本です、ですので、今回もこれはー、の次で改行された形、そしてdivが終わった後で、改行された状態で表示をされています
このようにして、ブロック要素とインライン要素、という2種類がある、ということは非常に重要なポイントです、是非この二つを覚えておいてください