HTMLファイルには、必ず決まった基本構造があります。
これはWebページを書く上での「ルール」のようなものです。
まずは、全体像を見てみましょう。
目次
HTMLの基本形（全体像）
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ページタイトル</title>
</head>
<body>
<h1>見出し</h1>
<p>ここに文章が入ります。</p>
</body>
</html>今は意味が分からなくても問題ありません。
これから1つずつ解説します。
とは？
<!DOCTYPE html> は、
「この文書はHTML5ですよ」 とブラウザに伝える宣言です。
- 表示されるものではない
- 必ず一番上に書く
- 書かないと表示崩れの原因になることがある
👉 おまじないではなく、宣言です。
タグの役割
<html> タグは、
HTML文書全体を包む箱のような存在です。
<html lang="ja">lang="ja"はページの言語指定- 検索エンジンや音声読み上げで使われる
に書くもの
<head> の中には、
ページの設定情報を書きます。
代表的なものは：
- 文字コード（meta charset）
- ページタイトル（title）
- CSSファイルの読み込み
- SEO関連情報
👉 画面には直接表示されません。
に書くもの
<body> の中には、
実際に画面に表示される内容を書きます。
- 見出し
- 文章
- 画像
- ボタン
- フォーム など
👉 ユーザーが見るものは、すべて body の中です。
なぜこの構造を守る必要があるのか？
HTMLの基本構造を守らないと、
- CSSが効かない
- JavaScriptが正しく動かない
- ブラウザごとに表示が変わる
といった問題が起こります。
HTMLの構造＝土台
ここが崩れると、すべてが不安定になります。
まとめ
- HTMLには決まった基本構造がある
- doctype はHTMLの宣言
- head は設定、body は表示内容
- 正しい構造がすべての基礎になる
次回は、HTMLタグの書き方（開始タグ・終了タグ）を解説します。
コメント