HTML5セマンティック要素

セマンティクスの言語で単語やフレーズの意味の研究です。

セマンティック要素が意味を持つ要素です。

セマンティックHTMLは、単にそのプレゼンテーションを定義したり、検索するのではなく、ウェブページやウェブアプリケーションにおける情報の意味、または意味を、強化するHTMLマークアップを使用することです。

セマンティックHTMLは、伝統的なWebブラウザによってだけでなく、他の多くのユーザーエージェントによって処理されます。 CSSは、人間のユーザへのプレゼンテーションを提案するために使用されます。

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

セマンティック要素は明らかに、ブラウザと開発者の両方にその意味を説明しています。

非セマンティック要素の例： <div>や<span> -その内容については何も指示します。

セマンティック要素の例： <form> <table>および<img> -明らかにその内容を定義します。

ブラウザのサポート

HTML5セマンティック要素は、すべての最新ブラウザでサポートされています。

また、あなたができる"teach"どのように処理するために、古いブラウザを"unknown elements" 。

で、それについての記事を読むHTML5ブラウザのサポート 。

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

多くのWebサイトでは次のようにHTMLコードが含まれています<div id="nav"> <div class="header"> <div id="footer">
ナビゲーション、ヘッダー、およびフッターを示します。

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

HTML5 <section>要素

<section>要素は、ドキュメント内のセクションを定義します。

W3CのHTML5のドキュメントによると： "A section is a thematic grouping of content, typically with a heading."

Webサイトのホームページには、導入、コンテンツ、および連絡先情報をセクションに分割することができます。

HTML5 <article>要素

<article>要素は、独立した、自己完結型のコンテンツを指定します。

記事では、独自のセンスを作る必要があり、ウェブサイトの他の部分から独立して、それを読み取ることが可能でなければなりません。

ここでの例<article>要素を使用することができます。

• フォーラムのポスト
• ブログ記事
• 新聞記事

ネストセマンティック要素

HTML5規格では、 <article>要素は、関連する要素の完全な、自己完結型のブロックを定義します。

<section>要素は、関連要素のブロックとして定義されます。

私たちは、巣の要素をどのように決定する定義を使用することはできますか？ いいえ、私たちがすることはできません！

インターネット上では、とHTMLページを検索します<section>要素を含む<article>要素、および<article>含む要素<sections>の要素を。

また、あるページあります<section>要素を含む<section>要素、および<article>含む要素<article>要素を。

HTML5 <header>要素

<header>要素は、文書またはセクションのヘッダーを指定します。

<header>要素が導入コンテンツのコンテナとして使用されるべきです。

あなたは、いくつか持つことができます<header> 1つのドキュメント内の要素を。

次の例では、記事のヘッダを定義します。

HTML5 <footer>要素

<footer>要素は、文書またはセクションのフッターを指定します。

<footer>要素はその含む要素に関する情報が含まれている必要があります。

フッターは、通常、文書、著作権情報の作者が含まれているなど使用条件、連絡先情報へのリンク

あなたは、いくつか持つことができます<footer> 1つのドキュメント内の要素を。

HTML5 <nav>要素

<nav>要素は、ナビゲーションリンクのセットを定義します。

<nav>要素は、ナビゲーションリンクの大きなブロックを対象としています。 ただし、文書内のないすべてのリンクが内にある必要があります<nav>要素！

HTML5 <aside>要素

<aside>要素は、それが中に配置されている内容とは別に、いくつかのコンテンツを定義する(like a sidebar) 。

さておきコンテンツは、周囲のコンテンツに関連しなければなりません。

HTML5 <figure>と<figcaption>要素

書籍や新聞では、画像とキャプションを持っているのが一般的です。

キャプションの目的は、画像への視覚的な説明を追加することです。

HTML5では、画像とキャプションはで一緒にグループ化することができ<figure>要素：

<img>要素は、画像を定義する、 <figcaption>要素は、キャプションを定義します。

なぜ、セマンティックHTML5の要素？

HTML4では、開発者は自分の好きなスタイルのページ要素に属性名を使用しました：

header, top, bottom, footer, menu, navigation, main, container, content, article, sidebar, topnav, ...

これは、それが不可能な検索エンジンが正しいWebページのコンテンツを識別するために作られました。

以下のようなHTML5の要素を持つ： <header> <footer> <nav> <section> <article> 、これは容易になります。

W3Cによると、セマンティックWeb：

「データは、アプリケーション、企業、コミュニティ全体で共有して再利用することができます。」

検討事項

ケースでは、文書は、<スパンクラス=「著者」>と<DIV CLASS =「インボイス」など、文書の断片は意味のあるクラス名と、SPANまたはDIV要素内に封入することができるHTML単独で発現されるものよりもより正確なセマンティクスを必要とする場合>。 これらのクラス名は、スキーマやオントロジー内のフラグメント識別子である場合、彼らはより多くの定義された意味にリンクすることができます。 マイクロフォーマットはHTMLで意味論へのこのアプローチを形式化。

このアプローチの1つの重要な制限は、要素の包含に基づいて、そのようなマークアップは整形式の条件を満たさなければならないということです。 これらの文書は、広くツリー構造であるため、これはサブツリーからのみのバランスの取れたフラグメントは、このようにマークアップすることができることを意味します。 マーキングアップHTMLの任意のセクションの手段は、XPointerのようなマークアップ構造体自体の独立した機構を必要とするであろう。

グッドセマンティックHTMLも（また、Webコンテンツアクセシビリティガイドラインを参照してください）。たとえば、[要出典]、スクリーンリーダーや音声ブラウザが正しく文書の構造を確認することができるとき、それは無駄にしませんウェブ文書のアクセシビリティを向上させる視覚障害者のそれは正確にマークアップされたときに繰り返しまたは無関係な情報を読み取ることにより、時間。

HTML5でのセマンティック要素

以下はHTML5の新しいセマンティック要素のアルファベット順のリストです。

リンクは、当社の完全に行くHTML5リファレンス 。