HTMLの基本構造
すべてのHTML文書には基本となる骨組みがあります。このLessonでは、doctype、html、head、body の役割を理解します。
このLessonのゴール
- HTML文書の基本構造を何も見ずに書ける
headとbodyの違いを説明できる- 日本語ページに必要な基本設定ができる
最終制作物とのつながり
店舗サイトを公開したときに、ブラウザや検索エンジンへページの言語、文字コード、画面幅、タイトルを正しく伝えられる状態にします。
基本テンプレート
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>ページタイトル</title>
</head>
<body>
<h1>ページの見出し</h1>
</body>
</html>
各要素の役割
| 記述 | 役割 |
|---|---|
<!doctype html> | HTML5の文書であることを宣言する |
<html lang="ja"> | 文書全体と、主な言語を示す |
<head> | タイトルや文字コードなど、ページの設定を書く |
<body> | ブラウザの画面に表示する内容を書く |
charset="UTF-8" は文字化けを防ぐ設定です。viewport はスマートフォンで適切な幅に表示するために使います。
入れ子とインデント
HTML要素の中に別の要素を置くことを「入れ子」と呼びます。親子関係が分かるように、子要素はスペース2つ分下げます。
<body>
<main>
<h1>お知らせ</h1>
<p>新しい記事を公開しました。</p>
</main>
</body>
タグは、あとから開いたものを先に閉じます。開始タグと終了タグの対応を意識しましょう。
実際に試してみよう
基本テンプレートからHTMLファイルを作り、title と h1 に異なる文章を入れてください。ブラウザのタブとページ内で、どこに表示されるか確認しましょう。
完了条件
practice-site/index.htmlに基本構造が揃っている- ブラウザのタブに店舗サイトのタイトルが表示される
headとbodyの役割を説明できる
まとめ
headにはページの設定、bodyには画面へ表示する内容を書きます。次のLessonでは、店舗サイトの本文を基本タグで組み立てます。
CHECK QUIZ