HTML5 セマンティック要素


セマンティック = 意味。

セマンティック要素 = 要素の意味。

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

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

セマンティック 要素の例: <div> および <span> - コンテンツを考慮する必要はありません。

セマンティック 要素の例: <form>、<img>そのコンテンツは、

ブラウザのサポート

Internet Explorer

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

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

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

多くの既存の Web サイトには、次の HTML コードが含まれています。 <div id="nav">、<div class="header">、または <div id="footer">、 ナビゲーション リンク、ヘッダー、およびトレーラーを示すために、

HTML5 は、Web ページのさまざまな部分を識別するための新しいセマンティック要素を提供します。

<footer>

    • HTML5 <section> 要素

  • <section> は、ドキュメント内のセクション (セクション、セクション) を定義します。章、ヘッダー、フッター、文書のその他の部分など。

    • W3C HTML5 ドキュメントによると、セクションには一連のコンテンツとそのタイトルが含まれます。

  • サンプル
  • <!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

<section>
  <h1>WWF</h1>
  <p>The World Wide Fund for Nature (WWF) is an international organization working on issues regarding the conservation, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961.</p>
</section>

<section>
  <h1>WWF's Panda symbol</h1>
  <p>The Panda has become the symbol of WWF. The well-known panda logo of WWF originated from a panda named Chi Chi that was transferred from the Beijing Zoo to the London Zoo in the same year of the establishment of WWF.</p>
</section>

</body>
</html>

    • サンプルの実行»

  • オンラインサンプルを表示するには、「サンプルの実行」ボタンをクリックしてください

  • HTML5の<article>要素
  • <article>は、独立したコンテンツを定義します。 .

    <article> 要素の使用例:
フォーラムの投稿

ブログの投稿

コメント

の例
<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

<article>
  <h1>Internet Explorer 9</h1>
  <p> Windows Internet Explorer 9(缩写为 IE9 )在2011年3月14日21:00 发布。</p>
</article>

</body>
</html>

インスタンスを実行する »

「インスタンスの実行」ボタンをクリックしてオンラインインスタンスを表示します


HTML5 <nav> 要素

<nav> は、ナビゲーション リンクの部分を定義します。

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

サンプルに含める必要はありません。

「インスタンスの実行」ボタンをクリックして、オンライン インスタンスを表示します

HTML5 <aside> 要素

<aside> タグは、ページのメイン領域 (サイドバーなど) の外側のコンテンツを定義します。
aside タグのコンテンツは、メインエリアのコンテンツに関連している必要があります

インスタンス

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

<nav>
<a href="#">HTML</a> |
<a href="#">CSS</a> |
<a href="#">JavaScript</a> |
<a href="#">jQuery</a>
</nav>

</body>
</html>

インスタンスの実行»

オンラインの例を表示するには、[インスタンスの実行] ボタンをクリックします

。

HTML5の<header>要素

<header>要素は、ドキュメントのヘッダー領域を記述します

<header>要素は、コンテンツの導入部の表示領域を定義するために使用されます。ページ内の複数の <header>

次の例は記事の先頭を定義します:

Instance

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

<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>

</body>
</html>

実行例»

オンラインの例を表示するには、[実行例] ボタンをクリックします。

HTML5 <footer> 要素

<footer> 要素の説明
要素には、通常、ドキュメントの作成者、著作権情報、リンクされた利用規約が含まれます。連絡先情報など。

複数の <footer>要素を使用できます。

例

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

<article>
  <header>
    <h1>Internet Explorer 9</h1>
    <p><time pubdate datetime="2011-03-15"></time></p>
  </header>
  <p> Windows Internet Explorer 9(缩写为 IE9 )是在2011年3月14日21:00发布的</p>
</article>

</body>
</html>

サンプルの実行»

オンラインサンプルを表示するには、「サンプルの実行」ボタンをクリックしてください

HTML5 <figure> 要素と <figcaption> 要素

<figure> タグは、個々のストリーム コンテンツ (画像、グラフ、写真、コードなど) を指定します。

<figure> 要素のコンテンツはメイン コンテンツに関連している必要がありますが、削除してもドキュメント フローに影響はありません。 <figcaption> タグは、<figure> 要素の最初または最後の子要素として配置する必要があります。

インスタンス
<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

<footer>
  <p>Posted by: Hege Refsnes</p>
  <p><time pubdate datetime="2012-03-01"></time></p>
</footer>

</body>
</html>

インスタンスの実行 »

「インスタンスの実行」ボタンをクリックしてオンラインインスタンスを表示します


これらのセマンティック要素の使用を開始できますか?

上記の要素はすべてブロック要素です (<figcaption> を除く)

これらのブロックと要素をすべてのバージョンのブラウザーで機能させるには、それらを追加する必要があります。スタイルで テーブル ファイルの属性を設定します (次のスタイル コードを使用すると、古いブラウザでこの章で紹介したブロック レベルの要素をサポートできます):

header、section、footer、side、nav、article、figure
{
display: block;
}

Internet Explorer 8 およびそれ以前の IE バージョンの問題

IE8 およびそれ以前の IE バージョンでは、これらの要素で CSS 効果をレンダリングできないため、<header>、<section>、< を使用できません。フッター> 、<脇>、<ナビゲーション>、 <article>、<figure>、またはその他の HTML5 要素。

解決策: HTML5 Shiv Javascript スクリプトを使用して、IE の互換性の問題を解決できます。 HTML5 Shiv ダウンロード アドレス: http://code.google.com/p/html5shiv/

ダウンロード後、次のコードを Web ページに追加します:

<!--[if lt IE 9]> ;
<script src="html5shiv.js"></script>
<![endif]-->

上記のコードは、ブラウザーが IE9 より小さい場合に html5shiv.js ファイルを読み込みます。 IE は head が読み込まれた後にこれらの新しい HTML5 要素をレンダリングする必要があるため、<head> 要素に配置する必要があります。

←
→