Quelle est la signification réelle de la séparation du contenu et de la présentation?

Question

Quelle est la signification réelle de la séparation du contenu et de la présentation?

Est-ce que cela signifie juste pour éviter css en ligne?

Est-ce que cela signifie que la conception devrait pouvoir manipuler sans modifier le code HTML?

Peut-on vraiment faire un changement dans la conception de CSS seulement?

• Si nous voulons changer la taille images alors nous devrons aller dans Le code HTML
• Si nous blême pour ajouter ensuite une pause de plus de ligne du paragraphe encore nous doivent aller dans le code HTML
• Si nous voulons ajouter un séparateur à un endroit puis à nouveau, nous aurons pour aller dans le code HTML

Quelle X / balise HTML, nous devons éviter d'utiliser pour maintenir la séparation du contenu et de la présentation?

Est séparation du contenu et de la présentation également utile pour les utilisateurs de lecteurs d'accessibilité / écran? ... et pour le programmeur / développeur / concepteur?

Answer 1

Lors de la définition ce qui est contenu et la présentation, consultez votre document HTML en tant que conteneur de données. Ensuite, demandez-vous ce qui suit sur chaque élément et attribut:

• L'attribut / élément représente une entité significative dans mes données? Par exemple, les mots entre étiquette <b> sont en gras simplement à des fins d'affichage ou que je voulais ajouter l'accent sur ces données?

• Suis-je utiliser l'attribut / élément propre à la propriété représentent le type de données que je veux représenter? Comme je veux ajouter l'accent sur cette section particulière, je devrais utiliser <em> (cela ne signifie pas en italique, cela signifie que l'accent et peut être gras) ou <strong> en fonction du niveau de l'accent voulu.

• Suis-je utiliser l'attribut / élément uniquement à des fins d'affichage? Si oui, l'élément peut être retiré et l'élément parent de style en utilisant le CSS? Parfois, une étiquette peut être simplement de présentation remplacé par des règles CSS sur l'élément parent. Dans ce cas, l'étiquette doit être de présentation supprimée.

Après vous poser ces trois questions simples, vous êtes généralement en mesure de prendre une décision assez éclairée. Un exemple:

  

Code d'origine:   <label for="name"><b>Name:</b></label>

     

Vérification de la balise <b> ...

     

L'attribut / élément représente une entité significative dans mes données?   Non, l'étiquette ne représente pas un nœud de données. Il est là uniquement pour la présentation.

     

Suis-je utiliser l'attribut / élément propre à la propriété représentent le type de données que je veux représenter?   <b> est utilisé pour la présentation des éléments gras.

     

Suis-je utiliser l'attribut / élément uniquement à des fins d'affichage? Si oui, l'élément peut être retiré et l'élément parent de style en utilisant le CSS?   Depuis <b> est et je présentation l'utiliser pour la présentation, oui. Et puisque l'élément <b> affecte l'ensemble de <label>, il peut être retiré et le style est appliqué à la <label>.

sémantique L'objectif de HTML est de ne pas simplifier la conception et la refonte ou pour éviter un style en ligne, mais pour aider un analyseur à comprendre ce que ces balises représentent dans votre document. De cette façon, les applications peuvent être créées (c.-à- .:. moteur de recherche) de décider intelligemment ce que signifie votre contenu et de le classer en conséquence

Par conséquent, il est logique d'utiliser la propriété CSS content: pour ajouter des guillemets autour du texte situé dans une balise <q> (il n'a pas de valeur aux données contenues dans votre document autre que la présentation), mais aucun sens à l'utilisation du même CSS propriété pour ajouter un symbole © dans votre pied de page car il a une valeur dans vos données.

La même chose vaut pour les attributs. Utilisation de l'width et attribut height sur une balise <img> représentant une icône au format 16x16 sens sémantique car il est important de comprendre la signification de la balise <img> (une icône peut avoir différentes représentations en fonction de la taille, il est affiché à). En utilisant les mêmes attributs sur une balise <img> représentant une vignette d'une image ne fonctionne pas.

Parfois, vous devez ajouter des éléments non-sémantiques pour être en mesure de réaliser votre présentation voulue, mais en général ceux qui sont évitables.

Il n'y a pas de mauvais éléments. Il y a des utilisations erronées des éléments particuliers. <b> ne doit pas être utilisé lors de l'ajout accent. <small> doit être utilisé pour les sous-texte juridique, de ne pas faire plus petit (voir texte microformats sont un ensemble prédéfini d'éléments et les classes que vous pouvez utiliser pour représenter les données qui les moteurs de recherche comprendront d'une certaine manière. Les informations sur les prix des produits dans Google Recherches est un exemple de la sémantique à travail.

En utilisant les règles prédéfinies dans les normes définies pour stocker des informations sur votre document permet à des programmes tiers de comprendre ce qui semble être un mur de texte sans l'aide d'algorithmes heuristiques qui peuvent être sujettes à des défaillances. Il aide également les lecteurs d'écran et d'autres applications d'accessibilité pour comprendre plus facilement le contexte dans lequel l'information est présentée. Il aide aussi grandement la maintenabilité de votre balisage que tout est lié à une définition de jeu.

Answer 2

Le meilleur exemple est probablement le CSS Zen Garden .

Le but de ce site est de mettre en valeur ce qui est possible avec la conception à base de CSS seulement, avec une séparation stricte du contenu de la conception. Les feuilles de style apportés par différentes graphistes sont utilisés pour modifier la présentation visuelle d'un seul fichier HTML , produisant des centaines de modèles différents. Le balisage HTML lui-même ne change jamais entre les différents modèles.

Sur chaque page de conception, vous auriez un lien pour afficher le fichier CSS de cette conception.

Answer 3

  

Quelle est la signification réelle de la séparation du contenu et de la présentation?

Il est plutôt une philosophie de conception que peu concrète. En général, cela signifie que vous devez préserver la sémantique du contenu, pensez à votre contenu d'une information structurée. Et cela signifie aussi que vous devez garder tous les détails esthétiques loin de ces informations structurées.

  

est ce que cela signifie juste pour éviter css en ligne?

Comme noté ci-dessus, les styles en ligne ont rien à voir avec la sémantique de votre contenu et doit être évitée à tout prix. Mais ce n'est pas juste que.

  

est ce que cela signifie que si après avoir écrit html suivant la conception alors si alors si nous voulons faire tout changement dans la conception, alors il devrait être seulement avec css, pas besoin de html

Malheureusement, il est toujours possible d'atteindre des objectifs esthétiques concrets sans modifier le balisage sous-jacent; CSS3 essaie il est préférable d'aborder ces questions.

  

Quelle X / balise HTML, nous devons éviter d'utiliser pour maintenir la séparation du contenu et de la présentation?

Rechercher des balises dans W3C HTML 4.01 / XHTML 1.0 Référence

  

est la séparation du contenu et de la présentation également utile pour les utilisateurs de lecteurs d'accessibilité / écran?

Sûrement. Une meilleure information structurée reste généralement lisible même si certains navigateurs rendent les styles de manière incorrecte (ou ne les rendent pas du tout). Ce contenu peut également regarder plus adéquate sur les médias imprimés (bien que les styles d'impression peuvent être appliqués pour atteindre aestherics encore mieux - ils, encore une fois, n'a rien à voir avec la sémantique de contenu).

  

est la séparation du contenu et de la présentation également utile pour le programmeur / développeur / concepteur?

Bien sûr. La séparation du contenu et de la présentation prend ses racines de la philosophie plus générale, la séparation des préoccupations. Tout le monde bénéficient de la séparation:. Le fournisseur de contenu ne doit pas être un bon concepteur et vice versa

Answer 4

La mise en sauts de ligne à certains points est inévitable, il y aura généralement un certain chevauchement de la présentation et le contenu. Vous devriez toujours viser une séparation parfaite bien.

Prenez l'autre extrême: Une page contenant des charges et des charges de tables qui sont utilisées uniquement à des fins de mise en page. Ceci est l'anti-modèle précis qui doit être évité à tout prix. Le contenu joue un second violon après la mise en page ici; il est souvent pas dans l'ordre et par conséquent difficilement lisible par machine. Non machine de contenu lisible est mauvais pour l'accessibilité et mauvais pour la recherche de classement des moteurs de la page.

En balisant contenu sans souci de présentation, vous êtes d'abord et avant tout le rendant lisible par une machine. Vous êtes alors également en mesure de servir le même contenu à différents clients dans différents formats, par exemple dans une version mobile optimisée. Vous pouvez également modifier la présentation facilement sans avoir à jouer avec les fichiers HTML, disons que pour une grande refonte.

Un autre avantage qui vient naturellement en séparant le contenu et la présentation (HTML - fichiers CSS) est que vous avez moins de taper et moins à maintenir, plus vos pages peuvent avoir un style cohérent appliqué très facilement. Contraste des milliers de styles en ligne par rapport à une définition de style dans un fichier CSS, qui est « naturellement » appliqué à tous les éléments avec le même « sens » (balisage).

Idéalement, votre (X) HTML ne se compose que de sens, le balisage sémantique et votre CSS de styles en utilisant ce balisage pour ses sélecteurs. Dans le monde réel, vous aurez souvent panacher les classes et les ID dans votre balisage qui ajoutent aucune signification supplémentaire, parce que vous avez besoin de ces « crochets » supplémentaires pour le style de tout ce que la façon dont vous voulez. Mais même ici, il y a une différence entre class="blue right-aligned" et class="contact-info secondary". Essayez toujours d'ajouter signifie au contenu, pas de style. Équilibre entre c'est tout à fait un art en soi. :)