<header>
  <nav>
    <a href="#">
      <img alt="Logo" src="https://via.placeholder.com/200x70?text=Logo" height="70">
    </a>
    <ul>
      <li><a href="#">メニュー1</a></li>
      <li><a href="#">メニュー2</a></li>
      <li><a href="#">下層メニューあり↓</a>
        <ul>
          <li><a href="#">メニューA</a></li>
          <li><a href="#">メニューB</a></li>
        </ul>
      </li>
    </ul>
  </nav>
  <h1>ページのタイトルが入るよ</h1>
  <p>
    ページのサブタイトル、紹介文など。<a href="#">テキストリンク</a>の表示。<i>斜体テキスト</i>や<u>下線テキスト</u>。
    <mark>ハイライトテキスト</mark>も掲載しちゃうよ。
  </p>
  <button>ボタンをクリック！</button>
</header>

<main>
  <h2>h2の見出し 春はあけぼの</h2>
  <h3>h3の見出し やうやう白くなりゆく山際</h3>
  <h4>h4の見出し 少し明かりて</h4>
  <h5>h5の見出し 紫だちたる雲の細く</h5>
  <h6>h6の見出し たなびきたる</h6>
  <p><code>head</code> タグ内にCSSファイルを読み込もう：</p>
  <pre>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;link rel="stylesheet" href="CSSファイルのパス"&gt;
    &lt;/head&gt;
  &lt;/html&gt;</pre>

  <hr>

  <figure>
    <img src="https://via.placeholder.com/600x300?text=Photo" alt="画像">
    <figcaption>とてもきれいな画像</figcaption>
  </figure>

  <ul>
    <li>リスト 1</li>
    <li>リスト 2</li>
    <li>リスト 3
      <ul>
        <li>リスト 3-1</li>
        <li>リスト 3-2</li>
      </ul>
    </li>
  </ul>
  <ol>
    <li>リスト 1</li>
    <li>リスト 2</li>
    <li>リスト 3</li>
  </ol>
  <hr>

  <table>
    <tr>
      <th>サービス名</th>
      <th>料金</th>
      <th>サポート</th>
      <th>期間</th>
    </tr>
    <tr>
      <td>サービスA</td>
      <td>3,000円</td>
      <td>なし</td>
      <td>1年間</td>
    </tr>
    <tr>
      <td>サービスB</td>
      <td>8,000円</td>
      <td>電話サポートあり</td>
      <td>2年間</td>
    </tr>
    <tr>
      <td>サービスC</td>
      <td>12,000円</td>
      <td>24時間サポート</td>
      <td>3年間</td>
    </tr>
  </table>
  <hr>

  <blockquote>
    夏は夜。月のころはさらなり、闇もなほ、蛍の多く飛びちがひたる。また、ただ一つ二つなど、ほのかにうち光て行くもをかし。雨など降るもをかし。
    <footer>清少納言</footer>
  </blockquote>
  <hr>

  <form>
    <label>名前:</label>
    <input type="text" placeholder="例：Mana">
    <label>メールアドレス:</label>
    <input type="email" placeholder="例：info@example.com">
    <label>種類：</label>
    <select>
      <option value="me">俺</option>
      <option value="others">俺以外</option>
    </select>
    <label>メッセージ:</label>
    <textarea placeholder="メッセージをどうぞ"></textarea>
    <input type="reset" value="リセット">
    <input type="submit" value="送信">
  </form>
</main>

<footer>
  <p><small>&copy; コピーライト 2020</small></p>
</footer>