【HTML5入門】1-4 よく使われるタグ

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

※本記事は、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で開いてみると、以下の画像のような形で、ちゃんとタイトルが表示されているのが確認できると思います。

お気に入りやブックマークをする際にも、titleタグで付けたタイトル名が表示されることになります。

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タグは、ブロック要素とインライン要素という特徴の違いがある、ということが理解できれば、この時点では完璧です。

次回は、文書の根幹となる「見出し」や「段落」について、学んでいきます。

次の記事はこちら

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る
     

コメントを残す

*