コンテンツとプレゼンテーションの分離の実際の意味は何ですか？
インラインCSSを避けるという意味ですか？
HTMLを変更せずにデザインを操作できる必要があるということですか？
CSSだけから本当にデザインを変更できますか？
コンテンツとプレゼンテーションの分離を維持するために使用を避けるべきX/HTMLタグはどれですか？
コンテンツとプレゼンテーションの分離は、アクセシビリティ/スクリーンリーダーのユーザーにも役立ちますか？...そしてプログラマー/開発者/デザイナーのために？
コンテンツとプレゼンテーションを定義するときは、HTMLドキュメントをデータコンテナとして参照してください。次に、各要素と属性について次のことを自問してください。
属性/要素は私のデータで意味のあるエンティティを表していますか？
たとえば、<b>タグの間の単語は単に表示目的で太字になっていますか、それともそのデータを強調したいですか？
適切な属性/要素を使用して、表現したいデータのタイプをプロパティで表現していますか？
その特定のセクションを強調したいので、使用するか<em>（イタリックを意味するのではなく、強調を意味し、太字にすることができます）、または必要な<strong>強調のレベルに応じて使用する必要があります。
属性/要素を表示目的でのみ使用していますか？はいの場合、要素を削除し、CSSを使用して親要素のスタイルを設定できますか？
プレゼンテーションタグは、親要素のCSSルールに置き換えることができる場合があります。その場合、プレゼンテーションタグを削除する必要があります。
これらの3つの簡単な質問を自問した後、通常、かなりの情報に基づいた決定を下すことができます。例：
元のコード：
<label for="name"><b>Name:</b></label>
<b>タグを確認しています...属性/要素は私のデータで意味のあるエンティティを表していますか？
いいえ、タグはデータノードを表していません。それは純粋にプレゼンテーションのためにあります。適切な属性/要素を使用して、表現したいデータのタイプをプロパティで表現していますか？
<b>太字の要素の表示に使用されます。属性/要素を表示目的でのみ使用していますか？はいの場合、要素を削除し、CSSを使用して親要素のスタイルを設定できますか？はプレゼンテーション用で、私はそれをプレゼンテーションに使用しているので、はい
。<b>また、<b>要素は全体に影響を与えるため、<label>削除してスタイルをに適用することができます<label>。
セマンティックHTMLの目標は、設計と再設計を単純化することや、インラインスタイルを回避することではなく、パーサーがその特定のタグがドキュメントで何を表すかを理解できるようにすることです。このようにして、コンテンツが何を意味するかをインテリジェントに決定し、それに応じて分類するためのアプリケーション（つまり、検索エンジン）を作成できます。
content:したがって、CSSプロパティを使用してタグ内のテキストを引用符で囲むことは理にかなっています<q>が（プレゼンテーション以外のドキュメントに含まれるデータには価値がありません）、同じCSSプロパティを使用して©を追加することには意味がありません。データに値があるので、フッターの記号。
同じことが属性にも当てはまります。widthサイズ16x16のアイコンを表すタグでandheight属性を使用する<img>ことは、タグの意味を理解することが重要であるため、意味的に意味があり<img>ます（アイコンは、表示されるサイズに応じて異なる表現を持つことができます）。<img>大きな画像のサムネイルを表すタグで同じ属性を使用することはできません。
必要なプレゼンテーションを実現するために、非セマンティック要素を追加する必要がある場合もありますが、通常はそれらを回避できます。
間違った要素はありません。特定の要素の誤った使用法があります。<b>強調を追加するときは使用しないでください。<small>テキストを小さくするのではなく、法的なサブテキストに使用する必要があります（理由についてはHTML5-セクション4.6.4を参照）など...すべての要素には特定の使用シナリオがあり、すべてデータを表します（ただし、プレゼンテーション要素は含まれません）。場合によっては用途があります）。要素を脇に置いてはいけません。
属性は別のものです。ほとんどの属性は、本質的に表現的なものです。<img border>やなどの属性<body fgcolor>は、表現しているデータに意味が含まれることはめったにないため、使用しないでください（まれな場合を除く）。
検索エンジンは、セマンティックドキュメントが非常に重要である理由の良い例です。Microformatsは、検索エンジンが特定の方法で理解するデータを表すために使用できる、事前定義された要素とクラスのセットです。Google検索の商品価格情報は、実際のセマンティクスの例です。
設定された標準で事前定義されたルールを使用してドキュメントに情報を格納することにより、サードパーティプログラムは、失敗しやすいヒューリスティックアルゴリズムを使用せずに、テキストの壁のように見えるものを理解できます。また、スクリーンリーダーやその他のアクセシビリティアプリケーションが、情報が表示されるコンテキストをより簡単に理解するのに役立ちます。また、すべてがセット定義に関連付けられているため、マークアップの保守性にも大いに役立ちます。
最良の例はおそらくCSSZenGardenです。
このサイトの目的は、コンテンツをデザインから厳密に分離して、CSSベースのデザインでのみ可能なことを紹介することです。さまざまなグラフィックデザイナーによって提供されたスタイルシートを使用して、単一のHTMLファイルの視覚的表現を変更し、何百もの異なるデザインを作成します。HTMLマークアップ自体は、異なるデザイン間で変更されることはありません。
各デザインページには、そのデザインのCSSファイルを表示するためのリンクがあります。
コンテンツとプレゼンテーションの分離の実際の意味は何ですか？
やや具体的なものというよりは、むしろデザイン哲学です。一般に、これは、コンテンツのセマンティクスを保持し、コンテンツを構造化された情報の一部と見なす必要があることを意味します。そしてそれはまた、この構造化された情報からすべての美的詳細を遠ざける必要があることを意味します。
インラインCSSを避けるという意味ですか？
上記のように、インラインスタイルはコンテンツのセマンティクスとは関係がないため、絶対に避ける必要があります。しかし、それだけではありません。
デザインに従ってhtmlを記述した後、デザインに変更を加えたい場合は、cssのみを使用する必要があり、htmlを使用する必要はありません。
残念ながら、基礎となるマークアップを変更せずに、具体的な美的目標を達成できるとは限りません。CSS3は、これらの問題に対処するために最善を尽くします。
コンテンツとプレゼンテーションの分離を維持するために使用を避けるべきX/HTMLタグはどれですか？
W3C HTML 4.01 /XHTML1.0リファレンスで非推奨のタグを探します
コンテンツとプレゼンテーションの分離は、アクセシビリティ/スクリーンリーダーのユーザーにも役立ちますか？
もちろん。特定のブラウザがスタイルを正しくレンダリングしない（またはまったくレンダリングしない）場合でも、一般に、より適切に構造化された情報は読み取り可能なままです。このようなコンテンツは、印刷されたメディアでもより適切に見える場合があります（ただし、印刷スタイルを適用してさらに優れたエステリックを実現することもできます。これも、コンテンツのセマンティクスとは関係ありません）。
コンテンツとプレゼンテーションの分離は、プログラマー/開発者/デザイナーにとっても役立ちますか？
もちろん。コンテンツとプレゼンテーションの分離は、より一般的な哲学である関心の分離に端を発しています。誰もが分離の恩恵を受けます。コンテンツサプライヤは優れたデザイナーである必要はなく、その逆も同様です。
特定のポイントで改行を入れることは避けられません。通常、プレゼンテーションとコンテンツが多少重複します。ただし、常に完全な分離を目指す必要があります。
もう1つの極端な例として、レイアウト目的でのみ使用されるテーブルのロードとロードを含むページがあります。これは、絶対に避けなければならない明確なアンチパターンです。コンテンツは、ここのレイアウトの後に2番目のフィドルを再生します。多くの場合、順序が正しくないため、機械で読み取ることはほとんどできません。機械可読でないコンテンツは、アクセシビリティに悪影響を及ぼし、ページの検索エンジンランキングにも悪影響を及ぼします。
プレゼンテーションを気にせずにコンテンツをマークアップすることで、何よりもまず、コンテンツを機械可読にすることができます。また、モバイル向けに最適化されたバージョンなど、同じコンテンツをさまざまな形式でさまざまなクライアントに提供することもできます。また、大規模な再設計など、HTMLファイルをいじることなくプレゼンテーションを簡単に変更できます。
コンテンツとプレゼンテーション（HTML-CSSファイル）を分離することで自然に得られるもう1つの利点は、入力と保守が少なくて済み、さらにページに一貫したスタイルを非常に簡単に適用できることです。何千ものインラインスタイルと、同じ「意味」（マークアップ）を持つすべての要素に「自然に」適用される1つのCSSファイル内の1つのスタイル定義を比較してください。
理想的には、（X）HTMLは、意味のあるセマンティックマークアップと、セレクターにこのマークアップを使用するスタイルのCSSのみで構成されます。現実の世界では、クラスとIDをマークアップに混在させることがよくありますが、これらの追加の「フック」を使用してすべてを希望どおりにスタイル設定する必要があるため、追加の意味はありません。しかし、ここでもとの間には違いがclass="blue right-aligned"ありclass="contact-info secondary"ます。スタイルではなく、常にコンテンツに意味を追加するようにしてください。これのバランスを取ること自体がかなりの芸術です。:)