Dans les tutoriels précédents de Script House, nous avons souligné à plusieurs reprises la sémantique des fichiers HTML des pages Web. Nous devons choisir les balises HTML ou XHTML les plus appropriées en fonction de la structure du document HTML de la page Web, plutôt que de les sélectionner en fonction de leur apparence. Utilisez la balise P pour définir un paragraphe plutôt que de l'utiliser pour obtenir un effet de saut de ligne. Nous utilisons les balises h1-h6 pour marquer les titres, plutôt que de les utiliser pour obtenir une taille de texte et des effets gras.
Par exemple, un titre, on peut utiliser h1 pour le définir :
Le texte du titre de l'article est écrit ici
plutôt que d'utiliser une autre manière de le définir :
Le texte du titre de l'article est écrit ici
Dans l'article précédent de Script House, nous avons répertorié toutes les balises autorisées par XHTML1.0. Nous pouvons également constater qu'il y a en fait très peu de balises d'éléments que nous pouvons choisir. Mais nous réalisons aussi clairement que ces marques d’éléments raffinés ont également des significations plus claires. Si vous ne trouvez vraiment pas le bon élément à baliser, vous pouvez utiliser les balises génériques div et span.
L'utilisation des balises div et span sur la page est un nouveau problème, et nous avons tendance à trop les utiliser. L'utilisation nécessaire et raisonnable des divs peut améliorer considérablement la structure du document. Si vous regardez votre document HTML et constatez qu'il y a beaucoup de divs et de spans, alors vous devez examiner le problème sous un angle différent. Y a-t-il un abus ? Existe-t-il de meilleurs marqueurs pour les remplacer ? Si h1 peut mieux représenter le contenu marqué, alors vous devez abandonner p ou span pour le définir.
C'est peut-être une contradiction et il nous est difficile de comprendre comment les utiliser correctement, ou peut-être que nous ne pouvons pas du tout obtenir de réponse claire. Mais une chose doit être clarifiée : nous devons donner au document une structure logique claire et faciliter l'application des styles. Nous pouvons considérer div comme simplement un conteneur, ou une « partie » du document. Nous utilisons trop de conteneurs, ce qui n’est pas une bonne idée. Et un conteneur parfaitement adapté et dans une position raisonnable peut donner l’impression que l’ensemble du document est organisé.
Le code suivant est plus raisonnable et efficace :