Comment sémantique X / HTML peut gagner du temps quand nous écrirons CSS?

Question

Comment balisage sémantique X / HTML peut gagner du temps -

1. quand nous écrirons CSS site web
2. et si des changements de conception vient de client à l'avenir.
3. Et pourquoi des mises en page de la table seront prendre plus de temps toujours à la fois état

Aujourd'hui, j'ai à expliquer ces choses aux élèves.

J'ai quelques exemples, mais je veux un peu plus bon exemple et des idées pour expliquer bien.

Je veux expliquer quels sont les avantages majoration sémantique X / HTML à partir du point de vue des développeurs.

Merci d'avance

Mise à jour:

Les avantages de l'utilisation de majoration sémantique :

1. Il sera lisible de bonne façon à voir les gens du document dans un environnement où CSS ne peut pas être appliquée.
2. Il sera beaucoup plus facile pour les développeurs web pour maintenir le code, et de séparer le contenu (HTML) de présentation (CSS).
3. Le balisage sémantique peut réduire les besoins du groupe css sélecteurs dans certains cas.

Answer 1

De mon expérience de travail: j'ai eu plusieurs fois maintenant à regarder le balisage héritage de mon prédécesseur ou de tout autres personnes (et en fait une ou deux fois de moi aussi). Parfois, je devais seulement ce qui venait de visualiser la source dans un navigateur. Mes résultats à ce jour sont les suivants:

• Si l'auteur a utilisé balisage sémantique dans la mesure du possible, ainsi que les noms de classe claire et logique, il était vraiment facile et amusant de découvrir la structure de la page et, par exemple, le code d'un nouveau widget ou de restructurer la disposition des colonnes ou des trucs

• Si l'auteur a utilisé table en fonction mise en page, et j'ai aussi eu des choses de la fin des années 90 à regarder, il est un désordre complet. Vous devez comprendre, quelle ligne tableau fait quoi, quelle cellule de table appartient où et si vous commencez à penser que vous obtiendrez une prise, vous avez oublié une 300lines de rowspan="3" de balisage plus tôt. Même dans Firebug, vous pouvez devenir fou avec une telle soupe tag.

  Ajout de nouvelles choses ici peut devenir assez aventureux. Si vous ajoutez du contenu à une cellule de tableau, et ne pas complètement fixer la largeur et la hauteur de la nouvelle substance, vous pourriez vous retrouver avec des lacunes déplaisantes sur toute la page et oublier d'ouvrir ou <td>s près quelque part (avec 200 erreurs de validation sur la page d'origine, vous êtes susceptible de manquer quelque chose quelque part) peut conduire à une vue complètement vissée.

• Si l'auteur a utilisé et portées divs dans tous les sens, mais n'a pas fait un balisage sémantique (qui est, au lieu de l'écriture <div class="header1"/> <h1/>), il est encore mieux que la table des moyens mise en page (au plus en raison de la rowspan et colspan mentionné et parce que vous ayiez une chance que la page ne pourrait pas souffler complètement en place, s'il y a un manque </div> quelque part), mais vous pouvez toujours devenir fou sur le balisage comme

  </div></div>
  </div>
     </div>
    </div>
  </div></div>
    </div>
  

  De plus, si j'avais une feuille de style qui l'accompagne, il était la plupart du temps un désordre complet, aussi. La différence entre .header, .header1, les forces div.header_level1 et #middle .h1 vous aller et venir entre les stylesheet et le balisage.

Answer 2

Le principal avantage, en plus d'un code plus fiable et contrôlable, pour les développeurs est code clair. Avec l'écriture XHTML sémantique, vous pouvez éviter l'écriture de code vague qui sera difficile à déchiffrer par d'autres développeurs ou vous-même à l'avenir.

IE. <address> est préférable pour l'inscription d'une adresse que d'utiliser un <div> (ce qui arrive souvent ...), tout en ayant la même flexibilité, le style et l'amélioration de la lisibilité.

Answer 3

  

  
1. nous écrirons CSS première fois pour le site Web
  

Chaque site a un aspect différent / mise en page, vous devez écrire un fichier CSS pour pour la première fois à moins que leur est une certaine similitude entre vos mises en page.

  

  
2. et si des changements de conception vient du client à l'avenir.
  

Vous pouvez faire vos sites Web en utilisant modèle de conception MVC, cela va élever beaucoup de changements à la conception de votre site.

  

  
3. Et pourquoi Tableau des mises en page prendront plus de temps toujours à la fois   état
  

Parce que leur balisage est conçu de manière que vous devez écrire plus alors que dans des mises en page div que nous utilisons clair et float principalement qui faire un excellent travail de créer rapidement les mises en page .