L'utilisation de beaucoup de balises Div est-elle vraiment si mauvaise?

Notre dernier livre - celui avec le titre controversé - a provoqué beaucoup de débats et plus de réactions instinctives qu'un seau de grenouilles dans une danse de grange. Un commentaire que j'ai vu publié fréquemment est que «remplacer les balises de table par des divs qui s'affichent comme des tables n'est pas différente; Vous pouvez aussi bien utiliser des tables. » L'argument est intéressant car il semble que le commentateur implique que la seule raison de ne pas utiliser les balises de table est le nombre de balises impliquées.

Je vais coller mon cou et dire oui, même si vous remplacez simplement toutes vos balises Table, TR et TD par des balises div qui s'affichent comme ces éléments de table, c'est mieux que d'utiliser des tables HTML pour la mise en page.

Personne n'est affecté négativement par la surutilisation des étiquettes DIV structurelles. On ne peut pas en dire autant de l'utilisation des tables HTML pour la mise en page.

Une page Web qui utilise des tables imbriquées pour la mise en page sera difficile à imprimer, difficile à afficher sur un appareil mobile et difficile à naviguer pour les utilisateurs de lecteurs d'écran. Une application de lecteur d'écran trébuchera souvent sur les tables HTML imbriquées, annonçant quelque chose comme «Table avec 5 lignes et 2 colonnes» car il entre dans le contenu de la table et «Table End» au fur et à mesure de son départ. La même page Web utilisant des éléments de div imbriqués peut être conçu pour s'empiler proprement pour l'impression et la visualisation sur un appareil mobile, et les lecteurs d'écran ignorent les éléments div.

En utilisant des tables HTML, vous impliquez que le contenu de chaque cellule est lié au contenu des autres cellules en 2 dimensions: dans la même ligne et dans la même colonne. D'un autre côté, une div n'implique pas une telle relation avec d'autres éléments de div. C'est simplement un échafaudage de contenu, et aucun sens n'est dérivé de leur utilisation.

ok, remplacer aveuglément toutes les balises liées à la table par des éléments Div n'est peut-être pas la bonne approche du problème, mais dire qu'il est «tout aussi mauvais» que l'utilisation de tables HTML pour la mise en page est erronée. HTML 4.01 définit la div comme un «conteneur de langue / style générique» ou plus spécifiquement:

Les éléments Div et Span, en conjonction avec l'ID et les attributs de classe, offrent un mécanisme générique pour ajouter de la structure aux documents. Ces éléments définissent le contenu pour être en ligne (SPAN) ou au niveau du bloc (DIV) mais n'imposent aucun autre idiome de présentation au contenu. Ainsi, les auteurs peuvent utiliser ces éléments en conjonction avec des feuilles de style, l'attribut Lang, etc., pour adapter le HTML à leurs propres besoins et goûts.

afin que nous puissions utiliser des éléments div pour définir des blocs de contenu; On dirait que l'utilisation des éléments de div imbriqués pour structurer le contenu est parfaitement valide. Tant que vous n'utilisez pas les éléments div à la place de ceux plus appropriés comme les titres, les paragraphes, les blocs, les listes et bien sûr, les tables pour les données tabulaires, vous vous débrouillez bien.

L'approche que vous adoptez lors de la création d'une mise en page à l'aide d'éléments de table HTML est de verrouiller d'abord la mise en page en HTML avant de styliser votre page Web. C'est faux et vole face aux meilleures pratiques établies: séparez votre présentation de votre contenu.

Ceci est complètement différent de l'approche de disposition CSS, même lors de l'utilisation de nombreux éléments div. Par exemple, je pourrais envelopper tout le contenu qui représente la marque de site dans une balise Div, et tout le contenu qui représente des informations supplémentaires sur le site dans une autre balise DIV. Le fait que, dans CSS, je puisse appliquer un style qui place la marque du site en haut de la page Web et les informations supplémentaires du site en bas, n'est pas encore importante. Au stade de la disposition, je pourrais le faire, ou je peux utiliser les valeurs d'affichage liées au tableau CSS pour les transformer en colonnes ou lignes. Le balisage peut être stylé de plusieurs manières car l'approche ne verrouille pas la mise en page dans le balisage HTML.

Questions fréquemment posées (FAQ) sur les balises Div dans HTML

Quel est le but principal de l'utilisation des balises Div dans HTML?

La balise DIV dans HTML est une unité de conteneur qui résume d'autres éléments de page et divise le document HTML en sections. Les développeurs Web utilisent des balises Div pour regrouper les éléments HTML et appliquer les styles CSS à de nombreux éléments à la fois. C'est une façon d'organiser du contenu et de fournir une structure à votre disposition Web.

Y a-t-il des alternatives à l'utilisation de balises div?

Oui, il existe des alternatives à l'utilisation de balises div. HTML5 a introduit de nouveaux éléments sémantiques qui peuvent être utilisés à la place des balises DIV, telles que

,,

,

,

, et. Ces balises fournissent plus d'informations sur le type de contenu contenu en eux, ce qui rend le code plus facile à lire et à comprendre.

Comment puis-je styliser une balise DIV en utilisant CSS?

Vous pouvez styliser une balise DIV dans CSS en utilisant la balise Div comme sélection. Par exemple, si vous souhaitez définir la couleur d'arrière-plan d'un Div sur Red, vous écririez le code suivant:

div {
Background-Color: Red;
}

Puis-je nidifier les balises div dans les autres. Cela est souvent fait pour créer des dispositions complexes. Lorsque vous nichez une div, cela devient un enfant du parent div. L'enfant Div peut ensuite être stylé indépendamment du parent.

Est-il mauvais d'utiliser trop de balises div?

L'utilisation de trop de balises div peut rendre votre document HTML encombré et difficile à lire. Il peut également affecter les performances de votre site Web, car chaque balise Div ajoute au nombre d'éléments que le navigateur doit traiter. Il est préférable d'utiliser des balises div avec parcimonie et seulement si nécessaire.

En quoi une balise div diffère-t-elle d'une balise Span?

La principale différence entre une balise DIV et une balise SPAN est la façon dont ils gèrent le contenu. Une balise Div crée un élément au niveau du bloc, ce qui signifie qu'il commencera sur une nouvelle ligne et prendra la largeur complète disponible. Une étiquette de span, en revanche, crée un élément en ligne qui ne prend autant de largeur que nécessaire.

Les balises div affectent-elles le référencement?

Alors que les balises div elles-mêmes n'ont pas directement affectent le référencement, la façon dont ils sont utilisés peuvent. Si les balises Div sont utilisées pour créer une disposition propre et bien structurée, elle peut rendre le contenu plus accessible et lisible pour les bots de moteur de recherche, améliorant potentiellement le référencement

Qu'est-ce qu'une classe ou un ID dans une balise div?

Une classe ou une ID dans une balise div est utilisée pour identifier cette div spécifique. Cela peut être utile pour appliquer des styles CSS ou des fonctions JavaScript. Un ID est unique et ne peut être utilisé qu'une fois par page, tandis qu'une classe peut être utilisée plusieurs fois.

Puis-je utiliser des balises Div dans des e-mails HTML?

Oui, vous pouvez utiliser des balises Div dans des e-mails HTML. Cependant, certains clients de messagerie ne prennent pas en charge toutes les propriétés CSS sur les balises DIV, il est donc préférable de tester votre e-mail dans plusieurs clients pour s'assurer qu'il s'affiche correctement.

Comment puis-je centrer le contenu dans une balise div?

Pour centrer le contenu dans une balise DIV, vous pouvez utiliser CSS. Si vous centrez du texte, vous pouvez utiliser la propriété Text-Align. Si vous centrez un élément de niveau bloc, vous pouvez utiliser la propriété de marge. Voici un exemple:

div {
text-align: Center;
}

ou

div {
marge: auto;
}

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!