HTMLとは
HTMLは、文章のどこが見出しで、どこが本文やナビゲーションなのかをブラウザーや検索エンジンへ伝えるマークアップ言語です。
以前の2記事を統合し、HTML Living Standardを前提に書き直しました。見た目はCSS、動作はJavaScript、意味と構造はHTMLが担当します。
最小構成
文字コードとviewportはhead内に記述し、ページ固有の中心内容はmainで囲みます。h1はページの主題が分かる文言にします。
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>ページタイトル</title>
<meta name="description" content="ページ内容の説明">
</head>
<body>
<header>サイトヘッダー</header>
<main>
<h1>ページの主見出し</h1>
<p>本文</p>
</main>
<footer>サイトフッター</footer>
</body>
</html>主要な要素の使い分け
header：ページやセクションの導入部nav：主要なナビゲーションmain：ページ固有の中心内容。通常は1つarticle：単独でも意味が通る記事や投稿section：見出しを伴うテーマ単位のまとまりaside：補足、関連記事、サイドバーfooter：ページやセクションの末尾情報
よくある失敗
迷ったときは「その要素がなくても文書構造を説明できるか」を考えます。単なるレイアウト用の箱ならdivで問題ありません。
- 見た目を大きくするためだけにhタグを選ぶ
- クリックできるdivを作り、キーボード操作を失わせる
- sectionを単なる余白用コンテナとして乱用する
- 画像のaltを空欄にすべき装飾画像と、説明が必要な画像を区別しない
