アイキャッチ画像

みなさんは「HTML」と聞いて何だと分かりますか?「ウェブサイトはわかるけど、HTMLの意味が分からない・・・」なんていう人もいるのではないでしょうか?私も、最初はHTMLの意味ですら分からず、独学で本やインターネットのサイトで調べたこともありました。

そこで、この記事ではウェブサイトを作ったことがある私が、初心者でもわかりやすく「HTMLの意味や使い方、HTMLの仕組み」をご紹介します。

HTMLとは?

HTMLとは、ウェブサイトを作るためのコンピュータ言語、いわゆる「マークアップ言語」の仲間です。HTMLは、ページの中にある文字や画像などの様々なコンテンツにタグをつけて囲むことにより、そのコンテンツの役割を定義します。

HTMLのタグの使い方

htmlタグの基本構造

HTMLのタグは、基本的にコンテンツの前に「開始タグ」、コンテンツの最後に「終了タグ」を囲みます。これにより、タグで囲まれたコンテンツは、その役割をつけることになります。

HTMLのタグの名称については以下の通りです。

タグ:開始タグと終了タグをまとめたもの。終了タグがないHTMLタグは「空要素」と呼ばれる。

タグ名:タグの役割を決める名前。

属性・属性値:タグに新たな内容を足す場合、開始タグに「属性」を含める。ほとんどのタグでは、必ず「属性値」を入れなければならない。

コンテンツ:開始タグと終了タグに囲まれる部分。主に文章などが入る。

要素:タグとコンテンツを合わせたものを呼ぶ。

「空要素」について

HTMLのタグは、基本的に「開始タグ」と「終了タグ」が存在します。しかし、中には終了タグがない、コンテンツを囲まないタグもあります。これらは「空要素」と呼ばれます。

例:brタグ、hrタグ、baseタグなど

注意点

XHTML系では、終了タグを省略することはできません。

HTMLの構造の仕組み

htmlの要素図

HTMLのタグのコンテンツは、他のHTMLのタグを含むことが出来ます。この仕組みを「ツリー構造」と呼びます。ツリー構造は、親要素・子要素などの要素があります。

親要素:他の要素から見てすぐ上にある要素のこと。

子要素:他の要素から見てすぐ下にある要素のこと。

祖先要素:他の要素から見て、親要素よりそれ以上の要素のこと。

子孫要素:他の要素から見て、子要素よりそれ以下の要素であること。

兄弟要素:ある要素と同じ階層にある要素のこと。ある要素より先に出てくる要素は「兄要素」、後から出てくる要素は「弟要素」という。

htmlのツリー構造図

上の画像のように、他のHTMLの要素を組み合わせることにより、HTMLのツリー構造を組み立てることができます。

まとめ

  • HTMLとは、ウェブサイトを作るための「マークアップ言語」のこと。
  • HTMLのタグは、基本的に「開始タグ」「終了タグ」が存在する。
  • HTMLのタグに他のHTMLタグが含まれた仕組みを「ツリー構造」と呼ぶ。

というわけで、今回は「HTMLの意味と使い方、仕組み」についてご紹介しました。最初は難しそうだと感じますが、少しでもHTMLの内容が分かっていただければ幸いです!

出典
小川裕子・加藤善規&できるシリーズ編集部『できるポケット HTML5&CSS3/2.1全事典』(インプレス)

スポンサーリンク