今日はHTMLの基礎知識についてお話ししたいと思います。
「HTMLって何だか難しそう…」そんな風に思っていませんか？
実は私もそうでした。
でも、ちょっとした工夫で意外と簡単に理解できることに気が付いたんです。
今日は、私が実際にHTMLを学んでいく中で「なるほど！」と思った部分を中心に、できるだけわかりやすくお伝えしていきますね。
HTMLはやってみると難しくない
まずは、HTMLの基本となる3つの要素についてお話しします。
- タグは文章に意味を与える「目印」のようなもの
- 要素はタグとその中身をまとめたひとかたまり
- 属性はタグに付ける追加情報
- 一つ一つの要素が積み重なってページができる
- HTMLには決まった構造がある
それでは、順番に詳しく見ていきましょう。
タグについて
まず「タグ」についてです。
タグって、お料理のレシピを書くときの「材料」「作り方」みたいなものなんです。
文章の役割を示す目印ですね。
このタグ、不思議な記号 < > で囲まれているのをご存知ですか？
私が最初にHTMLを見たとき「なんだかパソコンっぽい記号だな」と思ったのを覚えています。
でも、これはただの「始まり」と「終わり」を示すマークなんです。
なんだか、文章に「」をつけるのに似てませんか？
要素について
次に「要素」について。
これは少しわかりにくい言葉かもしれません。
私も最初は「タグと要素って同じじゃないの？」と思っていました。
でも、こう考えるとわかりやすいんです。
お弁当箱を想像してみてください。
タグはお弁当箱の「蓋」で、中身と蓋を合わせたものが「要素」なんです。
属性とは
そして「属性」です。
これは要素に対する「追加情報」です。
例えば、リンクを作るときに「どこへ飛ぶのか」という情報を追加したり、画像を表示するときに「どのくらいの大きさで表示するか」という情報を追加したりするものです。
同じおかずでも、塩加減や調理方法で味が変わるように、属性を変えることで要素の見え方や動きが変わるんです。
HTMLの全体的な構造
ここまでくると、HTMLの全体的な構造も見えてきます。
実は、HTMLには決まった構造があるんです。
それは家を建てるときの設計図のようなもの。
まず、HTMLであることを宣言する「DOCTYPE」という部分があります。
その下に、家でいう「基礎」となるタグがあって、その中に「頭」となるタグと「体」となるタグが入ります。
タグの中には、ページのタイトルや、検索エンジンに説明するための情報など、ページの「設定」のような情報が入ります。
これは、家でいえば間取り図や設備の情報のようなものですね。
タグの中身は？
タグの中には、実際にページに表示される内容が入ります。
見出しや段落、画像など、私たちが実際に目にする部分です。
これは、家でいえば実際の居住空間にあたります。
私がHTMLを理解できたのは、このように身近なものに例えて考えたからかもしれません。
HTMLの基礎を理解すると、ウェブページがどうやって作られているのか、少しずつわかってきます。
「あ、このページのこの部分は、このタグで作られているんだな」と、ウェブサイトの見方も変わってきますよ。
今回お話しした内容は、HTMLのほんの入り口です。
でも、この基礎さえ理解できれば、あとは少しずつ新しいタグや属性を覚えていけばいいんです。
焦る必要はありません。
HTMLの構成を知っておこう まとめ
私も、まだまだ勉強中の身です。
でも、最初は難しく感じたHTMLが、今では少しずつ楽しく感じられるようになってきました。
みなさんも、HTMLに興味を持ったら、ぜひ挑戦してみてくださいね。
基礎から少しずつ、自分のペースで学んでいけば大丈夫です。
最後までお読みいただきありがとうございました！
