要素とは

この章のゴールは HTML で使われる「要素」の意味を理解することです。

「タグ」と「要素」

1日目の「HTML の書き方」の中で「タグ」について取り上げました。

基本的には「要素」と「タグ」は同じものだと認識しても問題ありません。

厳密にいえば「タグ」と「要素」の違いは以下のとおりですが、開発をする上で両者の違いをそれぞれ分ける必要はありません。

  • タグ : 要素を「<>」や「</>」の中に書いたもの
  • 要素 : h1, p, body など、HTML を構成するのに使われるもの

実際の会話のやりとりの中で「要素」と「タグ」を同じ意味で使うことが多いです。そのため「両者の違いをあえて使い分ける必要はない」という表現をしました。

例えば、<h1>Hello</h1> というコードがあったときに

  • h1 の中の Hello
  • h1 要素の中の Hello
  • h1 タグの Hello

など、いずれの言葉で説明しても、相手には伝わります。

「要素」の種類

HTML には数多くの要素が用意されていて、目的に応じて使い分けます。

どれくらい数多くの要素があるか知りたい場合は、MDN の「HTML 要素リファレンス」をご確認いただけたらと思います。

これまでの学習で出てきた要素を取り上げると次の通りです。

  • html
  • head
  • body
  • meta
  • title
  • h1
  • p
  • img

実際に何か Web サービスを作るとなったとき、上記で挙げた要素は基本的に全て使うことになるでしょう。

また、上記に挙げていない要素も数多く使うことになるので、必要に応じて都度ググりながら、どの要素を使えばよいかを判断して実装していくことになります。

全ての要素を暗記する必要は無い

HTML 要素リファレンス」を見ると、「全てを覚えるのは難しそう...」と思われるでしょう。

そう思うのは間違っていなくて、全ての要素を暗記する必要はありません。

全てを暗記する必要は無い」と断言する理由は次の通りです。

  • 書籍や動画などの教材で出てくる HTML のコード、実際に運営されている HTML のコードを見ると、よく使われる要素があるため自然と覚える
  • 初めて見た要素に関しては「MDN HTML 〇〇」と調べることで、その要素についての知識を得られる(〇〇には div, span, video)
  • どの要素を使えば良いかわからない場合、「MDN HTML 映像」「MDN HTML 音声」「MDN HTML 入力」「MDN HTML ボタン」などで調べれば、目的の要素を見つけられる

「HTML の基礎」「MDN の活用スキル」「MDN 以外の参考記事を見つける力(ググり力)」を持つことで、HTML の「独学スキル」「自己解決スキル」が高まっていきます。

ぜひ「暗記」をするのではなく、「基礎知識の活用」で新しい知識を自分で調べられるクセをつけていきましょう!

このクセが身について、独学スキルが高くなれば、HTML だけでなく「CSS、JavaScript、PHP、Ruby、データベース」など Web 開発に関するスキルをどんどん学習できるようになります^^

繰り返しになりますが、このサイトのコンセプトは「1週間で HTML と CSS のキモを掴み、独学スキルを高める」です。

HTML、CSS、JavaScript など Web 開発に関する情報は膨大で、全てを暗記するのは「ほぼ不可能」と言っても過言ではありません。

既に過去に出ている情報だけでも膨大なのに、新しい技術や概念が年々増えていきます。

ここで重要となるのが「独学スキルの向上」「自己解決スキルの向上」になってくるのですが、これらを鍛えるには「基礎知識」を身につけているかがポイントとなります。

results matching ""

    No results matching ""