HTML講座 / セマンティック要素でページの領域を分ける
セマンティックなHTML要素は、ページ内の領域が何のために存在するかを表します。主な内容にはmain、主要な移動にはnav、独立した記事にはarticleを使います。画面の上下左右への配置は、要素名ではなくCSSで指定します。
各領域の役割を理解する
| 要素 | 内容の役割 |
|---|---|
| header | ページや節の導入。サイト名、見出しなど |
| nav | 主要なナビゲーション |
| main | ページに固有の主要な内容 |
| article | 単独でも意味が通じる記事など |
| section | 見出しで主題を示せる内容のまとまり |
| aside | 主な内容と間接的に関連する補足 |
| footer | ページや節の末尾の情報 |
リンクがある場所すべてをnavにする必要はありません。また、通常の文書では表示される主要なmainを一つにします。asideは補足という意味なので、単に右側へ置きたいという理由だけで選びません。意味のある要素を使うだけで、アクセシビリティや検索順位が保証されるわけでもありません。
完全なページを作って確認する
次のコードをindex.htmlとして保存して開きます。ページ内のリンクを使っているため、別のファイルを準備せずに基本動作を試せます。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Plants for Spring | Small Garden</title>
</head>
<body>
<header>
<p>Small Garden</p>
<nav aria-label="On this page">
<a href="#article">Read the article</a>
<a href="#sunlight">Sunlight needs</a>
</nav>
</header>
<main>
<article id="article">
<h1>Plants to Grow in Spring</h1>
<section id="sunlight">
<h2>Sunlight needs</h2>
<p>Different plants need different amounts of sunlight.</p>
</section>
</article>
<aside>
<p>Check the last frost date for your area before planting.</p>
</aside>
</main>
<footer>
<p>Small Garden guide</p>
</footer>
</body>
</html>
サイト名、ナビゲーション、記事、補足、末尾の情報が、おおむね文書に書いた順に表示されます。「Sunlight needs」を選ぶとid="sunlight"の節へ移動します。補足を横に並べたい場合はCSSのレイアウトを追加し、意味に合わない要素へ変更しないようにします。見出しレベルは見出しと段落の階層に合わせます。
article・section・divを選ぶ
一つのブログ記事は独立して読めるのでarticleに向いています。その中の「準備」「手順」などの話題は、見出し付きのsectionとして整理できます。ただし、すべての見出しと段落を機械的にsectionで囲む必要はありません。
枠線や背景色を付けるためだけの包みならdivとspanのような汎用要素を検討します。headerとfooterはページ全体だけでなく、個々の記事にも使えます。要素の定義はMDNのHTML要素一覧で確認できます。
同じ役割の領域を識別する
サイト全体のメニューと記事内のメニューがある場合は、目的に合う名前で区別します。次のaria-labelは支援技術に伝える名前で、画面にメニュー見出しを自動表示するものではありません。ファイル名やIDは実在する移動先へ合わせます。
<nav aria-label="Site navigation"> <a href="index.html">Home</a> <a href="about.html">About</a> </nav> <nav aria-label="Sections in this article"> <a href="#sunlight">Sunlight</a> <a href="#watering">Watering</a> </nav>
同じ主題の文章でも、単独の記事ならarticle、記事内の話題ならsection、装飾用の包みならdivと判断が変わります。W3C WAIの領域への名前付けも参考になります。
CSSの前に構造を読む
文書に書いた順に見出し、メニュー、本文を読み、内容の流れが理解できるか確認します。複数の表示中のmain、主題のないsection、配置だけのためのasideを見直します。CSSを外しても内容の関係が分かることを確認してからレイアウトを調整してください。
HTML講座 / detailsとsummaryで開閉できる説明を作る
JavaScriptなしで開閉する補足説明を作ります。open属性の真偽、分かりやすいsummaryの書き方、Tab・Enter・Spaceによる操作の確認方法も紹介します。
HTML講座 / formの構造とGET・POSTによる送信
action、method、nameの役割とGET・POSTの違いを学びます。FormDataと開発者ツールを使い、送信対象の値、入力検証、サーバー処理を分けて確認します。
HTML講座 / タイトル・説明・言語・文字コードを設定する
title、meta description、charset、viewportとhtmlのlangを整理します。タブと本文の違い、文字化けの調査、検索結果の説明が必ず採用されるわけではない点も学べます。
HTML講座 / HTMLとは何か、Webページでの役割を理解する
HTMLで文書の意味と構造を表す方法を、CSS・JavaScriptとの違いとともに学びます。実際にHTMLファイルを保存して、ブラウザーで確認する手順も紹介します。
doctype、html、head、bodyの役割と、文字コード・文書タイトル・viewportの設定を解説します。ファイルの保存から表示確認、表示されない場合の調べ方まで学べます。
行と列を持つデータをHTMLの表で表す基本を学びます。見出しセルとデータセル、theadとtbody、横幅が広い表のスクロール方法も紹介します。
h1〜h6で見出しの階層を表し、pで段落、brで段落内の改行を作る方法を学びます。文字サイズと文書構造を区別し、見出しの飛び級を修正する練習も行います。
HTML講座 / caption・scope・セル結合で読みやすい表を作る
表の題名、列見出しと行見出し、colspanとrowspanの関係を学びます。色や位置だけに依存せず、一つの値に対応する見出しを判断できる表を目指します。
imgのsrc、alt、width、heightの役割を学びます。画像の配置場所と相対パス、装飾画像の代替テキスト、表示幅とファイル容量の違いも説明します。
見出し、リンク、画像、フォームを意味のあるHTMLで作る方法を学びます。スキップリンク、キーボード、フォーカス、ズームを確認する小さなページと、検査の限界も紹介します。