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はどのような構造で成り立っているのかを理解することで今後の学習効率が上がるので基本から一緒に学んでいきましょう。...
【やる気満々な方向け】学習サポートとオンライン講義やってます!

Webエンジニアになりたい人向けに、MENTAにて『【やる気満々な方向け】未経験からのWebエンジニア育成コース』というプランを用意しております。

このプランでは、「【学習コンテンツ】Web開発」と「【初心者向け】The Web Developer Bootcamp」で紹介している教材を使って学習を進めていただきます。

【学習コンテンツ】Web開発」に用意している学習コンテンツのスライドも「【初心者向け】The Web Developer Bootcamp」で紹介している教材をベースに作っています。

あわせて読みたい
【初心者向け】The Web Developer Bootcampはじめに 「The Web Developer Bootcamp」はWeb白熱教室の「学習コンテンツ」のベースとなっている教材です。 ...
あわせて読みたい
Web開発Webエンジニアになるために必要な知識・スキルを学習できるコンテンツを用意しました。未経験者でも、①開発環境の準備、②Webの基本的な仕組み、③HTML、④CSS、⑤JavaScriptと順を追って学習することでスキルが身につくことを目的に教材を作成しています。...

誰向けのプラン?

こちらのプランは次のような方に向けて作られています。

プラン対象者
  1. Progateやドットインストールで一通り学習したけど、次に何をすればよいかわからない
  2. Webエンジニアになるまでの学習プランがあると助かる
  3. 学習していてわからないところが出てきたときに質問したい
  4. コードレビューして欲しい
  5. オンライン講義に参加したい
  6. 学習した内容をアウトプットした際に、フィードバックがもらえたら嬉しい
  7. おすすめの学習教材を知りたい
  8. Webフロントエンド・バックエンドを学習したい
  9. フルスタックエンジニアになりたい
  10. 文系出身で今までプログラミングをしてこなかったけど、将来Webエンジニアになりたい
  11. 将来フリーランスになることを目指している

プラン内容は?

【やる気満々な方向け】未経験からのWebエンジニア育成コース』では次のことを行っております。

プラン内容
  1. Udemyの教材や、Web白熱教室の学習コンテンツを使った学習プランの提示 (学習プランに沿って学習を進めていただきます。)
  2. 教材・学習コンテンツの課題をこなしたあとは、僕にコードレビュー依頼を投げていただくことで、コードを添削する(課題クリア後は、引き続き学習プランの内容を続けていただきます。)
  3. プラン契約者が参加するSlackグループにて質問し放題
  4. Slack内にある「アウトプットの場」チャンネルにて、学習したことをアウトプットをしていただくことで、それに対しフィードバックをする (学習内容のアウトプットは復習にもなるため、アウトプットすることを強く推奨します。)
  5. 画面共有を使ったオンライン講義 (オンライン講義は録画して、いつでもふり返れるようにしています。(オンライン講義動画(ウェビナー動画)))
  6. 学習プラン以外の内容に対しての質疑応答 (内容によっては回答できないものもありますが、まずは気軽に質問していただけたらと思います。)

その他注意点

1人で対応していることもあるため、対応が難しくなった場合は急遽募集を終了する可能性もあることをご了承ください。

もしくは、僕以外にメンターを増やすことで募集を継続するということも考えているため、その場合は現在のプラン料金の値段を上げることなると思います。

仮にプラン料金を上げる場合は、『現在のプラン料金 × メンター人数』の料金になるかと思います。

現在の値段が5000円なので、1日1本ペットボトルジュースを買うのを我慢することで(約160円)、効率よく学習できるので費用対効果はかなり高いかなと自負しています。

また、今後メンターが増えて、プラン料金が10000円15000円と上がったとしても、月々の料金は申し込んだときの料金となるので、5000円のときに契約した場合はずっと5000円で受講することができます。

詳しく話を聞いてみたい方は

以下のいずれかでメッセージをいただけたらと思います^^

 

プラン内容については以下のリンク先からも確認することが出来ます^^

【やる気満々な方向け】未経験からのWebエンジニア育成コース

COMMENT

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