なぜ意味のある意味で正しくマークアップする必要があるのでしょうか？
可能な限りセマンティックにマークアップするように心がけていますが、他の見事な利点を認識しているわけではありません。私の質問のポイントは、他の人を教育できるようにすることです
よく、「最も意味のある方法でこれをマークアップしましょう」とよく書かれている記事やチュートリアルをたくさん見ました。
しかし、奇妙な思いが私にやって来たなぜ？
なぜ正しい意味論的意味を伝える特定の要素に悩む必要があるのでしょうか？具体的には、<time>、<output>、<address>などの新しいHTML5要素を指します。特に、ページが「機能する」場合（すべてのブラウザーで適切にレンダリングされます）。
<time>や<address>のような要素を使用する理由は何ですか（最悪の場合、ジェネリック<span>）は同じようにうまく機能しませんか？
これらのいわゆるベストプラクティスに従っていない多数の（非常に人気のある）Webサイト（これも含まれています）が表示されているので、これをお願いします。
無料の機能
<label>sを適切に使用すると、ラベルをクリックしてテキストフィールドに入力できるようになります。多くのブラウザは公式仕様に従って多くのタグに論理的なデフォルト機能を追加します。つまり、完全に<div>sと<span>sで作られたサイトよりも少ないJavaScriptプラグインを使用し、少ないコードを書くことができます。
アクセシビリティ
無料の機能に関連して、セマンティクスはスクリーンリーダーソフトウェアにとって大きな意味があります。入力フィールドの前のテキストは、<label>とまったく同じ方法で読み取られません。スクリーンリーダーはCSSのほとんどを無視するので、HTMLの構造次第です。
論理CSS
div #headerを直接使用してスタイルを設定できるのに、なぜ<header>を使用するのですか？セマンティックタグを使用すると、マークアップが簡単になり、スタイルの移植性が大幅に向上します。取り消し線に特定のスタイルがあり、常に<del>要素を使用する場合、スタイルはより移植性が高くなります。 <del>は誰にとっても同じことを意味しますが、誰もが.deletedTextクラスに異なる名前を付けます。
また、大規模なプロジェクトで全員を同じページに保つのにも役立ちます。他人の難解なクラスの命名規則を学ぶことを楽しむ人はいません。
SEO
Googleなどの検索エンジンでは、セマンティックHTMLとメタデータの使用が増加しています 。 Googleのリッチスニペットも、セマンティックコンテンツを伝達するための特別なメタデータを使用します。
なぜそれほど一般的ではないのか
それは仕事がかかり、人々はウェブサイトをそれがどのように見た目と動作かで判断することに慣れています。多くの場合、アプリのビジネスケースを作成する人はそれを理解しないか、なぜそれが重要であるかを理解できないため、セマンティクスは考慮されません。
非技術者がHTMLのセマンティクスを理解または評価することは非常に困難です。
Webサイトの見た目がよく、機能しているように見える場合、なぜ心配するのでしょうか。多くの人々は、そこにがあることさえ知らないかもしれませんそれ以上のことです。アクセシビリティと同様に、チームの誰かがこれを本当に理解するまで、これは無視される傾向があります。
セマンティックHTMLをプロジェクトの優先事項にしたい場合は、youがそのケースを提示する必要があります。ウェブサイトがスクリーンリーダーでどのように機能するかをチームや上司に示すことも、役立つツールです。
その答えは、単に情報を伝えるとで文書を構造化する 。
スパンとdivを使用する場合、ドキュメントには構造がありません。リスト、段落、表、ハイパーリンクはありません。何もない。 HTMLをマークアップ言語として選択し、コンテンツを表現および構造化するために提供される語彙を無視することは、実際には意味がありません。構造はここで重要な言葉です。 HTMLは表示しない構造化用です。それがCSSの目的です。
コードを意味的にマークアップすると、人間の読者だけでなく機械にも、要素内のデータを理解する機会が与えられます。 span要素とdiv要素をすべて使用している場合、この追加情報は得られず、値だけからそれらを推測することはできない可能性があります。
同様に、Webサイトをスクレイピングして見出しのみを抽出してそれらの目次を作成したい場合、スパイダーは見出しが何であるかを知る必要があります。適切な要素がなければそれはできません。
最後に重要なことですが、divとspanのみを使用すると、CSSでこれらのスタイルを設定するのが難しくなります。 CSSセレクターはドキュメントの構造を処理し、それがほとんどあいまいな構造である場合、CSSルールを適用するのは不明瞭になります。 div div divが本当にtable tr tdを参照しているか、body ul liを参照しているかをどのように判断しますか？その場合はクラスとIDを追加する必要がありますが、その後、ホイールを再発明しています。
W3Cの 推奨事項も参照してください
適切なセマンティック要素を使用すると、ユーザーエージェントが構造を利用できるようになります。これには、コンテンツの意味を理解する上でさまざまなユニットが果たす役割を明示的に示すことが含まれます。段落、ヘッダー、強調されたテキスト、表などのコンテンツの性質は、すべてこの方法で示すことができます。場合によっては、見出しと小見出しの間、または表のセル間など、コンテンツの単位間の関係も示す必要があります。次に、ユーザーエージェントは、たとえば、構造の種類ごとに異なる視覚的プレゼンテーションを使用したり、聴覚的プレゼンテーションで異なる音声やピッチを使用したりして、ユーザーが構造を認識できるようにします。
ここですでに良い答えに加えて、私が言及していないことの1つは前方互換性です。仕様が進化するにつれて、特定のセマンティック要素に追加の機能を指定することが可能になります。コードが意味的に正しい場合は、メンテナンスを行わなくても、最小限のメンテナンスでこの機能を利用できます。
セマンティクスに従って完全に多くのサイトが表示されない1つの理由は、多くの場合、ビジネスケースがないためです。それが売り上げ（または露出のような関連するカテゴリー）を促進するならば、意味論的なHTMLを書くことは彼らのお金の価値があります。
タグをセマンティックに使用するために私ができる最良のケースは、ツールでHTMLを使用または使用している場合です。たとえば、セマンティックタグを使用すると、他のものからスタイルを追加または削除することを恐れずに要素を直接スタイルできます。さらに、スクレーパーなどを使用してHTMLを解析する必要がある場合は、XPathおよびDOMクエリを記述して必要なものを見つけることが容易になるので、整形式でセマンティックなHTMLを高く評価します。
クラスはセマンティックタグを直接置き換えるものではないことに注意してください。再利用可能なクラスがあります[error, information, warning]さまざまな意味を伝え、したがって、それらが関連付けられているタグに基づいてスタイルを伝えます。
それは、クローラーやWebサービス（コンピューターと通信するコンピューター）に役立つ、または必要になる可能性があるためです。あなたが書く場合：
<span class="time">Sep 16 at 2:17</span>
... Webクローラーは、それを日付、時間のようなものとして理解する必要はありません。または、日付情報として特定するのがはるかに難しくなります。
使用する場合：
<time datetime="2012-02-11 16:24:02">feb 11 2012 at 16:24:02</time>
...クローラーがデータを見つけて分析するのがはるかに簡単になります。
私がクローラーと言うとき、必ずしも検索エンジンを意味するわけではありません:)
私は小さなウェブコンサルティング会社を経営していて、私たちは多くの要素のバランスをとろうとしているので、現在のアプローチは新しいHTML5タグを使用しないことです。この場合、バランスは、ユーザビリティ、ユーザビリティ、およびSEOの間です。
SEO：ここでの他の答えは何でしたか-SEOには少し役立つかもしれませんが、私の経験に基づいて、SEO戦略がより明白であるほど、助ける可能性は低くなります。
ユーザビリティ＃1：HTML5タグが何らかのユーザビリティの利点をもたらすと想定することは合理的です。目の不自由なユーザーにとって、アクセシブルなブラウザーが提供するフォールバックが、私が提供できるものよりも優れていることは確かです。あなたの典型的なユーザーにとっては、それはずっと議論の余地があります。おそらく、ブラウザが提供するスキンのないメディアプレーヤーを使用する方が、使い慣れていないウィジェットを使用するよりも使いやすいでしょう。または、ブラウザのデフォルトがくだらないかもしれません（Chrome WindowsのデフォルトのMP3プレーヤーが定期的に動作を停止するように）。
ユーザビリティ＃2：古いIE。古いIEは、これらのタグが機能するために、ページを膨らませる一連のHTML5シムを必要とします。CreateElement（）を呼び出すループ内のヘッドタグにスクリプトを追加する必要があります。使用しているすべてのHTML5タグ。使用しているタグの各ページをくまなく調べるつもりがない場合は、すべてのHTML5タグを意味します。これは、すべての単一ページでインラインで実行する必要があります。つまり、キャッシュは行われません。そして悪いニュース：古いIEはJavascriptの実行が最も遅いため、ロード中に素敵な小さなラグを作成します。次に、古いIE専用のJavascriptの束にバレルしなければなりません。 CSS、および多くの場合Flashを使用して、サポートされていない新しい要素をすべて正しくレンダリングします。古いIEコードをロードする前に検出機能を使用できますが、古いIEユーザーは、これらのタグを機能させるすべてのものをリクエストし始める前に、その機能検出を実行するのに十分なスクリプトがロードされるまで待機します。ブラウザは古いバージョンを検出して送信することしかできませんIEあなたのものこれらのブラウザではsersを使用しますが、プラットフォームによってはキャッシュが困難または不可能になる場合があります。異なるユーザーに異なるコードを提供することは、テストがより複雑になることも意味します-非同期のバグがあったことはありますか？特定のブラウザでのみ発生するものはどうですか？そして、生産のみですか？サインアップしてください。だから、あなたはおそらくその膨張を誰にでも送るつもりです。
IE8が死ぬまで、これらの新しいHTML5タグの価値は、それらがもたらすパフォーマンスの問題に十分に対応できません。まだ死者*に近い聴衆と一緒に仕事をすることはまだありませんが、いつかはそうです。
*最新の指標では、IE8の訪問者が最も少ないサイトではIE8が6％であり、IE8の訪問者が最も多いサイトでは24％です。はるかに、はるかに死んでいる。
HTMLは単なるUI言語ではなく、データ構造化言語でもあります。これは、異種マシンがサーバーに送られる情報のタイプを識別する1つの一般的な方法を持つのを助けるように設計されました。したがって、非常に多くの異なるタグがあります。 HTMLページは、データ構造と見なす必要があります。
短い答えは「実際には正当な理由はない」です。 「セマンティック」マークアップを支持して与えられるほとんどすべての議論は、具体的なものではなく、何が起こり得るか、または起こるべきかについての単なる考えです。たとえば、検索エンジンはよく参照されますが、timeまたはoutputまたはaddressについて気にしていないという公的な証拠はありません。
間接的には、近い将来、彼らが気にしないと推測できます。一部の主要な検索エンジンによる schema.org サイトは、まったく異なるもの、つまりmicrodata（itemscopeおよび関連する属性）に基づく「セマンティックマークアップ」への特定のアプローチを明らかに支持しています。そして、実際には主に大規模な商業サイトやコミュニティサイトでこれを行っています。
spanまたはdivの使用は、HTML5の新しさよりもうまく機能します。後者は、スタイリングの目的であっても、IEの古いバージョンでは認識されないためです。したがって、コンテナ要素としても機能させるには、いくつかのトリックが必要です。
ただし、ブラウザ、支援ソフトウェア、または検索エンジンによって実際の意味が割り当てられているsome「セマンティック」要素があります。このような理由から、メインの見出しにh1を使用することは常に良い習慣です。フォームフィールドラベルにlabelを使用すると、ユーザビリティとアクセシビリティに大きな影響があります。等々; HTMLの実用ガイド：原則 を参照してください。