当ブログ管理人からのお知らせ

当ブログのリニューアルが完了しました。

なお、個別記事内にて細かいデザインが崩れている場合がありますので、ご了承のほどお願いいたします。

詳しくは、以下のお知らせ記事をお読みください。

当ブログのリニューアルに伴うメンテナンスの作業完了のお知らせ

当ブログ内の記事を探す

最近の投稿

カテゴリー

アーカイブ

RSS

プロフィール

プロフィール用画像

みきてぃ東西線

みきてぃ東西線

20代のブロガーです。IT・インターネット関連や生活関連、趣味の1つである観賞魚などの記事を書いています。

≫詳しいプロフィールを見る

≫お問い合わせはこちら

HTML・CSS

HTMLとは何か?構造の仕組みや使い方を解説【初心者でもわかる】

アイキャッチ画像
みきてぃ東西線

みなさんは「HTML」と聞いて何だと分かりますか?

「ウェブサイトはわかるけど、HTMLの意味が分からない・・・」なんていう人もいるのではないでしょうか?

私も、最初はHTMLの意味ですら分からず、独学で本やインターネットのサイトで調べたこともありました。

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

HTMLとは?

HTMLとは、ウェブサイトを作るためのコンピュータ言語、いわゆる「マークアップ言語」の仲間です。

HTMLは、ページの中にある文字や画像などの様々なコンテンツにタグをつけて囲むことにより、そのコンテンツの役割を定義します。

2021年7月現在では、WHATWGが制定した規格「HTML Living Standard」がデファクトスタンダードとなっています。

HTMLの歴史

HTMLの歴史を簡単に解説すると、以下の通りとなります。

HTMLにおける出来事
1990年イギリスのティム・バーナーズ=リーによってHTMLが生み出された。
1990年12月頃HTMLが、最初のhttpdサーバーと最初のブラウザ「World Wide Web」に構築された。
1991年頃HTMLで作られた最初のWebサイトが開設された。
1993年HTML1.0の仕様が発表された。
1994年W3C(World Wide Web Consortium)を設立。
1995年HTML2.0の仕様が発表された。
この頃からHTMLの管轄がIETFからW3Cに移管されている。
1997年1月14日W3CからHTML3.2の仕様が発表された。
当初はHTML3.0の仕様を発表する予定だったが、多くのブラウザが乱立したなどの理由により頓挫したため。
1997年12月18日W3CからHTML4.0の仕様が発表された。
1999年12月24日HTML4.01がW3Cより正式に勧告された。
2000年1月26日W3CからXHTML1.0が勧告された。
2009年頃XHTMLの勧告が打ち切られた。
2014年10月28日W3CからHTML5が勧告された。
2019年5月頃W3CがWHATWGの規格「HTML Living Standard」をデファクトスタンダード(事実上の標準)にすると発表された。
2021年1月29日WHATWG規格の「HTML Living Standard」がW3Cにより正式に勧告された。
これにより、W3C規格のHTML5が廃止された。

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全事典』(インプレス)

この記事を書いた人

プロフィール用画像

みきてぃ東西線

みきてぃ東西線

20代のブロガーです。IT・インターネット関連や生活関連、趣味の1つである観賞魚などの記事を書いています。

≫詳しいプロフィールを見る

≫お問い合わせはこちら

当ブログ管理人からのお知らせ

当ブログのリニューアルが完了しました。

なお、個別記事内にて細かいデザインが崩れている場合がありますので、ご了承のほどお願いいたします。

詳しくは、以下のお知らせ記事をお読みください。

当ブログのリニューアルに伴うメンテナンスの作業完了のお知らせ

スポンサーリンク
記事URLをコピーしました