HTML5におけるセマンティック

ウェブページをセマンティックに構造化するためのHTML要素

新着！私の44ページの電子書籍「CSS in 44 minutes」が発売されました！😃

# article

どのようなコンテキストにも存在できる、独立したコンテンツブロックを定義します。
独自のヘッダー、フッター、セクションを持つことができます…ブログ投稿のリストに便利です。

私のブログ投稿

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra nec nulla vitae mollis.

<article>
  <header>
    <h3>
      <a href="/my-blog-post">My blog post</a>
    </h3>
  </header>
  <section>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra nec nulla vitae mollis.</p>
  </section>
  <footer>
    <small>
      Posted on <time datetime="2017-04-29T19:00">Apr 29</time> in <a href="/category/code">Code</a>
    </small>
  </footer>
</article>

# aside

メインコンテンツに関連するコンテンツブロックを定義します。通常はサイドバーとして表示されます。

例: コピー

私のブログ投稿

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra nec nulla vitae mollis.

など。

<main>
  <h1>My blog post</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra nec nulla vitae mollis.</p>
  <p>etc.</p>
</main>

<aside>
  <h3>About the author</h3>
  <p>Frontend Designer from Bordeaux, currently working for Improbable in sunny London.</p>
</aside>

# figcaption

<figure>のキャプションを定義します。

例: コピー

HTMLリファレンスのロゴ

<figure>
  <img src="/images/html-reference-logo.png" alt="HTML Reference logo">
  <figcaption>The HTML Reference logo</figcaption>
</figure>

# figure

通常は画像である、独立した単一要素を定義します。

例: コピー

<figure>
  <img src="/images/html-reference-logo.png" alt="HTML Reference logo">
</figure>

# footer

ウェブページまたはセクションのフッターを定義します。

例: コピー

# header

ウェブページまたはセクションのヘッダーを定義します。

例: コピー

HTMLリファレンス

<header>
  <h1>HTML Reference</h1>
  <nav>
    <a>Home</a>
    <a>About</a>
    <a>Contact</a>
  </nav>
</header>

# main

ウェブページのメインコンテンツを定義します。サイドバーと共に表示できます。

例: コピー

私のブログ投稿

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra nec nulla vitae mollis.

など。

<main>
  <h1>My blog post</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra nec nulla vitae mollis.</p>
  <p>etc.</p>
</main>

<aside>
  <h3>About the author</h3>
  <p>Frontend Designer from Bordeaux, currently working for Improbable in sunny London.</p>
</aside>

# mark

強調表示されたテキストを定義します。

例: コピー

ウェブ上でコンテンツを作成するためにHTML5を使用します。

We use HTML5 to write <mark>content</mark> on the Web.

# nav

ナビゲーションリンクのあるセクションを定義します。

例: コピー

<nav>
    <a href="/">Home</a>
    <a href="/about">About</a>
    <a href="/contact">Contact</a>
  </nav>

# section

ウェブページ内のセクションを定義します。

例: コピー

セクションタイトル

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra nec nulla vitae mollis.

<section>
  <h2>Section title</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra nec nulla vitae mollis.</p>
</section>

# time

24時間制の時刻を定義します。

例: コピー

ゲームは19:00に始まります。

The game starts at <time datetime="2017-04-29T19:00">19:00</time>.

`datetime`

時間と日付を定義します。

`"2017-04-29T19:00"`

値は有効な時間文字列である必要があります。