要素とは
この章のゴールは 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 開発に関する情報は膨大で、全てを暗記するのは「ほぼ不可能」と言っても過言ではありません。
既に過去に出ている情報だけでも膨大なのに、新しい技術や概念が年々増えていきます。
ここで重要となるのが「独学スキルの向上」「自己解決スキルの向上」になってくるのですが、これらを鍛えるには「基礎知識」を身につけているかがポイントとなります。