前の記事では、HTMLが
Webページの構造を作るための言語であることを学びました。
ここでは、実際にHTMLを書くために必要な
基本構造と、必ず使うタグを整理していきます。
この内容は、CSS・JavaScript・PHPすべての土台になります。
細かく暗記する必要はありませんが、
「こういう形がある」という理解を持つことが重要です。
HTMLの基本構造を理解する
HTMLには、必ず守るべき基本構造があります。
最小構成のHTMLは、次のような形です。
・DOCTYPE宣言
・htmlタグ
・headタグ
・bodyタグ
これらが揃って、1つのHTMLページになります。
※ 実際のHTMLファイルでは、タグの < > をそのまま使用します
HTML文書の全体像
HTMLファイルは、次のような構造になっています。
・文書の種類を宣言
・HTML全体を囲む
・画面に表示されない情報
・画面に表示される内容
この「役割分担」を理解することが大切です。
DOCTYPE宣言とは
DOCTYPE宣言は、
「このHTMLはHTML5で書かれています」
とブラウザに伝えるための宣言です。
これがないと、
ブラウザが古い仕様で解釈してしまうことがあります。
htmlタグの役割
htmlタグは、
HTML文書全体を囲むためのタグです。
この中に、
head と body が入ります。
headタグの役割
headタグには、
画面には直接表示されない情報を書きます。
主な内容は次のとおりです。
・文字コードの指定
・ページタイトル
・CSSやJavaScriptの読み込み
headは、
「ページの設定を書く場所」
と考えると分かりやすいです。
bodyタグの役割
bodyタグの中に書いた内容が、
実際にブラウザに表示されます。
見出し、文章、画像、リンクなど、
ユーザーが目にするものは、すべて body の中です。
見出しタグ（h1〜h6）
見出しを表すタグが、h1〜h6です。
・h1：ページ全体の見出し
・h2：章の見出し
・h3：節の見出し
数字が小さいほど重要度が高くなります。
サイズ目的で使うのではなく、
意味の階層として使うことが重要です。
段落タグ（p）
文章を書くときは、pタグを使います。
段落ごとに意味のあるまとまりを作ることで、
読みやすく、構造の分かりやすいHTMLになります。
リンクタグ（a）
リンクを作るときは、aタグを使います。
リンク先のURLは、
href属性で指定します。
画像タグ（img）
画像を表示するには、imgタグを使います。
画像には、
必ず説明文（alt）を付ける
という点を覚えておきましょう。
これは、SEOやアクセシビリティの面でも重要です。
divタグとは何か
divタグは、
意味を持たない汎用的な箱です。
複数の要素をまとめたり、
CSSでレイアウトを指定するために使われます。
HTMLを書くときの考え方
HTMLを書くときは、
次の点を意識してください。
・見た目ではなく意味でタグを選ぶ
・正しい構造を作る
・後からCSSやJavaScriptで扱いやすくする
HTMLは、
Webページの「設計図」のような存在です。
よくある間違い
初心者がつまずきやすいポイントです。
・タグの閉じ忘れ
・入れ子構造のミス
・全角文字の使用
・拡張子が .html になっていない
表示がおかしい場合は、
まずこのあたりを確認しましょう。
まとめ
HTMLの基本構造と必須タグは、
Web開発のすべての土台です。
・決まった構造がある
・タグには役割がある
・正しいHTMLが後の学習を楽にする
次は、
HTML属性（class・idなど）の役割
について学んでいきます。
次に読むべき記事
▶ 次の記事
3-3 HTML属性とは？class・id・nameの違い
コメント