RIT Tech Blog

株式会社RITのエンジニアが知見を共有する技術ブログです。

セマンティックHTMLでセクショニングをする

html5

f:id:sk0515:20191227182921p:plain

はじめに

こんにちは！デザイナーの金森です。

仕事納めですね。2019年いろいろありましたね、お疲れさまでした！ RITではデザイナーも企画のアイディエーションから入り、開発まで幅広く携わっています。 今回はその中でも開発の「セマンティックHTML」のお話をしようかと思います。

セマンティックHTMLとは？

セマンティックとは、一般的には「意味」や「意味論」に関することを指す語である。IT用語としては、コンピュータに文書や情報の持つ意味を正確に解釈させ、文書の関連付けや情報収集などの処理を自動的に行わせる技術について用られる語である。セマンティックとは何？Weblio辞書

????ちょっとわかりにくいですね 簡単に説明すると、各部品に対応する意味のあるHTML要素を使いましょうという考え方です。

そうすることによって

  • マシンリーダブルなコードになり、SEOに強くなる

  • 人間にとっても読みやすいコードになる(延々とdivを見比べる必要がなくなる)

  • アクセシビリティが向上し、障がいをお持ちのかたでも快適にサイトやサービスが使えるようになる

などのメリットがあります！

セマンティックHTMLの例

例えば、最上位レベルの見出し要素をコーディングする際に、 <h1>これが最上位レベルの見出し！</h1> と書きますよね？ f:id:sk0515:20191227175042p:plain

このように記述することで、検索エンジンがその内容をSEOに影響する重要なキーワードと見なしたり、ブラウザの読み上げ機能などを使用できるようになります。

一方で、正直どの要素でも上記のような最上位レベルの見出しのようなデザインに見せることができます。 <div>これが最上位レベルの見出し?</div> f:id:sk0515:20191227175324p:plain これは一見、最上位レベルの見出しのように見えますが、h1のようにセマンティックな意義がないのでSEOやブラウザの読み上げなどのメリットを受けることが出来ません。

見かけ上は正しいように見えていて書けているけど、SEOやアクセシビリティの観点からは良くないというのがHTMLの難しいところですね....! 超基本なことですが、わたしも意図して書かないと良くないコードを書いてしまったりするので常日頃から注意する必要があります。。。

セクショニング・コンテンツ

セマンティック要素はめちゃめちゃある(おおよそ100ほどある)ので、今回はセクショニング・コンテンツだけ取り出して解説します。

セクショニング・コンテンツとは、文章の区分や節などの、区切りを表すコンテンツで以下のものを指します。 順を追って説明していきます。

  • <article>
  • <section>
  • <nav>
  • <aside>

<article>について

HTML の article 要素は文書、ページ、アプリケーション、サイトなどの中で自己完結しており、 (集合したものの中で) 個別に配信や再利用を行うことを意図した構成物を表します。例えば、フォーラムの投稿、雑誌や新聞の記事、ブログの記事などが含まれます。MDN Web Docs: 記事コンテンツ要素

  • 注意点
    • articleの内容が単独で切り出しても、独立して意味を持っていること
    • 子要素として見出し要素が必要(h1〜h6のどれか)
    • 子要素としてsectionタグが少なくとも1つ必要
    • articleのなかで、articleを子要素として持つことも可能
<article>
    <h1>RITについて</h1>
    <p>千代田区にあるコンサルティングとインキュベーションの会社です。</p>
    <section>
        <h2>やってること</h2>
        <p>テキストテキスト</p>
    </section>
</article>

<section>について

HTML の section 要素は、 HTML 文書の中で単独のセクション (区間) を表します。セクションを表現するより意味的に具体的な要素がない場合に使用します。必ずではありませんが、通常はセクションには見出しがあります。MDN Web Docs: 汎用セクション要素

  • 注意点
    • 子要素として見出し要素が必要(h1〜h6のどれか)
    • 単独で切り出しても、独立して意味を持っているものには使用してはならない
      • その場合はarticleを使用すること
    • 文書のアウトライン上のみで使用すること
      • スタイル付けのみが目的なのであれば、divを使用すること
<section>
    <h1>ABOUT</h1>
    <p>この記事はセマンティックhtmlの説明をしています。</p>
</section>

<nav>について

HTML の nav 要素は、現在の文書内の他の部分や他の文書へのナビゲーションリンクを提供するためのセクションを表します。ナビゲーションセクションの一般的な例としてメニュー、目次、索引などがあります。MDN Web Docs: ナビゲーションセクション要素

  • 注意点
    • すべてのリンクに対してnavを使用する必要はなく、ページ内でも重要な部分にのみ使用すること
    • 上述のようにヘッダーやサイドバーなどnav要素は複数使用してもOK!
<nav>
    <ul>
        <li>
            <a href="#">ABOUT</a>
        </li>
        <li>
            <a href="#">FEATURE</a>
        </li>
        <li>
            <a href="#">PRICE</a>
        </li>
    </ul>
</nav>

<aside>について

HTML の aside 要素は、文書のメインコンテンツと間接的な関係しか持っていない文書の部分を表現します。サイドバーやコールアウトボックスなどを表現するためによく使われます。MDN Web Docs: 余談要素

  • 注意点
    • 文章中の括弧書きについては、文章の主要な流れに属するものであるといえますので、これをタグ付けするためにaside要素を使用することはできません
      • 注意書きや、注釈などに用いるための要素です
<p>こんにちは、RITでデザイナーをしている金森です。</p>

<aside>
    <p>余談ですが、好きなことは音楽を聞くことです。</p>
</aside>

<p>これからセマンティックhtmlについて説明します。</p>

まとめ

今回ご紹介したものはHTML構造のアウトラインをつくる上で重要になるものばかりです。 全部divでいいんじゃない？？？って気持ちにもなったりしますが、ユーザーを一番に考えて良いコードを書くように気をつけましょう。 長くなりましたがここまで読んでくれた方ありがとうございます！良いお年を〜！