これ何？
HTML要素をセマンティックに書く際に、よく使うタグのMDNを毎回バラバラに見るのが億劫なので、それらの情報をまとめるための個人用メモです📝
mainタグ
HTMLの
の主要な内容を表します。主要な内容とは、文書の中心的な主題、またはアプリケーションの中心的な機能に直接関連または拡張した内容の範囲のことです。<main>要素は、文書の
例
<header>Gecko facts</header> <main> <p>Geckos are a group of usually small, usually nocturnal lizards. They are found on every continent except Australia.</p> <p>Many species of gecko have adhesive toe pads which enable them to climb walls and even windows.</p> </main>
文書には hidden 属性が指定されていない
<main>要素を2つ以上置くことはできません。
navタグ
例
<nav class="crumbs"> <ol> <li class="crumb"><a href="#">Bikes</a></li> <li class="crumb"><a href="#">BMX</a></li> <li class="crumb">Jump Bike 3000</li> </ol> </nav> <h1>Jump Bike 3000</h1> <p>This BMX bike is a solid step into the pro world. It looks as legit as it rides and is built to polish your skills.</p>
使用上の注意
- すべてのリンクを
<nav>要素に入れる必要はありません。<nav>はナビゲーションリンクの主要なブロックのみに用います。<footer>にもよくリンクのリストが設置されますが、<nav>要素の中に入れる必要はありません。<nav>要素は文書内に複数設定することができます。例えば、サイトナビゲーションを一つ、ページ内ナビゲーションを一つなどです。このような場合、アクセシビリティを強化するために、aria-labelledbyを使用することができます。例をご覧ください。- スクリーンリーダーのような障碍者向けのユーザーエージェントは、この要素を使用してナビゲーション用のコンテンツを初期読み上げから省略するかを判断するために使用することがあります。
区分コンテンツのラベル付け
読み上げソフト利用者のための他のナビゲーションテクニックとして、区分コンテンツの一覧を作成して、ページのレイアウトを特定するために使用するものがあります。 区分コンテンツは aria-labelledby および id 属性の組み合わせで、セクションの目的を詳細に記述するラベルを付けることができます。このテクニックは、同一ページに二つ以上の区分要素がある場合に有用です。
<header> <nav aria-labelledby="primary-navigation"> <h2 id="primary-navigation">Primary navigation</h2> <!-- navigation items --> </nav> </header> <!-- ページコンテンツ --> <footer> <nav aria-labelledby="footer-navigation"> <h2 id="footer-navigation">Footer navigation</h2> <!-- navigation items --> </nav> </footer>
この例では、読み上げ技術は二つの
<nav>セクションがあり、一つが "Primary navigation" でもう一つが "Footer navigation" であるとアナウンスするでしょう。ラベルが提供されていない場合は、読み上げソフトを使用している人がそれぞれの nav 要素の中身を調べて、それぞれの用途を確かめなければならないかもしれません。
sectionタグ
HTML の
<section>要素は、文書の自立した一般的なセクション (区間) を表します。そのセクションを表現するより意味的に具体的な要素がない場合に使用します。少数の例外を除いて、セクションには見出しを置いてください。
例
<h1>Choosing an Apple</h1> <section> <h2>Introduction</h2> <p>This document provides a guide to help with the important task of choosing the correct Apple.</p> </section> <section> <h2>Criteria</h2> <p>There are many different criteria to be considered when choosing an Apple — size, color, firmness, sweetness, tartness...</p> </section>
使用上の注意
前述のように、
<section>は汎用的な区分要素ですので、それを表現するためのより具体的な要素がない場合にのみ使用してください。例えば、ナビゲーションメニューは<nav>要素で囲むべきですが、検索結果のリストや地図表示とそのコントロールなどは特定の要素を持たないので、<section>の中に入れることができます。また、次のようなことも考慮してください。
- この要素の内容が単独の、自立した記事として配信されて意味のある不可分の単位のコンテンツ (例えば、ブログ投稿やブログのコメント、新聞記事など) を表す場合は、
<article>要素を使用したほうがいいでしょう。- 内容が、メインコンテンツと一緒に機能する有用な付帯情報を表しているものの、メインコンテンツの一部ではない場合 (関連リンクや著者の経歴など) は、
<aside>を使用してください。- 内容が文書のメインコンテンツを表す場合は、
<main>を使用してください。- スタイル付けのためのラッパーとしてのみ使用する場合は、
<div>を使用してください。大まかに言うと、<section>は文書のアウトラインの中に論理的に現れるべきです。繰り返しになりますが、それぞれの
<section>はできるだけ、特に見出し (<h1>-<h6>要素) を<section>の子要素に含めて識別できるようにするべきです。
asideタグ
文書のメインコンテンツと間接的な関係しか持っていない文書の部分を表現します。サイドバーやコールアウトボックスなどを表現するためによく使われます。
コード例
<p>Salamanders are a group of amphibians with a lizard-like appearance, including short legs and a tail in both larval and adult forms.</p> <aside> <p>The Rough-skinned Newt defends itself with a deadly neurotoxin.</p> </aside> <p>Several species of salamander inhabit the temperate rainforest of the Pacific Northwest, including the Ensatina, the Northwestern Salamander and the Rough-skinned Newt. Most salamanders are nocturnal, and hunt for insects, worms and other small creatures.</p>
