HTML Living Standard

Category
Published
Updated

HTML Standard 日本語訳

  • 横着して div で済ませてしまうことがあるので、たまに見返す用

ざっくり要約

  • article
    • 独立して自己完結できるもの
    • 他所に転用しても意味が成立するもの
    • section の中に article が来ることもあり得る
  • section
    • 見出しを伴う
    • 主題を持つグループのかたまり
    • 単にスタイルを当てるなどの目的グルーピングする際は div を使う
  • nav
    • 他のページへのナビゲーションとなるリンクをまとめるセクション
      • ただし、リンクのグループが nav である必然性はない
    • nav 要素の中身は、必ずしもリストである必要はない
  • aside
    • 周囲のコンテンツに付随的に関連するコンテンツから構成される
    • サイドバーなど、メインコンテンツとは別のコンテンツに対して使用する
    • aside > nav といった使い方をするケースが多い
  • main
    • 文書の主要なコンテンツを表す
    • 基本的には祖先要素が html, body, div となる
    • 基本的にはページに 1 回だけ使用する
    • main > article といった使い方をするケースが多い

article

文書、ページ、アプリケーション、またはサイトの中で完全もしくは自己完結した構造を表す。

独立して配布可能なまたは再利用可能なものである。

<article itemscope itemtype="http://schema.org/BlogPosting">
  <header>
    <h2 itemprop="headline">The Very First Rule of Life</h2>
    <p>
      <time itemprop="datePublished" datetime="2009-10-09">3 days ago</time>
    </p>
    <link itemprop="url" href="?comments=0">
  </header>
  <p>
    If there's a microphone anywhere near you, assume it's hot and
    sending whatever you're saying to the world. Seriously.
  </p>
  <p>...</p>
  <footer>
    <a itemprop="discussionUrl" href="?comments=1">Show comments...</a>
  </footer>
</article>
<article itemscope itemtype="http://schema.org/BlogPosting">
  <header>
    <h2 itemprop="headline">The Very First Rule of Life</h2>
    <p>
      <time itemprop="datePublished" datetime="2009-10-09">3 days ago</time>
    </p>
    <link itemprop="url" href="?comments=0">
  </header>
  <p>
    If there's a microphone anywhere near you, assume it's hot and
    sending whatever you're saying to the world. Seriously.
  </p>
  <p>...</p>
  <section>
    <h1>Comments</h1>
    <article
      itemprop="comment"
      itemscope
      itemtype="http://schema.org/Comment"
      id="c1"
    >
      <link itemprop="url" href="#c1">
      <footer>
        <p>
          Posted by:
          <span itemprop="creator" itemscope itemtype="http://schema.org/Person">
            <span itemprop="name">George Washington</span>
          </span>
        </p>
        <p>
          <time itemprop="dateCreated" datetime="2009-10-10">15 minutes ago</time>
        </p>
      </footer>
      <p>Yeah! Especially when talking about your lobbyist friends!</p>
    </article>
    <article
      itemprop="comment"
      itemscope
      itemtype="http://schema.org/Comment"
      id="c2"
    >
      <link itemprop="url" href="#c2">
      <footer>
        <p>
          Posted by:
          <span itemprop="creator" itemscope itemtype="http://schema.org/Person">
            <span itemprop="name">George Hammond</span>
          </span>
        </p>
        <p>
          <time itemprop="dateCreated" datetime="2009-10-10">5 minutes ago</time>
        </p>
      </footer>
      <p>Hey, you have the same first name as me.</p>
    </article>
  </section>
</article>

section

section要素は、文書またはアプリケーションの一般的セクションを表す。この文脈において、セクションは、典型的な見出しを伴う、主題を表すコンテンツのグループである。

<article>
  <hgroup>
    <h2>Apples</h2>
    <p>Tasty, delicious fruit!</p>
  </hgroup>
  <p>The apple is the pomaceous fruit of the apple tree.</p>
  <section>
    <h3>Red Delicious</h3>
    <p>
      These bright red apples are the most common found in many
     supermarkets.
    </p>
  </section>
  <section>
    <h3>Granny Smith</h3>
    <p>
      These juicy, green apples make a great filling for
     apple pies.
    </p>
  </section>
</article>

article と section

要素のコンテンツを配給することが理にかなう場合、著者はsection要素の代わりにarticle要素を使用するよう推奨される。

div と section

section要素は包括的なコンテナー要素ではない。要素がスタイル付け目的またはスクリプティングの便宜のために必要になった場合のみ、著者は、代わりにdiv要素を使用するよう推奨される。要素の内容が文書のアウトラインで明示的に記載されるだろう場合のみ、section要素が適切であるというのが一般的なルールである。

nav

nav要素は、他のページへリンクするページのセクション、またはナビゲーションリンクをもつセクションのようなページ内部の一部を表す。

ページ上のリンクのグループがnav要素である必要はない―この要素は、主要なナビゲーションブロックから成るセクションを主に対象としている。特に、サービスの条件、ホームページ、著作権ページのような、サイトのさまざまなページへの簡潔なリンクのリストをフッターが持つことは、一般的である。footer要素は単独で、このような場合に対して十分である。一方nav要素は、そのような場合に使用できるが、通常不要である。

次の例において、2つのnav要素がある。1つはサイト周辺の主要なナビゲーションのため、もう1つはページ自身周辺の補助的なナビゲーション用である。

<body>
  <h1>The Wiki Center Of Exampland</h1>
  <nav>
    <ul>
      <li>
        <a href="/">Home</a>
      </li>
      <li>
        <a href="/events">Current Events</a>
      </li>
      ...more...
    </ul>
  </nav>
  <article>
    <header>
      <h2>Demos in Exampland</h2>
      <p>Written by A. N. Other.</p>
    </header>
    <nav>
      <ul>
        <li>
          <a href="#public">Public demonstrations</a>
        </li>
        <li>
          <a href="#destroy">Demolitions</a>
        </li>
        ...more...
      </ul>
    </nav>
    <div>
      <section id="public">
        <h2>Public demonstrations</h2>
        <p>...more...</p>
      </section>
      <section id="destroy">
        <h2>Demolitions</h2>
        <p>...more...</p>
      </section>
      ...more...
    </div>
    <footer>
      <p>
        <a href="?edit">Edit</a> |
        <a href="?delete">Delete</a> |
        <a href="?Rename">Rename</a>
      </p>
    </footer>
  </article>
  <footer>
    <p>
      <small>© copyright 1998 Exampland Emperor</small>
    </p>
  </footer>
</body>

次の例において、ページはリンクが存在する複数の場所を持つが、そのうちの1つのみがナビゲーションセクションとみなされる。

<body itemscope itemtype="http://schema.org/Blog">
  <header>
    <h1>Wake up sheeple!</h1>
    <p>
      <a href="news.html">News</a>
      -
      <a href="blog.html">Blog</a>
      -
      <a href="forums.html">Forums</a>
    </p>
    <p>Last Modified:
      <span itemprop="dateModified">2009-04-01</span>
    </p>
    <nav>
      <h1>Navigation</h1>
      <ul>
        <li>
          <a href="articles.html">Index of all articles</a>
        </li>
        <li>
          <a href="today.html">Things sheeple need to wake up for today</a>
        </li>
        <li>
          <a href="successes.html">Sheeple we have managed to wake</a>
        </li>
      </ul>
    </nav>
  </header>
  <main>
    <article itemprop="blogPosts" itemscope itemtype="http://schema.org/BlogPosting">
      <header>
        <h2 itemprop="headline">My Day at the Beach</h2>
      </header>
      <div itemprop="articleBody">
        <p>Today I went to the beach and had a lot of fun.</p>
        ...more content...
      </div>
      <footer>
        <p>Posted
          <time itemprop="datePublished" datetime="2009-10-10">Thursday</time>.
        </p>
      </footer>
    </article>
    ...more blog posts...
  </main>
  <footer>
    <p>
      Copyright ©
      <span itemprop="copyrightYear">2010</span>
      <span itemprop="copyrightHolder">The Example Company</span>
    </p>
    <p>
      <a href="about.html">About</a>
      -
      <a href="policy.html">Privacy Policy</a>
      -
      <a href="contact.html">Contact Us</a>
    </p>
  </footer>
</body>

nav要素はリストを含める必要はなく、同様に他の種類のコンテンツを含むことができる。このナビゲーションブロックにおいて、リンクは文で提供されている：

<nav>
  <h1>Navigation</h1>
  <p>You are on my home page. To the north lies
    <a href="/blog">
      my
    blog
    </a>
    , from whence the sounds of battle can be heard. To the east
    you can see a large mountain, upon which many
    <a href="/school">school papers</a>
    are littered. Far up thus mountain
    you can spy a little figure who appears to be me, desperately
    scribbling a
    <a href="/school/thesis">thesis</a>.
  </p>
  <p>To the west are several exits. One fun-looking exit is labeled
    <a href="https://games.example.com/">"games"</a>
    . Another more
    boring-looking exit is labeled
    <a href="https://isp.example.net/">ISP™</a>.
  </p>
  <p>To the south lies a dark and dank
    <a href="/about">
      contacts
    page
    </a>
    . Cobwebs cover its disused entrance, and at one point you
    see a rat run quickly out of the page.
  </p>
</nav>

aside

aside要素は、aside要素の周囲のコンテンツに付随的に関連するコンテンツから構成され、かつそのコンテンツとは別のものと見なすことができるページのセクションを表す。このようなセクションは、活版印刷でサイドバーとして表現されることがよくある。

この要素はリード文またはサイドバーのような印刷上の効果に対して、navの要素のグループに対して、広告に対して、およびそのページのメインコンテンツとは別に考えられる他のコンテンツに対して使用できる。

<body>
  <header>
    <h1>My wonderful blog</h1>
    <p>My tagline</p>
  </header>
  <aside>
    <nav>
      <h2>My blogroll</h2>
      <ul>
        <li>
          <a href="https://blog.example.com/">Example Blog</a>
        </li>
      </ul>
    </nav>
    <nav>
      <h2>Archives</h2>
      <ol reversed>
        <li>
          <a href="/last-post">My last post</a>
        </li>
        <li>
          <a href="/first-post">My first post</a>
        </li>
      </ol>
    </nav>
  </aside>
  <aside>
    <h1>Twitter Feed</h1>
    <blockquote cite="https://twitter.example.net/t31351234">
      I'm on vacation, writing my blog.
    </blockquote>
    <blockquote cite="https://twitter.example.net/t31219752">
      I'm going to go on vacation soon.
    </blockquote>
  </aside>
  <article>
    <h2>My last post</h2>
    <p>This is my last post.</p>
    <footer>
      <p>
        <a href="/last-post" rel="bookmark">Permalink</a>
      </p>
    </footer>
  </article>
  <article>
    <h2>My first post</h2>
    <p>This is my first post.</p>
    <aside>
      <h2>Posting</h2>
      <p>
        While I'm thinking about it, I wanted to say something about
posting. Posting is fun!
      </p>
    </aside>
    <footer>
      <p>
        <a href="/first-post" rel="bookmark">Permalink</a>
      </p>
    </footer>
  </article>
  <footer>
    <p>
      <a href="/archives">Archives</a>
      -
      <a href="/about">About me</a>
      -
      <a href="/copyright">Copyright</a>
    </p>
  </footer>
</body>

main

main要素は、文書の主要なコンテンツを表す。

文書は、hidden属性が指定されないmain要素を複数持ってはならない。

階層的に正しいmain要素は、祖先要素がhtml、body、div、アクセシブルな名前のないform、および自律カスタム要素に限定されるものである。各main要素は、階層的に正しいmain要素でなければならない。

<main> 要素の内容は、文書で固有のものにしてください。この内容はサイドバー、ナビゲーションリンク、著作権表示、サイトロゴ、検索フォームのような、文書のセットや文書のセクションにまたがって繰り返されるものを除くべきです。(もちろん、主な内容が検索フォームでない限り)

<main> は文書のアウトラインに寄与しません。すなわち <body> や <h2> などの見出しとは異なり、 <main> はページの構造の DOM の概念に影響を与えません。これは情報を与えるだけです。

main - HTML: HyperText Markup Language | MDN

<!-- 他のコンテンツ -->

<main>
  <h1>Apples</h1>
  <p>The apple is the pomaceous fruit of the apple tree.</p>

  <article>
    <h2>Red Delicious</h2>
    <p>These bright red apples are the most common found in many
    supermarkets.</p>
    <p>... </p>
    <p>... </p>
  </article>

  <article>
    <h2>Granny Smith</h2>
    <p>These juicy, green apples make a great filling for
    apple pies.</p>
    <p>... </p>
    <p>... </p>
  </article>
</main>

<!-- 他のコンテンツ -->