Dans les tutoriels précédents sur le Web Page Teaching Network, il a été souligné à plusieurs reprises de rendre les fichiers HTML des pages Web sémantiques. 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, pour un titre, on peut utiliser h1 pour le définir :
<h1>Écrivez ici le texte du titre de l'article</h1>
Au lieu de le définir autrement :
<p style="font-size:16px; font-weight:bold;">Écrivez le texte du titre de l'article ici</p>
Dans des articles précédents sur le Web Teaching Network, nous avons répertorié toutes les balises autorisées par XHTML1.0. Nous pouvons également constater qu'il existe en réalité 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 dans les pages 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.
Il s’agit peut-être de deux contradictions 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 :
| Voici le contenu cité : <div id="en-tête"> |