HTML

【入門】HTMLの構造を基本から理解する【初心者・未経験者向け】

今回の記事はHTMLの基本的な仕組みの解説をします。

この記事の想定読者は次のような方たちです。

この記事の想定読者
  • これからWeb開発を学び始めようと考えている方
  • HTMLの基本部分を理解したい方

今回話す内容は以下の学習コンテンツ「HTMLの構造を理解する」のスライド内容を、さらに詳しく解説したものになります。

今回の記事と、以下の記事の両方合わせて読むと、より理解していただけるかと思います。

あわせて読みたい
HTMLの構造を理解するHTMLはこれからWeb開発を始めようと思っている人は必ず理解して置かなければいけない分野となります。HTMLのコードの書き方を学ぶ前に、そもそもHTMLはどのような構造で成り立っているのかを理解することで今後の学習効率が上がるので基本から一緒に学んでいきましょう。...

それでは、次に内容で話を進めていきます。

今回の記事内容
  • HTMLとは何か
  • HTMLのタグで出来ること
  • HTMLの基本構造を知る

 

HTMLとは何か

HTMLとは何かを理解するのに、MDNの「HTML の基本」で書かれている内容を読むとわかりやすいです。

HTML (Hypertext Markup Language、ハイパーテキスト・マークアップ・ランゲージ)は、 Web サイトのコンテンツに構造を指定するために使うコードです。具体的に言うと、構造というのは段落箇条書きのリスト画像テーブルなどのようなものです。

上記の引用文の内、太字で赤線を引いたところがHTMLが行う役割になります。

わかりやすく箇条書きでまとめると次のとおりです。

HTMLの役割
  • Webページに表示するコンテンツ用意されている構造で定義すること
  • 用意されている構造には次のようなものがある
    • 段落
    • 箇条書きリスト
    • 画像
    • テーブル(エクセルの表のようなもの)

上記で挙げた4つの構造例を実際に実装したサンプルコードの結果は以下のとおりです。

See the Pen dqQbyG by つよぽん@自由探求エンジニア (@tsuyopon_xyz) on CodePen.

次の章でも解説しますが、HTMLで構造を定義するには「タグ」というものを利用して実現します。

HTMLのタグで出来ること

前の章の終わりで、HTMLの構造を定義するにはタグを使うと説明しました。

そもそもタグというのはどんなものなのでしょうか?

以下の図はタグを使っている様子を表しているものです。

タグ・要素の構造タグ・要素の構造

上の図でいうと「<p>」「</p>」の部分がタグとなり、それぞれを開始タグ閉じタグとも言います。

そして、この開始タグ閉じタグの間に表示するコンテンツを配置することで、指定した構造の形式でコンテンツが表示されるようになります。

上の図の例だと、pタグを使っていることになり、pタグ段落を表現するタグになります。

あらためて前の章の例に出した構造例と、それに対応するタグの種類をまとめます。

用意されている構造例
  • 段落 : pタグ
  • 箇条書きリスト : ulタグ, olタグ, liタグ
  • 画像 : imgタグ
  • テーブル : tableタグ

他にどんなタグが気になる方のために以下にタグの一覧が見れるページのリンクを貼っておきます。

HTML 要素リファレンス

リンク先を見るとわかるかと思いますが、タグの種類はたくさんあり全部覚えるのは大変です。しかし実際によく使うタグは限られているので、全部を覚える必要もありません。

また、実際に開発をしていく上で自然と覚えていくので、暗記しようとしなくても大丈夫です。

それでは、実際にタグがどんなものなのかわかったところで、HTMLの基本的な構造を見ていくことにしましょう。

HTMLの基本構造を知る

HTMLのファイルの中身を見たことがある人はわかるかもしれませんが、HTMLは複数のタグの階層構造によって作られています。

「HTMLとは何か」の章で利用したサンプルコードの内容をもう一度確認してみましょう。

See the Pen HTMLの構造定義サンプル by つよぽん@自由探求エンジニア (@tsuyopon_xyz) on CodePen.

左側部分がHTMLのコードになります。

内容を見ると、以下のタグが使われているのがわかります。(一部抜粋)

使われているタグ
  • htmlタグ
  • headタグ
  • bodyタグ
  • pタグ

さらに見てみると、htmlタグの中にheadタグbodyタグがあって、さらにheadタグbodyタグの中にも、また別のタグがあってといったような感じで、htmlのタグは階層構造で作られていることがわかります。

この階層構造を作る際にも最低限守らなければ行けないルールがあり、それは次のとおりです。

守るべきルール
  1. HTMLファイルの1行目(1番最初)には、「<!DOCTYPE html>」を宣言する
  2. 階層構造の根っこ(ルート)は、必ずhtmlタグから始まる
  3. htmlタグの子階層にheadタグbodyタグを記述する
  4. headタグ内にはWebページ上では表示されないメタデータを定義する
  5. bodyタグ内にはWebページで表示するコンテンツを定義する

<!DOCTYPE html>の宣言

こちらに関しては1行目に書く「おまじないの言葉」くらいの感覚で覚えてもらえれば大丈夫です。

昔は「<!DOCTYPE html>」と似たような形式でいろいろな文書宣言がありましたが、現在は「<!DOCTYPE html>」に落ち着いて、他の形式は使われることはあまり無いです。

以下は公式ドキュメントから引用した文章ですが、最後の方に「今はこれだけ知っていれば大丈夫です。」と書かれていることから、「<!DOCTYPE html>」の意味について深く理解する必要はありません。

<!DOCTYPE html> — 文書型宣言です。昔々、 HTML がまだ出来たばかりの頃(1991~2年)、文書型宣言は HTML ページを正しい書き方がなされているかを示すルールセット(自動エラーチェックなどの便利なもの)に関連付けさせる役割を担っていました。しかし、最近ではそのようなことを気にする人はいなくなり、うまく動くために存在するただの遺産となってしまいました。今はこれだけ知っていれば大丈夫です。

HTML 文書の構造

htmlタグ

htmlタグについてhtmlタグについて

上の図の内容をまとめると次のとおりです。

htmlタグの内容
  • 全てのタグの根っこ(ルート)になる
  • htmlタグの直下の階層(子階層)には「headタグ」と「bodyタグ」しか含まない

htmlタグのルールは最低限これだけ覚えておけば問題ありません。

headタグ

headタグについてheadタグについて

上の図の内容をまとめると次のとおりです。

htmlタグの内容
  • headタグ内で定義した内容はWebページに表示されない
  • headタグ内ではメタ情報を定義する

上記の内、メタ情報についてもう少し掘り下げて説明します。

ここでいうメタ情報とmetaタグtitleタグといった、Webページ上に表示されないコンテンツのことで、これらはWebページ上には現れませんが、次のような役割を持ちます。

メタ情報の役割
  • 文字コードの定義 : Shift-JIS, UTF-8など
  • SEOを意識した情報の埋め込み

SEOについてはWeb開発ではなく、グーグルで検索された時に上位表示を狙うために必要な手法のことです。

この記事の範囲外の内容となるのでSEOについて詳しく知りたい方は以下のリンクを参照していただけたらと思います。

検索エンジン最適化

この他にもheadタグ内ではCSSファイルやJavaScriptファイルなどの読み込みも行うことも可能です。

CSSJavaScriptに関しては、また別の記事で詳しくお話します。

bodyタグ

bodyタグについてbodyタグについて

bodyタグはheadタグとは反対に、表示コンテンツを定義する部分になります。

さきほど例に出した以下のそれぞれのタグは、bodyタグ内でのみ使われます。なぜなら、以下の全てのタグは決められた表示方法でWebページにコンテンツを表現するタグだからです。

用意されている構造例
  • 段落 : pタグ
  • 箇条書きリスト : ulタグ, olタグ, liタグ
  • 画像 : imgタグ
  • テーブル : tableタグ

まとめ

ここまで話してきた内容をまとめると以下のとおりです。

この記事のまとめ
  • HTMLはWebページ上にコンテンツを表示する際に、どのような形式で表示するか構造を指定するのに使われるコードのこと
  • 段落」「箇条書きリスト」「画像」「テーブル」など、さまざまな表現手段が用意されている
  • HTMLでさまざまな表現手段を実現するのに「タグ」というものを利用する
  • HTMLを書く際にはタグ毎に守るべきルールがある
  • headタグにはメタ情報して、bodyタグにはWebページで表示するコンテンツの定義をする

今回の内容は以下の記事のスライドの一部を図(画像)として利用しました。スライドの全部を確認したい方は以下の記事も参照して頂けたらと思います。

あわせて読みたい
HTMLの構造を理解するHTMLはこれからWeb開発を始めようと思っている人は必ず理解して置かなければいけない分野となります。HTMLのコードの書き方を学ぶ前に、そもそもHTMLはどのような構造で成り立っているのかを理解することで今後の学習効率が上がるので基本から一緒に学んでいきましょう。...
【3つの特典付き】Webエンジニアに必要な基礎スキルを体系的に効率良く身につけたいですか?

LINE登録で無料特典を受け取る

次のような方向けに、学習をサポートするコンテンツを無料プレゼントしています。

  • Webエンジニアになりたいけど何から学習を始めれば良いかわからない
  • 今まで独学で頑張ってきたけど、独学に限界を感じてきた
  • プログラミングは出来るけど、大きめのコードが書けない

「プレゼント詳細が知りたい」「プレゼントを受け取りたい」といった方は、以下のボタンをクリックして詳細ページをご確認ください。

無料特典を受け取る

 

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です