HTMLは、文章や画像がページの中でどのような役割を持つかをブラウザへ伝えるためのマークアップ言語です。見た目を整える前に、内容を読む順番とまとまりをHTMLで作ります。
このレッスンでは、空のindex.htmlから文書の土台を作り、ヘッダー、メインコンテンツ、フッターへ内容を分けます。
HTML文書の土台を作る
最初に、ブラウザがHTML文書として読み取るための基本構造を書きます。headにはページの設定、bodyには画面へ表示する内容を入れます。
次の画像は、「HTML文書の土台を作る」で扱うコードや構成をブラウザで表示した結果です。
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>はじめてのWebサイト</title>
</head>
<body>
<h1>はじめてのWebサイト</h1>
</body>
</html>lang="ja"は主な言語、charsetは文字コード、viewportはスマートフォンでの表示幅、titleはブラウザのタブに表示するページ名を表します。
開始タグと終了タグを対応させる
多くのHTML要素は、開始タグと終了タグで内容を囲みます。要素の中に別の要素を置くことを入れ子と呼び、後から開始した要素を先に閉じます。
次の図では、「開始タグと終了タグを対応させる」の仕組みや関係を確認できます。
<section>
<h2>サービスについて</h2>
<p>サービスの特徴を説明します。</p>
</section>インデントはブラウザの表示を変えるためではなく、親子関係を人が読みやすくするために使います。この教材ではスペース1個でそろえます。
内容の役割に合う要素を選ぶ
header：ページやセクションの導入部分nav：主要なナビゲーションmain：ページ固有の中心的な内容section：見出しを持つ内容のまとまりarticle：単独でも意味が通る記事やカードfooter：ページやセクションの末尾情報
見た目を横並びにしたいという理由だけで要素を選びません。最初に内容の意味をHTMLで表し、配置はCSSで調整します。
次の図では、「内容の役割に合う要素を選ぶ」の仕組みや関係を確認できます。
見出しでページの骨組みを作る
ページの主題には通常h1を使い、その下の大きな話題をh2、さらに細かい話題をh3で表します。文字を大きくするためではなく、内容の階層を示すために使います。
見出しだけを上から読んでもページの内容が分かるか確認してください。見た目の大きさは後からCSSで変更できます。
ブラウザで構造を確認する
CSSを使わない状態でも、見出しと文章の順番が自然に読めるか確認してください。
index.htmlを保存してChromeで開く- ページタイトルと本文が表示されるか確認する
- DevToolsのElementsで入れ子を確認する
- 開始タグと終了タグ、見出しの順番を確認する
この段階では装飾がなくても問題ありません。HTMLだけで、読む順番と内容のまとまりが伝わる状態が完成です。