ページの構成を示すセマンティックマークアップ【HTMLの書き方入門】

ここまでで、最初に掲載したイメージのページはほぼ出来ていますね。
これでマークアップ完了！と言いたいところですが、機械向けにもう少し情報を整理しておきましょう。

セマンティックマークアップとは

HTMLではウェブページやウェブアプリケーション内にある情報の意味・役割を、マークアップ（HTMLタグ）によって伝えています。

これをセマンティックHTMLまたはセマンティックマークアップと呼びます。
今まで使用してきた見出しのhタグ、段落のpタグなども、セマンティックHTMLタグの一部です。

ページの構成を伝えるためのHTMLタグを加えて、より機械が内容が把握しやすいセマンティックマークアップを完成させましょう。

ページの構成を示すタグ

タグ	タグの意味
header	ページ、もしくは区分の中のヘッダー（導入部分）であることを示します。
main	ページの中での主要な内容部分（メインコンテンツ）であることを示します。
aside	ページのメインコンテンツとは直接的な関係のない部分であることを示します。
nav	ナビゲーションリンクの役割があることを示します。
section	セクション (一節、１つのグループ)であることを示します。
article	自己完結していて、それ自体が独立したコンテンツとして成立するブロックを示します。
footer	ページ、もしくは区分の中のフッターであることを示します。

詳しい定義はHTML 要素リファレンス | MDNで紹介されています。

これらのタグは、全て使用する必要はありません。
必要なもののみ使用します。

今回のindex.htmlだと、下図の構成で良いでしょう。

HTMLマークアップで示すと、下記のようになります。

<body>
  <header>
    <h1>エドベース株式会社</h1>
    <nav>
      <ul>
        <li>ホーム</li>
        <li>会社概要</li>
        <li>お問い合わせ</li>
      </ul>
    </nav>   
    </header>

  <img src="images/top.png" alt="エドベース株式会社トップ画像">

  <main>
    <section>
      <h2>会社理念</h2>
      <h3>EdTechで人々に力を与えたい</h3>
      <p>自分の力を100%発揮できてない人はたくさんいると思います。本来持っているポテンシャルを我々のサービス/テクノロジーで開花させること。 </p>
      <p>眠っている才能を呼び覚まし、<strong>社会に貢献できる人材を創造すること。</strong>それが我々のミッションです。</p>
    </section>

    <section>
      <h2>自社プロダクト</h2>
      <p>開発・運営しているプロダクトです</p>

      <h3>ビジネスができるオンラインスクールのプラットフォーム</h3>
      <p>ただのeLearningサービスではありません。誰もがオンラインスクールをかんたんに運営することができます。講座を販売したり、サブスクリプションサービスを提供することができる今までにない教育プラットフォームです。</p>
      <p><a href="https://edbase.jp" target="_blank">https://edbase.jp</a></p>

      <h3>革新的テストの作成・結果の分析サービス</h3>
      <p>従来のテスト作成方法は面倒で修正が大変でした。Qeditorは革新的なテスト作成エディターを使って素早くテスト作成ができます。それだけではなく詳細な分析が可能。素早くクオリティの高いテスト作成のためのツールです。</p>
      <p><a href="https://qbase.biz" target="_blank">https://qbase.biz</a></p>
    </section>
  </main>

  <aside>
    <h2>Bunner</h2>
    <img src="images/banner.png" alt="">
  </aside>

  <footer>
    <p>エドベース株式会社</p>
  </footer>
</body>

これでindex.htmlは完成です！

前のレッスン次のレッスンレッスン一覧へ

無料ビデオ講座のお知らせ

Skillhub [スキルハブ]では無料の動画講座を多数公開しています。他校だと数万円するような講座が無料で受講できます。

無料講座一覧を見る

コース素材一覧

edbase_sozai.zip

ページの構成を示すセマンティックマークアップ【HTMLの書き方入門】

セマンティックマークアップとは

ページの構成を示すタグ

無料ビデオ講座のお知らせ

コース素材一覧

関連する講座