Was ist die eigentliche Bedeutung der Trennung von Inhalt und Präsentation?

Question

Was ist die eigentliche Bedeutung der Trennung von Inhalt und Präsentation?

Ist es nur mittlere Inline-CSS zu vermeiden?

Bedeutet es, dass das Design der Lage manipuliert werden soll, die HTML?

ohne Änderung

Können wir wirklich jede Änderung von CSS in Design machen nur?

• Wenn wir die Größe ändern wollen Bilder, dann werden wir gehen müssen, um in HTML-Code
• Wenn wir noch einen Zeilenumbruch in Absatz hinzufügen wan dann werden wir wieder gehen müssen, um in HTML-Code
• Wenn wir einen weiteren Separator hinzufügen möchten an einem Ort, dann werden wir wieder haben Geh zu in HTML-Code

Welche X / HTML-Tag wir verwenden sollten sie vermeiden, Trennung von Inhalt und Präsentation zu halten?

Sind Trennung von Inhalt und Präsentation auch hilfreich für die Zugänglichkeit / Screenreader-Nutzer? ... und für Programmierer / Entwickler / Designer?

Answer 1

Bei der Festlegung, welche Inhalte und Präsentation finden Sie in HTML-Dokument als Datencontainer. Dann fragen Sie sich folgendes auf jedes Element und Attribut:

• Ist das Attribut / Element stellt eine sinnvolle Einheit in meinen Daten?
  Zum Beispiel sind die Worte zwischen <b> Tag sind fett einfach zu Anzeigezwecken oder wollte ich Wert auf diesen Daten hinzufügen?

• Bin ich mit dem richtigen Attribut / Element Eigenschaft repräsentieren die Art der Daten, die ich darstellen möchte?
  Da ich Schwerpunkt auf diesem speziellen Abschnitt hinzufügen mag, soll ich <em> (es kursiv bedeutet nicht, bedeutet dies, Betonung und fett gemacht werden) oder <strong> die Höhe des Schwerpunktes je wollte.

• Bin ich das Attribut / Element verwendet nur für die Anzeige? Wenn ja, kann das Element entfernt und das übergeordnete Element gestylt mit CSS?
  Manchmal kann ein Präsentations-Tag einfach von CSS-Regeln für das übergeordnete Element ersetzt werden. In diesem Fall entfernt der Präsentations-Tag sein muss.

Sie sich diese drei einfachen Fragen Nach der Frage, sind Sie in der Regel der Lage, eine ziemlich informierte Entscheidung zu treffen. Ein Beispiel:

  

Original-Code:   <label for="name"><b>Name:</b></label>

     

Überprüfen des <b> Tages ...

     

Hat das Attribut / Element eine sinnvolle Einheit in meinen Daten darstellen?
  Nein, der Tag nicht einen Datenknoten darstellen. Es ist dort rein für die Präsentation.

     

Bin ich mit dem richtigen Attribut / Element Eigenschaft repräsentieren die Art der Daten, die ich darstellen möchte?
  <b> wird für die Darstellung von fett Elemente verwendet.

     

Bin ich mit dem Attribut / Element nur für die Anzeige? Wenn ja, kann das Element entfernt und das übergeordnete Element gestylt mit CSS?
  Da <b> ist Präsentations- und Ich benutze es für die Präsentation, ja. Und da das <b> Element der ganze <label> wirkt, kann es entfernt und Stil auf den <label> angewandt werden werden.

Semantic HTML Ziel ist es nicht zu vereinfachen Design und Redesign oder Inline-Styling zu vermeiden, aber ein Parser zu helfen, zu verstehen, was die besondere Tag in Ihrem Dokument darstellen. Auf diese Weise können Anwendungen erstellt werden (dh . intelligent entscheiden, was dementsprechend sie Ihre Inhalte signify und zu klassifizieren

) Suchmaschine.:

Daher macht es Sinn, die CSS-Eigenschaft content: zu verwenden Anführungszeichen um Text hinzuzufügen in einem <q>-Tag befindet (es keinen Wert auf die Daten in Ihrem Dokument anderen enthalten die Präsentation), aber keinen Sinn, sich auf die Verwendung der gleichen CSS Eigenschaft ein Symbol © in der Fußzeile hinzuzufügen, da sie einen Wert in Ihren Daten haben.

Das gleiche gilt für Attribute. Mit Hilfe des width und height Attribute auf einen <img> Tag ein Symbol an Größe darstellt 16x16 semantischen Sinn macht, da es wichtig ist, die Bedeutung des <img> Tages zu verstehen (ein Symbol kann verschiedene Darstellungen hat je nach Größe es angezeigt wird). Unter Verwendung der gleichen Attribute auf einem <img> Tag ein Miniaturbild eines größeren Bildes darstellen nicht.

In einigen Fällen müssen Sie nicht-semantische Elemente hinzufügen können, um Ihre wollte Präsentation erreichen, aber in der Regel diejenigen sind vermeidbar.

Es gibt keine falschen Elemente. Es gibt falsche Verwendungen bestimmter Elemente. <b> sollte nicht verwendet werden, wenn die Betonung hinzugefügt wird. <small> sollte für Rechtsunter Text verwendet wird, nicht Text kleiner (siehe sind Mikroformate eine vordefinierte Reihe von Elementen und Klassen, die Sie zur Darstellung von Daten, die Motoren werden verstehen suchen können in gewisser Weise. Die Informationen Produktpreis in Google-Suchen ein Beispiel für Semantik ist Arbeit.

die vordefinierten Regeln in festgelegten Standards zu speichern Informationen in Ihrem Dokument Durch die Verwendung erlaubt Programme von Drittanbietern zu verstehen, was eine Wand aus Text zu sein scheint, ohne Heuristik-Algorithmen, die zu Ausfällen neigen können. Es hilft auch, Screenreadern und andere Zugänglichkeit Anwendungen leichter den Kontext zu verstehen, in der die Informationen dargestellt werden. Es hilft auch stark die Wartbarkeit Ihrer Markup als alles auf eine Menge Definition gebunden ist.

Answer 2

Das beste Beispiel ist wohl das CSS Zen Garden .

Das Ziel dieser Seite ist es zu zeigen, was möglich ist mit CSS-basierten Design nur mit einer strikten Trennung von Inhalten aus dem Design. Stylesheets von verschiedenen Grafikdesigner beigetragen werden verwendet, um die visuelle Darstellung ändern einer einzigen HTML-Datei Hunderte von verschiedenen Designs zu erzeugen. Die HTML-Markup selbst ändert sich nie zwischen den verschiedenen Designs.

Auf jedem Design Seite, würden Sie einen Link haben Sie die CSS-Datei dieses Design zu sehen.

Answer 3

  

Was ist die eigentliche Bedeutung der Trennung von Inhalt und Präsentation?

Es ist eher eine Design-Philosophie als etwas konkreter. In der Regel bedeutet dies, dass Sie die Semantik des Inhalts bewahren sollte, denken Sie an Ihre Inhalte als ein Stück von strukturierten Informationen. Und das bedeutet auch, dass Sie alle ästhetischen Details weg von diesen strukturierten Informationen halten sollen.

  

ist es nur bedeuten, Inline-CSS zu vermeiden?

Wie bemerkt oben, Inline-Stile nichts mit Semantik Ihrer Inhalte zu tun und sollte unter allen Umständen vermieden werden. Aber es ist nicht nur das.

  

ist es nur bedeuten, wenn nach dem Schreiben html nach dann zu entwickeln, wenn dann, wenn wir eine Änderung in Design tun wollen, dann sollte es nur mit CSS sein, keine Notwendigkeit, html

Leider ist es nicht immer möglich, einige konkreten ästhetischen Ziele zu erreichen, ohne den zugrunde liegenden Markup zu modifizieren; CSS3 versucht, es ist am besten, diese Probleme zu lösen.

  

Welche X / HTML-Tag wir verwenden sollten sie vermeiden, Trennung von Inhalt und Präsentation zu halten?

Geben Sie für veraltete Tags in W3C HTML 4.01 / XHTML 1.0 Referenz

  

Ist Trennung von Inhalt und Präsentation auch hilfreich für die Zugänglichkeit / Screenreader-Nutzer?

Sicher. Besser strukturierte Informationen bleibt in der Regel lesbar, auch wenn bestimmte Browser Stile falsch machen (oder sie machen sie nicht). Solche Inhalte auf Printmedien können auch angemessenere aussehen (obwohl Druckstile angewendet werden kann, noch besser aestherics zu erreichen - sie wiederum haben nichts mit Inhalt Semantik zu tun).

  

Ist Trennung von Inhalt und Präsentation auch hilfreich für Programmierer / Entwickler / Designer?

Natürlich. Die Trennung von Inhalt und Präsentation nimmt seine Wurzeln aus allgemeinere Philosophie, die Trennung von Bedenken. Jeder profitiert von der Trennung. Die Inhaltsanbieter muss nicht kehrte einen guten Designer und vice sein

Answer 4

Putting in Zeilenumbrüche an bestimmten Punkten unvermeidlich ist, wird es in der Regel eine gewisse Überlappung der Präsentation und Inhalt sein. Sie sollten immer für perfekte Trennung Ziel though.

Nehmen Sie das andere Extrem: Eine Seite lädt und lädt von Tabellen enthalten, die nur zu Layoutzwecken verwendet werden. Dies ist die definitive anti-Muster, das auf jeden Fall vermieden werden sollte. Der Inhalt spielt eine zweite Geige nach dem Layout hier; es ist oft nicht in der richtigen Reihenfolge und damit kaum maschinenlesbar. Nicht maschinenlesbarer Inhalt ist schlecht für die Zugänglichkeit und schlecht für die Suche der Seite Engine Ranking.

Mit dem Markieren von Inhalten ohne Sorge um die Präsentation, sind Sie in erster Linie sie maschinenlesbar zu machen. Sie sind dann in der Lage, auch den gleichen Inhalt an verschiedene Kunden in verschiedenen Formaten, etwa in einer mobilen Endgeräte optimierte Version zu dienen. Sie können auch die Präsentation einfach mit den HTML-Dateien, ohne zu verwirren ändern, für ein großes Redesign sagen.

Ein weiterer Vorteil, der durch Trennung von Inhalt und Präsentation natürlich kommt (HTML - CSS-Dateien) ist, dass Sie weniger zu geben und weniger zu halten, und Ihre Seiten kann ein einheitliches Design haben sehr leicht angewandt. Contrast Tausende von Inline-Styles vs. einer Stildefinition in einer CSS-Datei, die „natürlich“ auf alle Elemente angewandt wird, mit dem gleichen „Bedeutung“ (Markup).

Im Idealfall Ihre (X) HTML besteht nur aus sinnvoll, semantisches Markup und CSS-Stile dieses Markup für seine Selektoren. In der realen Welt werden mischen Sie oft Klassen und IDs in Ihrem Markup, die keine zusätzliche Bedeutung hinzufügen, da Sie diese zusätzlichen „Haken“, um Stil alles, was die Art und Weise Sie wollen. Aber auch hier gibt es einen Unterschied zwischen class="blue right-aligned" und class="contact-info secondary". Versuchen Sie immer, hinzuzufügen, was bedeutet, , um den Inhalt, nicht Stil. Balancing dies ist schon eine Kunst für sich. :)