HTMLの文書構造：見出し・リンク・セマンティック要素でページを組み立てる
h1〜h3、header・nav・main・footer、sectionとarticleを使い、紹介サイトの構造を作成。ページ内リンクとキーボード操作も確認します。
第2回では、前回の文章を学習会の紹介ページへ育てます。目標は「ページのどこに何の情報があるか」をHTMLで表現することです。見た目はまだブラウザーの標準表示のままにし、見出しの階層とページ内リンクを確かめます。
まず情報の順番を決める
ページの目的と主な内容
今回のページは、学習会で何を学べるかを伝える紹介サイトです。上から、サイト名とナビゲーション、ページの主題、学習内容、運営の紹介、補足情報という順序にします。先に文章として順序を決めると、CSSで並べ替える前に読みやすさを確認できます。
h1・h2・h3で話題を整理する
このページではh1をページ全体の主題、h2を「学べること」などの章、h3をHTML・CSS・JavaScriptという各章内の項目に使います。文字を小さくしたいという理由で見出しレベルを変えないでください。見た目の大きさはCSSで調整できます。
見出しを順番に読むだけでページの概要がわかるか確認します。h2の下に突然h4を置くより、情報の階層に合わせて順序を組み立てる方が読者にも理解しやすくなります。
ページの領域に意味を付ける
header・nav・main・footer
headerには導入、navには主な移動用リンク、mainにはそのページの中心的な内容、footerには補足情報を置きます。この例では主なmainを1つにします。divは用途を限定しないまとまりで、意味のある要素が適していない場合や、後でレイアウトを整えるときに使います。
sectionとarticleを使い分ける
sectionは見出しを持つ話題のまとまりに使います。articleは、それ自体を取り出しても内容が理解できる独立した項目に向いています。今回の各学習内容は、題名と説明を持つカードとして扱います。単に枠を描きたいだけなら、無理にarticleにせずdivでも構いません。
リンクでページ内を移動する
hrefとidを対応させる
href="#lessons"は、同じ文書内のid="lessons"へ移動するリンクです。idは文書内で重複させません。リンクを押したときに目的の章へ移動するか、Tabキーで選んでEnterキーでも動くか確認します。
別ページへのリンクはhref="./about.html"のように書けますが、まだそのファイルがない場合はリンク切れになります。存在しないページを仮のリンクとして残さず、今回は実在するページ内の章へ移動させます。「こちら」だけでなく「学べること」のように行き先がわかる文字を使いましょう。
リンクとボタンを混同しない
別の場所へ移動するときはa、メニューを開くなど現在の画面で操作するときはbuttonを使います。divにクリック処理を付けただけでは、キーボード操作や役割を自分で補う必要が生じます。目的に合うHTML要素を選ぶと、標準の操作を利用できます。
index.htmlを構造化する
この回の完成コード
前回のindex.html全体を次の内容へ置き換えます。文章を変えながら、開始タグと終了タグの対応を追ってください。
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="robots" content="noindex">
<title>まなびのアトリエ | 学べること</title>
</head>
<body>
<a href="#main">本文へスキップ</a>
<header>
<a href="#top">まなびのアトリエ</a>
<nav aria-label="メインナビゲーション">
<a href="#lessons">学べること</a>
<a href="#about">私たちについて</a>
</nav>
</header>
<main id="main">
<section id="top">
<h1>学ぶだけで終わらない。自分のサイトを作ろう。</h1>
<p>3つの技術を使って、架空の学習会の紹介ページを作ります。</p>
</section>
<section id="lessons">
<h2>学べること</h2>
<article><h3>HTMLで伝える</h3><p>内容の意味と順序を組み立てます。</p></article>
<article><h3>CSSで整える</h3><p>色、余白、配置を調整します。</p></article>
<article><h3>JavaScriptで動かす</h3><p>クリックや入力に反応させます。</p></article>
</section>
<section id="about">
<h2>私たちについて</h2>
<p>このサイトはWeb制作を練習するための架空のサイトです。</p>
<ul><li>小さく作る</li><li>ブラウザーで確認する</li><li>改善を重ねる</li></ul>
</section>
</main>
<footer><small>まなびのアトリエ — Web制作の学習サンプル</small></footer>
</body>
</html>画面で確認するポイント
ページ内リンクをクリックすると、対応する章へスクロールします。CSSがなくてもサイト名、主題、章、項目の順序が伝われば成功です。最初の「本文へスキップ」は、繰り返し現れるナビゲーションを飛ばすためのリンクです。後の回でフォーカス時に表示するスタイルを付けます。
練習と構造の点検
運営紹介に項目を追加する
「私たちについて」に開催方針などの段落を追加します。並列の方針はul、順序のある手順はolで表現してください。箇条書きの記号を文字として入力するより、リストの意味を伝えられます。
よくある失敗を直す
pの中へ大きな章全体を入れたり、リンクの中に別のリンクを入れたりしないでください。ブラウザーがHTMLを補正すると、ソースと実際のDOMが異なることがあります。開発者ツールのElementsで入れ子を確認すると原因を探せます。検索向けの語句を増やすことより、ページの目的に沿った見出しと文章を先に整えます。
参考資料
この回の完成版と学習の続き
第2回の見本をブラウザーで開く · 第2回の完成コードをダウンロード
ZIPを展開してindex.htmlを開けば、この回の完成時点から試せます。コードを変更する場合は、ZIP内のファイルをテキストエディターで編集して保存してください。