なぜ適切に意味論的にマークアップする必要があるのでしょうか？

_{私は見た目や感じが好きなので、可能な限り意味的にマークアップしようとしますが、他の素晴らしい利点を知っているからではありません。私の質問のポイントは、他の人を教育できるようにすることです}

さて、私は多くの記事やチュートリアルを見てきましたが、「セマンティックな方法でこれをマークアップしましょう」ということがよくあります。

しかし、奇妙な考えが私に来ました、なぜですか？

なぜ正しいセマンティックな意味を伝える特定の要素に煩わされる必要がある（またはしたい）のでしょうか？具体的には、私のような、新しいHTML5要素を参照しています<time>、<output>または<address>。特に、ページが「機能する」場合（すべてのブラウザで適切に表示されます）。

なぜ、<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のセマンティクスを理解または評価することは、技術に詳しくない人にとって非常に困難です。

ウェブサイトが見栄えが良く、動作しているように見える場合、なぜ心配するのですか？多くの人々は、それ以上のものがあることすら知らないかもしれません。アクセシビリティと同様に、チームの誰かがこれを本当に理解するまで、これは無視される傾向があります。

セマンティックHTMLをプロジェクトの優先事項にしたい場合は、そのケースを提示する必要があります。スクリーンリーダーでWebサイトがどのように機能するかをチーム/上司に示すことも有用なツールです。

その答えは単純で情報を伝達すると、あなたの文書を構造化します。

スパンとdivを使用する場合、ドキュメントには構造がありません。リスト、段落、表、ハイパーリンクはありません。なし。HTMLをマークアップ言語として選択し、コンテンツを表現および構造化するために提供するボキャブラリーを無視することは本当に意味がありません。ここで構造は重要な言葉です。HTMLは、表示されない構造化用です。それがCSSの目的です。

コードを意味的にマークアップすると、人間の読者だけでなく、マシンにも要素内のデータを理解する機会が与えられます。span要素とdiv要素をすべて使用する場合、この追加情報は得られず、値だけからそれらを推測することは不可能な場合があります。

同様に、Webサイトをスクレイピングし、見出しのみを抽出して目次を作成する場合、クモは見出しが何であるかを知る必要があります。適切な要素がなければ、それはできません。

最後になりましたが、divとspanのみを使用すると、CSSでこれらのスタイルを設定するのが難しくなります。CSSセレクターはドキュメントの構造に作用し、それがほとんど曖昧な構造である場合、CSSルールは適用するのが困難になります。div div div本当に参照するかどうかをどのように決定しますtable tr tdかbody ul li？その場合、クラスとIDを追加する必要がありますが、その後、車輪を再発明します。

W3Cの推奨事項も参照してください

適切なセマンティック要素を使用すると、ユーザーエージェントが構造を利用できるようになります。これには、コンテンツの意味を理解する上で異なるユニットが持つ役割を明示的に示すことが含まれます。段落、ヘッダー、強調テキスト、表などのコンテンツの性質はすべて、この方法で示すことができます。場合によっては、見出しと小見出しの間、またはテーブルのセル間など、コンテンツのユニット間の関係も示す必要があります。次に、ユーザーエージェントは、たとえば、構造の種類ごとに異なる視覚的表現を使用するか、聴覚表現で異なる音声またはピッチを使用することにより、構造をユーザーに認識させることができます。

ここですでに良い答えを追加するために、私が言及していないことの一つは、前方互換性です。仕様が進化するにつれて、特定のセマンティック要素に追加の機能を指定することが可能になります。コードが意味的に正しい場合、メンテナンスなしで、または最小限のメンテナンスでこの機能を利用できます。

セマンティクスに完全に準拠しているサイトが多くない理由の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>

...クローラーがコンテンツを見つけて分析するのがはるかに簡単になります。

私がクローラーを言うとき、私は必ずしも検索エンジンを意味するわけではありません:)

私は小さなWebコンサルティング会社を経営しており、現在のアプローチは、多くの要素のバランスをとろうとしているため、新しいHTML5タグを使用しないことです。この場合、バランスはユーザビリティ、ユーザビリティ、およびSEOの間です。

• SEO：ここで他に答えられたことは、SEOに少し役立つかもしれませんが、私の経験によれば、SEO戦略がより明白であるほど、それが役立つ可能性は低くなります。

• ユーザビリティ＃1：HTML5タグが何らかのユーザビリティの利点をもたらすと仮定するのは理にかなっています。目の不自由なユーザーにとって、アクセス可能なブラウザーが提供するフォールバックが、私が提供できるものよりも優れていることは間違いありません。一般的なユーザーにとっては、議論の余地があります。ブラウザが提供するスキンのないメディアプレーヤーを使用する方が、使い慣れていないウィジェットよりも使いやすいかもしれません。または、ブラウザのデフォルトががらくたかもしれません（Chrome WindowsのデフォルトのMP3プレーヤーが定期的に動作を停止する方法のように）。

• ユーザビリティ＃2：古いIE。古いIEでは、これらのタグのいずれかが機能するために、ページを膨張させるHTML5シムの束が必要です。使用しているすべてのHTML5タグのループでCreateElement（）を呼び出すスクリプトをheadタグに追加する必要があります。使用中のタグの各ページをくまなく調べない場合は、すべてのHTML5タグを意味します。これはすべての単一ページでインラインで実行する必要があります。つまり、キャッシュはありません。そして悪いニュース：古いIEはJavascriptの実行が最も遅いので、ロード中にすてきな小さな傾斜が作成されます。その後、古いIE専用のJavascriptとCSS、そして多くの場合Flashをひとまとめにして、サポートされていない新しい要素をすべて正しくレンダリングします。古いIEコードの読み込みを決定する前に検出機能を使用できますが、古いIEユーザーに、その機能を検出するのに十分なスクリプトが読み込まれるまで待ってから、それらのタグを機能させるすべてのものを要求し始めることもできます。ブラウザーは古いIEを検出し、それらのブラウザーを使用しているユーザーにのみ送信できますが、プラットフォームによってはキャッシングが困難または不可能になる可能性があります。さまざまなコードをさまざまなユーザーに提供するということは、テストがより複雑になることを意味します-非同期バグが発生したことはありませんか？特定のブラウザでのみ発生するものはどうですか？そして本番のみ？サインアップしてください。だから、おそらくあなたはその膨張をすべての人に送るだけでしょう。さまざまなコードをさまざまなユーザーに提供するということは、テストがより複雑になることを意味します-非同期バグが発生したことはありませんか？特定のブラウザでのみ発生するものはどうですか？そして本番のみ？サインアップしてください。だから、おそらくあなたはその膨張をすべての人に送るだけでしょう。さまざまなコードをさまざまなユーザーに提供するということは、テストがより複雑になることを意味します-非同期バグが発生したことはありませんか？特定のブラウザでのみ発生するものはどうですか？そして本番のみ？サインアップしてください。だから、おそらくあなたはその膨張をすべての人に送るだけでしょう。

IE8が死ぬまで、これらの新しいHTML5タグの値は、それらがもたらすパフォーマンスの問題に対して十分に高くありません。私たちは、まだ死に近づいている視聴者*とはまだ仕事をしていませんが、いつの日かです。

*最近のメトリックでは、IE8の訪問者が最も少ないサイトではIE8が6％であり、IE8の訪問者が24％であることが示されています。遠く、死から遠い。

短い答えは「実際には正当な理由はない」です。「セマンティック」マークアップを支持するほとんどすべての議論は、具体的なものではなく、何が起こるか、または起こるべきかについての考えにすぎません。たとえば、検索エンジンはよく言及されますが、世間体timeやoutputまたはについての世話が最も少ないという公的な証拠はありませんaddress。

間接的に、近い将来、彼らは気にしないと推測できます。schema.orgのサイトでは、いくつかの主要な検索エンジンによって、明確に完全に異なる何か、すなわち、ミクロ（に基づいて「セマンティックマークアップ」への具体的なアプローチ好むitemscopeと関連属性）。そして実際には、主に大規模な商業サイトまたはコミュニティサイトでこれを実行しています。

HTML5ノベルティは、スタイリングの目的であってもIEの古いバージョンでは認識されないため、HTML5ノベルティよりもうまく使用spanできdivます。したがって、コンテナ要素としても「機能」させるには、いくつかの策略が必要です。

ただし、ブラウザ、支援ソフトウェア、または検索エンジンによって実際の意味が割り当てられた「セマンティック」要素がいくつかあります。このh1ような理由から、主見出しに使用することは常に良い習慣です。labelフォームフィールドラベルに使用すると、ユーザビリティとアクセシビリティに大きな影響があります。等々; HTMLの実用ガイド：原則を参照してください。

HTMLは単なるUI言語ではなく、データ構造化言語でもあります。異種マシンが、サーバーに送られる情報のタイプを識別する1つの一般的な方法を持つように設計されました。したがって、非常に多くの異なるタグ。HTMLページはデータ構造と見なされる必要があります。