HTML5 セマンティック要素の例の紹介-H5 チュートリアル-php.cn

セマンティック要素とは何ですか?

セマンティック要素は、ブラウザーと開発者に対してその意味を明確に説明できます。

セマンティック要素の例:

と - コンテンツを考慮する必要はありません。

セマンティック要素の例:

、 - コンテンツを明確に定義します。

ブラウザのサポート

Internet Explorer 9 以降、Firefox、Chrome、Safari、Opera はセマンティック要素をサポートしています。

注: この要素は Internet Explorer 8 以前ではサポートされていません。ただし、互換性のある回避策が記事の下部に記載されています。

HTML5 の新しいセマンティック要素

多くの既存の Web サイトには、次の HTML コードが含まれています。 id ="nav">、

、または

は、ナビゲーションリンク、ヘッダー、フッターを示します。

HTML5 は新しいセマンティック要素を提供します。独立したコンテンツを定義するための Web ページの

HTML5

要素

要素の使用例:

フォーラムの投稿

ブログの投稿

<article>
  <h1>Internet Explorer 9</h1>
  <p>Windows Internet Explorer 9 (abbreviated as IE9) was released to
  the  public on March 14, 2011 at 21:00 PDT.....</p>
</article>

ログイン後にコピー

HTML5

要素

タグはナビゲーションリンクの部分を定義します。

要素は、ページのナビゲーションリンクセクションを定義するために使用されます。ただし、すべてのリンクを

<nav>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/jquery/">jQuery</a>
</nav>

ログイン後にコピー

HTML5

要素に含める必要はありません。

タグは、ページのメイン領域外のコンテンツ (サイドバーなど) を定義します。

aside タグの内容は、

<p>My family and I visited The Epcot center this summer.</p>
<aside>
  <h4>Epcot Center</h4>
  <p>The Epcot Center is a theme park in Disney World, Florida.</p>
</aside>

ログイン後にコピー

HTML5

要素

要素の先頭領域を記述します。要素表示領域の紹介のコンテンツを定義するために使用されることに注意してください。

ページ内で複数の

要素を使用できます。

次の例は記事のヘッダーを定義します:

例

<article>
  <header>
    <h1>Internet Explorer 9</h1>
    <p><time pubdate datetime="2011-03-15"></time></p>
  </header>
  <p>Windows Internet Explorer 9 (abbreviated as IE9) was released to
  the  public on March 14, 2011 at 21:00 PDT.....</p>
</article>

ログイン後にコピー

HTML5 < ;footer> 要素