HTMLのタグはどれくらい覚えればいいですか？
HTMLタグの総数は100を超えるけど、よく使うタグを20個ほど覚えればWebサイトは十分作れるよ。暗記する必要は無いので、どんなタグがあるかだけ今は流し見しておこう。まずはレイアウトでよく使うタグからだよ。
header（ヘッダー）
<header>
<h1>サンプルサイト</h1>
<nav>
<ul>
<li>HOME</li>
<li>MENU</li>
</ul>
</nav>
</header>コンテンツの冒頭、導入部分を表す。
- ページ内で複数使って良い
- header main footerを中に入れられない
- 見出し（h1 ～ h6）があれば良いけど、必須じゃない
- ページの最初に使わなくても良い
main（メイン）
<main>
<article>
<h1>記事のタイトル</h1>
<p>記事の本文</p>
</article>
</main>ページ内で最も主要なコンテンツをまとめる。
- ページ内で１回しか使えない
- header footer nav article asideタグの中に入れられない
footer（フッター）
<footer>
<p>Copyright © 2023 techsoku.com</p>
</footer>フッターを表す。（フッターとは著者の情報、関連リンク、コピーライト・ライセンス情報などのこと）
- ページ内で複数使って良い
- 他のfooter header addressの中に入れられない
- footerは最後に配置しなくても良い（一番上でも問題なし）
div（ディヴ）
<div>
<img src="dog.jpg" alt=" 犬の写真" width="600" height="400">
<p>かわいいワンちゃんの紹介です。</p>
<a href="dog.html"> 詳しくはこちら</a>
</div>意味を持たないタグ。（意味の無いタグなので下記用途等で使用される）
- 複数の要素をレイアウトのためにグループにする
- デザイン的な都合で親子にしたい
- デザイン用の空の要素や、クラスやID用のダミーがほしい
- 最適なタグが分からない時もdiv にしておこう
section（セクション）
<section>
<h2>メニュー一覧</h2><!-- sectionの子要素 -->
<ul>
<li>ホットコーヒー</li>
<li>ケーキセット</li>
</ul>
</section>コンテンツのまとまりを表す。（見出しとその内容）
- 子要素に見出しタグが必要（見出しタグは孫要素以下に置かない）※見出しタグはsectionタグ内の一番上に置かなくてもOK
- ページ内で複数使って良い
- sectionの中にsectionの入れ子もOK
見出しタグは孫要素以下に置かない
<section>
<div><!-- sectionの子要素 -->
<h2>メニュー一覧</h2><!-- sectionの孫要素 -->
<ul>
<li>ホットコーヒー</li>
<li>ケーキセット</li>
</ul>
</div>
</section>article（アーティクル）
<article>
<header>
<h1>おいしいコーヒーの淹れ方</h1>
<p>秘伝の淹れ方を伝授します。</p>
</header>
<section>
<img src="coffee.jpg" alt=" コーヒー豆の写真" width="600" height="400">
<h2>豆の選び方</h2>
<p>豆の大きさは揃っている方が良い。</p>
</section>
</article>自己完結したコンテンツを表す。（自己完結とは、article以外の部分が無くなってもarticle内のコンテンツの意味が把握できるということ）
- 見出しが必要（子要素でなくても良い）
- ページ内で複数使って良い
- articleの中にarticleの入れ子もOK
- articleの中でまとまったコンテンツを表す時はsectionがよく使われる
nav（ナビゲーション）
<nav>
<ul>
<li><a href="index.html">ホーム</a></li>
<li><a href="product.html">商品一覧</a></li>
<li><a href="contact.html">お問い合わせ</a></li>
</ul>
</nav>ナビゲーションリンクを含む領域。
- 主要なリンクの集合にのみ使えば良い（ヘッダーやフッターのリンク等）
- すべてのリンクをnavに入れる必要はない
- ページ内で複数使って良い
aside（アサイド）
<main>
<h2>ここがメインコンテンツ</h2>
<p>メインコンテンの内容</p>
</main>
<aside>
<h3>カテゴリー一覧<h3>
<ul>
<li><a href="cat_a.html">A</a></li>
<li><a href="cat_b.html">B</a></li>
<li><a href="cat_c.html">C</a></li>
</ul>
</aside>補足的な内容を表す。
- 厳密なルールはなく、メインコンテンツと間接的にしか関わらない情報に対して使うことができる
- サイドバーなどに良く使われる
- ページ内で複数使って良い
使い分けが難しそう
HTMLタグはパーフェクトな書き方はないんだ。なので「これでいいかな？」くらいの感じでも意外と大丈夫だから気楽に学ぼうね。次回はコンテンツ内（文章中）でよく使うタグだよ。