<header> <main>などに代表されるセマンティックHTMLを使い、意味のある構造作りの練習をします。題材としてウィキペディアの記事を使ったページを作成します。
【準備】
- デスクトップ等にフォルダを作成し、「semantic_html」という名前にします。
- エディタで新規ファイルを作成します。index.htmlと命名し、指定のフォルダに保存します。
- HTMLの基本フォーマットを入力します。Visual Studio Codeの場合は、! + Tabキーで入力できます
手順
①ブラウザでWikipediaを開く： 記事の構成（タイトル、目次、本文、各章のまとまり）を観察する。
※WikipediaはCreative Commons 「CC BY-SA 4.0（表示-継承 4.0 国際）」のルールのもと、自由に使用可能です
②セマンティックタグで構造をつくる
- ページのはじまり→
<header> - メインコンテンツ→
<main> - 話題のまとまり→
<section> - ページの終わり→
<footer>
③個々のマークアップをする
- ページ全体のタイトル→
<h1> - 各章のタイトル→
<h2> - 注釈や参考リンク→
<ul>,<li> - 本文→
<p> - 補足データ（右側の表など）→
<aside> - 引用元→
<cite> - 著作権表示など小さく表示される文→
<small>
セルフチェック
hタグの順番:
<h1>の次にいきなり<h3>が来ていないか（階層構造の正しさ）- 同じ位置付けの見出しに異なるhタグを使っていないか
適切なタグ選び:
- 何でも
<p>,で済ませていないか<div>
※<div>は コンテンツのまとまりを作る汎用的なタグです
リストの活用:
- 箇条書きの部分に
<ul>や<ol>を使っているか