コンテンツとプレゼンテーションを分離することの実際の意味は何ですか?

https://stackoverflow.com/questions/2260391

20-09-2019
|

質問

インラインCSSを避けるのはただの意地悪なのでしょうか？

HTMLを変更せずにデザインを操作できる必要があるという意味ですか?

本当にCSSだけでデザインを変更できるのでしょうか？

画像のサイズを変更したい場合は、HTMLコードにアクセスする必要があります
パラグラフにもう1つの行のブレークを追加する場合は、HTMLコードにアクセスする必要があります。
ある場所にもう1つのセパレーターを追加したい場合は、HTMLコードにアクセスする必要があります。

コンテンツとプレゼンテーションを分離するために使用を避けるべき X/HTML タグはどれですか?

コンテンツとプレゼンテーションの分離は、アクセシビリティ/スクリーンリーダーユーザーにとっても役立ちますか?...プログラマー/開発者/デザイナーにとっては?

解決

コンテンツとプレゼンテーションが何であるかを定義するときは、HTML ドキュメントをデータコンテナーとして参照してください。次に、各要素と属性について次のことを自問してください。

属性/要素はデータ内の意味のあるエンティティを表していますか?
たとえば、次の単語は次のとおりです。  タグが太字で表示されているのは単に表示目的でしょうか、それともそのデータを強調したかったのでしょうか?
表現したいデータの種類を表すプロパティに適切な属性/要素を使用していますか?
その特定のセクションを強調したいので、次のように使用します。  (斜体という意味ではなく、強調を意味し、太字にすることもできます) または  必要な強調のレベルに応じて。
属性/要素を表示目的のみに使用しているのでしょうか?「はい」の場合、要素を削除し、CSS を使用して親要素のスタイルを設定できますか?
場合によっては、プレゼンテーションタグを親要素の CSS ルールに単純に置き換えることができます。この場合、プレゼンテーションタグを削除する必要があります。

これら 3 つの簡単な質問を自問すると、通常は十分な情報に基づいた決定を下すことができます。例：

元のコード: <label for="name">Name:</label>

を確認する  鬼ごっこ...

属性/要素はデータ内の意味のあるエンティティを表していますか?
いいえ、タグはデータノードを表しません。それは純粋にプレゼンテーションのために存在します。

表現したいデータの種類を表すプロパティに適切な属性/要素を使用していますか?
 太字の要素を表現するために使用されます。

属性/要素を表示目的のみに使用しているのでしょうか?「はい」の場合、要素を削除し、CSS を使用して親要素のスタイルを設定できますか?
以来  はい、プレゼンテーション用に使用しています。そしてそれ以来、  要素が全体に影響を与える <label>, 、取り外してスタイルを適用することができます。 <label>.

セマンティック HTML の目標は、デザインや再設計を簡素化したり、インラインスタイルを回避したりすることではなく、パーサーがドキュメント内でその特定のタグが何を表しているのかを理解できるようにすることです。このようにして、アプリケーションを作成できます (例:検索エンジン）を使用して、コンテンツが何を意味するのかをインテリジェントに判断し、それに応じて分類します。

したがって、CSS プロパティを使用するのが合理的です。 content: にあるテキストの周囲に引用符を追加するには、 <q> タグ (プレゼンテーション以外のドキュメントに含まれるデータには値がありません) ですが、データに値があるため、同じ CSS プロパティを使用してフッターに © 記号を追加するのは意味がありません。

属性にも同じことが当てはまります。の使用 width そして height の属性 <img> サイズ 16x16 のアイコンを表すタグは、その意味を理解することが重要であるため、意味的に意味があります。 <img> タグ (アイコンは、表示されるサイズに応じて異なる表現を持つことができます)。同じ属性を使用する <img> 大きな画像のサムネイルを表すタグには含まれません。

場合によっては、目的のプレゼンテーションを実現するために非セマンティック要素を追加する必要がありますが、通常はこれらの要素は回避可能です。

間違った要素はありません。特定の要素の間違った使用法があります。  強調を加える場合には使用しないでください。  テキストを小さくするためではなく、法的なサブテキストとして使用する必要があります (「 HTML5 - セクション 4.6.4 なぜか)、など...すべての要素には特定の使用シナリオがあり、すべてデータを表します (プレゼンテーション要素は除きますが、場合によっては用途があります)。どの要素も脇に置いてはいけません。

属性は別物です。ほとんどの属性は本質的にプレゼンテーション的なものです。などの属性 <img border> そして <body fgcolor> 表現しているデータに意味が含まれることはほとんどないため、(まれな場合を除いて) 使用しないでください。

検索エンジンは、セマンティックドキュメントがなぜそれほど重要なのかを示す良い例です。マイクロフォーマットは、検索エンジンが特定の方法で理解できるデータを表すために使用できる、事前定義された要素とクラスのセットです。 Google 検索の商品価格情報はセマンティクスが機能している例です。

設定された標準で事前に定義されたルールを使用して文書に情報を保存すると、サードパーティのプログラムは、失敗しやすいヒューリスティックアルゴリズムを使用せずに、テキストの壁のように見えるものを理解できるようになります。また、スクリーンリーダーやその他のアクセシビリティアプリケーションが、情報が表示されるコンテキストをより簡単に理解するのにも役立ちます。また、すべてがセット定義に関連付けられるため、マークアップの保守性にも非常に役立ちます。

他のヒント

最良の例は、おそらく CSSの禅庭がをされます。

このサイトの目的は、設計から、コンテンツの厳密に分離して、唯一のCSSベースのデザインで何かを可能に紹介することです。様々なグラフィックデザイナーで貢献スタイルシートは単一のHTMLファイルの、異なるデザインの数百を生成します。 HTMLマークアップ自体は、異なるデザインの間で変化しない。

各設計ページでは、そのデザインのCSSファイルを表示するためのリンクを持っていると思います。

コンテンツとプレゼンテーションを分離することの実際の意味は何ですか?

これは具体的なものというよりはむしろ設計哲学です。一般に、これはコンテンツのセマンティクスを保持し、コンテンツを構造化された情報の一部として考える必要があることを意味します。そしてそれはまた、美的詳細をすべてこの構造化された情報から遠ざけるべきであることを意味します。

それはインラインCSSを避けるためだけの意味ですか？

上で述べたように、インラインスタイルはコンテンツのセマンティクスとは何の関係もないため、絶対に避けるべきです。でもそうではありませんただそれ。

デザインに従ってHTMLを書いた後、デザインに変更を加えたい場合はCSSのみを使用する必要があり、HTMLを作成する必要がないという意味ですか?

残念ながら、基礎となるマークアップを変更せずに具体的な美的目標を達成できるとは限りません。CSS3 は、これらの問題に最善の方法で対処しようとします。

コンテンツとプレゼンテーションを分離するために使用を避けるべき X/HTML タグはどれですか?

で非推奨のタグを探します W3C HTML 4.01 / XHTML 1.0 リファレンス

コンテンツとプレゼンテーションの分離は、アクセシビリティ/スクリーンリーダーユーザーにとっても役立ちますか?

きっと。一般に、構造化された情報は、特定のブラウザーでスタイルが正しく表示されない (またはまったく表示されない) 場合でも、読み取り可能な状態を保ちます。このようなコンテンツは、印刷媒体でもより適切に見える可能性があります (ただし、さらに優れた美観を実現するために印刷スタイルが適用される場合もあります。これらは、繰り返しになりますが、コンテンツのセマンティクスとは何の関係もありません)。

コンテンツとプレゼンテーションの分離は、プログラマー/開発者/デザイナーにとっても役立ちますか?

もちろん。コンテンツとプレゼンテーションの分離は、より一般的な哲学、つまり関心事の分離に由来しています。分離によって誰もが恩恵を受けます:コンテンツ供給者が優れたデザイナーである必要はなく、またその逆も同様です。

特定の時点で改行を入れて通常のプレゼンテーションとコンテンツの一部重複があるだろう、避けられません。あなたはいつもかかわらず、完全な分離を目指すべきます。

レイアウト目的でのみ使用されているテーブルの負荷と負荷を含むページ：

他の極端を取ります。これは、すべてのコストで避けなければならない明確なアンチパターンです。コンテンツはここで、レイアウト後の第二バイオリンを果たしています。それが正しい順序で頻繁にではないですし、それによって、ほとんど機械読み取り可能。ない機械可読コンテンツは、ページの検索エンジンのランキングのアクセシビリティのために悪いと悪います。

プレゼンテーションのための心配のないコンテンツをマークアップすることで、あなたは何よりもまず、それは機械可読なっています。あなたが異なるフォーマットでさまざまなクライアントに同じコンテンツを提供する立場にも続いている、モバイル最適化バージョンで言います。また、大きな再設計のために言って、HTMLファイルを台無しにすることなく、簡単にプレゼンテーションを変更することができます。

（HTML - CSSファイル）コンテンツとプレゼンテーションを分離することによって、自然に来るもう一つの利点は、あなたが維持するために入力する少なくを持って、プラスあなたのページは一貫したスタイリングは非常に容易に適用できることです。「自然」と同じ「意味」（マークアップ）を持つすべての要素に適用されます。

1つのCSSファイルにインラインスタイル対1つのスタイル定義の何千ものコントラスト

理想的には、あなたの（X）HTMLのみ意味を持ち、セマンティックマークアップとそのセレクタのためにこのマークアップを使用したスタイルのあなたのCSSで構成されています。現実の世界では、多くの場合、あなたは、すべてあなたがしたい方法をスタイルするためにこれらの余分な「フック」を必要とするので、余分な意味を追加していない、あなたのマークアップにクラスやIDを混ぜます。しかし、ここでもclass="blue right-aligned"とclass="contact-info secondary"の間に違いがあります。常にコンテンツではなく、スタイルにの意味を追加してみてください。このバランスをとること自体がかなり芸術です。：）

ライセンス： CC-BY-SA と帰属

所属していません StackOverflow