sectionタグでコンテンツの整理【webデザイン基本】

アイキャッチを置いてみます。
アイキャッチは検索エンジン的には特に重要ではありません。
人が見た時にウェブページの中の表紙的な扱いで、扉から入って中を読ませる入り口の動線になっています。
重要な要素では無いでの<div>を使います。
<div>はHTML5から何の意味も持たなくなりました。
唯一グループ化ができる機能だけで使われています。
というわけでアイキャッチで使用するタグは以下を使います。

<div class="eye-catch">
  <img src="" alt="">
</div>

<div>には必ずクラス名を付けましょう。
アイキャッチなのでeye-catchというクラス名にしました。
あとは画像をセットします。

<aside>は<main>とセットで

HTMLにおいて構築の方法で悩むのが<aside>です。
<aside>の中に名前からしてサイドバーの部分を置くというは何となく分かるのですが他のタグとどう組み合わせるのか考えてみました。
自分なりに結論から言うと<main>と隣接する位置に置くという事、そして記事を補足する項目という事で<article>に内包するという事で落ち着きました。
もう１つなぜ<article>に絡めるかというとarticleのsideなのでasideと解釈しました。
ただsideに置くのはメインコンテンツの<main>で<article>はそれらをまとめるものとしました。

<article>
  <aside>
    <h3>補足見出し</h3>
    <p>補足本文</p>
  </aside>
  <main>
    <section>
      <h1>重要な見出し</h1>
      <p>本文</p>
    </section>
    <section>
      <h1>重要な見出し</h1>
      <p>本文</p>
    </section>

  </main>
</article>

これで主要なタグは揃いました。
基本のタグの型はこのままで、これを応用していきます。

検索を念頭においたウェブページの重要なタグ

webページではコンテンツが重要です。
ネットユーザーは検索をかける時、自分の知りたい情報のキーワードを入力します。
サイトのタイトルではありません。
企業サイトにしてもblogにしても検索したキーワードがヒットします。
<header>、<footer>より<main>の中のキーワードが最重要になっています。
ですので重要なキーワードを表す<h1>は<main>の中で使用するようにしましょう。

最終的なHTMLの構成です。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
</head>
<body ontouchstart="">
  <header>
    <h2>ページタイトル</h2>
    <nav>
      <ul>
        <li><a href="#">メニュー</a></li>
        <li><a href="#">メニュー</a></li>
        <li><a href="#">メニュー</a></li>
        <li><a href="#">メニュー</a></li>
      </ul>
    </nav>
  </header>
  <div class="eye-catch">
    <img src="" alt="">
  </div>
  <article>
    <aside>
      <h3>補足見出し</h3>
      <p>補足本文</p>
    </aside>
    <main>
      <section>
        <h1>重要な見出し</h1>
        <p>本文</p>
      </section>
      <section>
        <h1>重要な見出し</h1>
        <p>本文</p>
      </section>

    </main>
  </article>

  <footer>
    <p>Copyright</p>
  </footer>
</body>
</html>

CSSをリンクする

HTMLのデザインに関する重要なタグの１つとして<link>があります。
CSSの記述方法は３種類ほどあり<head>内に記述する方法とタグ自体に記述する方法、そして一番多いのは外部スタイルシートといってHTML外にファイルとして保存し、HTMLファイルにリンクを張るという方法です。
そのリンクを張るために使われるタグが<link>になります。
CSSファイル名をbase.cssと定義し、ファイルをリンクしてみます。