Pourquoi la balise <center> est-elle déconseillée en HTML?
Je suis simplement curieux de savoir pourquoi la balise <center> En HTML est déconseillée.
Le <center> Était un moyen simple d'aligner rapidement des blocs de texte et d'images en encapsulant le conteneur dans une balise <center>, Et je ne peux vraiment pas trouver de méthode plus simple pour le faire maintenant.
Quelqu'un sait-il de manière simple comment centrer les "choses" (pas les choses margin-left:auto; margin-right:auto; Et width), quelque chose qui remplace <center>? Et aussi, pourquoi était-il déconseillé?
Le <center> L'élément est déconseillé car il définit la présentation de son contenu - il ne décrit pas son contenu.
Une méthode de centrage consiste à définir le margin-left et margin-right propriétés de l’élément sur auto, puis définissez le text-align propriété à center. Cela garantit que l'élément sera centré dans tous les navigateurs modernes.
HTML vise à fournir structure et signification au contenu, ce qui devrait être son nique fonction.
Cependant, il existe des balises assorties qui ont été ajoutées dans le passé par des développeurs de navigateur stupides, qui violent ce principe de base.
À un moment donné, les gens ont repris leurs esprits (partiellement, au moins) et ont commencé (en essayant de s'entendre) sur une spécification permettant d'écrire du code HTML correct. Ils ont donc déconseillé d'utiliser certaines de ces balises.
Cependant, le mal est déjà fait - trop de gens ont appris le HTML comme "mettre des balises entre choses", plutôt que de comprendre la distinction (importante et utile) entre la sémantique et la présentation, et ces personnes ont continué à écrire des livres et tutoriel, enseignant aux autres la mauvaise façon d’écrire HTML, qui ont eux-mêmes fait de même, et nous nous sommes retrouvés avec le bon vieux désordre.
Idéalement, la balise center n'aurait jamais dû exister, car les utilisateurs auraient dû préciser que ce n'était pas du vrai HTML et demander aux fabricants de navigateur de revenir en arrière et de le faire correctement.
Et pour le faire correctement ... l'alignement est bien sûr un problème de présentation - appliquer mise en forme et formatage au contenu (structuré) - et le langage à utiliser pour cela est CSS .
Cependant, encore une fois, de stupides développeurs de navigateurs ont gâché les premiers CSS - et dans bien des cas, les personnes créant des pages Web devaient utiliser un code HTML incorrect, car les CSS ne fonctionnaient tout simplement pas.
Ces jours-ci, nous commençons à ajouter des fonctionnalités utiles au CSS, mais il reste encore beaucoup de choses qui ne sont pas implémentées, et pas mal de choses cela aurait pu être mis en œuvre de manière bien supérieure, mais ils sont maintenant normalisés, nous restons donc fidèles aux anciennes méthodes.
Si les feuilles de style avaient été implémentées par des personnes sensées, vous auriez tous les contrôles de n'importe quel logiciel de bureau décent - pour aligner les blocs et le texte, cela fonctionnerait horizontalement, verticalement, à l'envers, en rotation, etc. ne serait pas fait de la façon stupide de régler les marges gauche/droite sur auto.
J'ajouterai rapidement, par souci d'exhaustivité, le troisième 'niveau' des pages Web, qui traite de l'ajout de interactivité à une page par ailleurs statique, qui est bien sûr la ) JavaScript.
Encore une fois, ces stupides développeurs de navigateurs ne savaient pas ce qu’ils faisaient. Ils ont choisi un nom totalement inexact/invalide (pour des raisons marketing) et ont à nouveau criblé un langage potentiellement génial et puissant avec des défauts, un manque de fonctionnalités et ont créé quelque chose qui était (jusqu'à récemment) détesté par de nombreuses personnes.
Bien entendu, ces dernières années, nous avons assisté à un grand soulèvement de bibliothèques JavaScript, qui ont permis de montrer certaines des fonctionnalités intéressantes dont JS est capable depuis des années, dissimulant nombre des failles du navigateur qui subsistent dans les navigateurs. partiellement aidé à corriger le support CSS, donc c'est un peu plus utile (il manque encore beaucoup de choses).
Donc oui, pour résumer tout cela, la réponse ultime est que les fabricants de navigateurs étaient stupides. :)
Ce que je fais, c'est prendre des tâches courantes comme centrer ou flotter et en faire des classes CSS. Quand je le fais, je peux les utiliser dans n’importe quelle page. Je peux aussi appeler autant que je veux sur le même élément.
.text_center {text-align: center;}
.center {margin: auto 0px;}
.float_left {float: left;}
Maintenant, je peux les utiliser dans mon code HTML pour effectuer des tâches simples.
<p class="text_center">Some Text</p>
Selon W3Schools.com ,
L'élément central était obsolète en HTML 4.01 et n'est pas pris en charge dans la DTD XHTML 1.0 Strict.
Le HTML 4.01 spec donne la raison pour laquelle la balise est déconseillée:
L'élément CENTER équivaut exactement à spécifier l'élément DIV avec l'attribut align défini sur "center".
Vous pouvez toujours l'utiliser avec XHTML 1.0 Transitional et HTML 4.01 Transitional si vous le souhaitez. La seule autre manière (la meilleure façon, à mon avis) est avec des marges:
<div style="width:200px;margin:auto;">
<p>Hello World</p>
</div>
Votre code HTML doit définir l'élément et non pas régir sa présentation.
J'utilise encore parfois la balise <center> car rien dans CSS ne fonctionne aussi bien. Exemples d'utilisation d'une astuce <div> et d'échec:
<div style="text-align: center;">This div is centered, but it's a simple example.</div>
<br />
<div style="text-align: center;"><table border="1"><tr><td><div style="text-align: center;"> didn't center correctly.</td></tr></table></div>
<br />
<div style="text-align: center;margin-left:auto;margin-right:auto"><table border="1"><tr><td><div style="text-align: center;margin-left:auto;margin-right:auto"> still didn't center either</td></tr></table></div>
<br />
<center><table border="1"><tr><td>Actually Centered with <center> tag</td></tr></table></center><centre> obtient des résultats. Pour utiliser CSS à la place, vous devez parfois placer CSS à plusieurs endroits et le modifier pour le centrer correctement. Pour répondre à ta question, Le CSS est devenu une religion avec des croyants et des adeptes qui ont fui le <centre> <b> <i> <u> comme un blasphème, un impie et beaucoup trop simple pour la sécurité de leur travail. Et s'ils essaient de vous prendre votre <table>, demandez-leur quel est l'équivalent CSS de l'attribut colspan ou rowspan.
Ce n'est pas la vérité abstraite ou livresque, mais la vérité vécue qui compte.
- Zen
Il est prévu que le balisage, c'est-à-dire les balises HTML, représente le sens et la structure, pas l'apparence. Les premières versions du langage HTML étaient très confuses, mais les normes que les gens essaient de nettoyer maintenant.
Un problème avec le contrôle de l'apparence des balises est que vos pages ne sont pas lisibles avec des appareils pour handicapés, tels que des lecteurs d'écran. Cela conduit également à avoir beaucoup de balises dans votre texte qui n'aident pas à clarifier le sens, mais l'encombrent d'informations de niveau différent.
CSS a donc été pensé pour déplacer le formatage/l'affichage dans une langue différente, séparée du texte et pouvant être conservée facilement. Entre autres choses, cela permet aux feuilles de style de changer l’apparence d’une page Web sans toucher l’autre balisage. Et être capable de faire cela pendant des tas de pages en une fois.
Les outils que CSS vous donne pour ce faire ne sont pas toujours élégants, je suis de votre côté là-bas. Par exemple, il n’existe aucun moyen de réaliser un centrage vertical efficace. Et centrage horizontal, s’il ne s’agit pas que du texte susceptible d’être traité par text-align, n'est pas beaucoup mieux.
Vous avez le choix de faire facile, efficace et confus ou propre, élégant et encombrant. Je ne comprends pas pourquoi les développeurs Web supportent ce gâchis, mais je suppose qu'ils sont contents d'avoir au moins une chance de finir.
HTML est destiné à la structuration des données, pas au contrôle de la mise en page. CSS est destiné à contrôler la mise en page. Vous constaterez également que de nombreux designers désapprouvent l'utilisation de <table> pour les mises en page pour cette même raison.
Pour le texte et les images, vous pouvez utiliser text-align:
<div style="text-align: center;">
I'm centered.
</div>
Matière à réflexion: que ferait un synthétiseur texte-parole avec <center>?
CSS a un text-align: center propriété, et puisque c'est purement visuel, pas sémantique, il devrait être relégué en CSS, pas HTML.
Il est déconseillé avec d’autres balises telles que <font> comme élément de style. Il ne définit pas ce qu'est un élément, mais modifie son apparence. Le W3C voulait que les éléments HTML5 ne définissent que les éléments et supprime tous les éléments de style, de sorte que tout le style se fasse dans le CSS ou <style> de la page.
Une solution rapide:
<style>
.element {
position: relative;
left: 50%;
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
transform: translateX(-50%);
}
</style>
Les balises de centre IMO fonctionnent parfaitement bien pour certaines choses et ont fonctionné dès la naissance du HTML et continueront à fonctionner pendant de nombreuses années.
Bien sûr, il existe d’autres moyens de centrer la plupart d’entre eux qui ne fonctionnent pas aussi bien qu’un tag central. Il convient également de noter que lorsque vous centrez quelque chose dans une balise centrale, tout ce qui se trouve en dehors de la balise centrale a un saut de ligne avant et après dans la plupart des cas.
Si vous mettez à jour un ancien site Web comportant une balise center, la solution ci-dessous risque de ne pas fonctionner dans de nombreux cas.
la méthode de centrage consiste à définir les propriétés margin-left et margin-right de l'élément sur auto, puis à définir la propriété text-align de l'élément parent sur center.
La méthode ci-dessous vous donnera l'équivalent exact pour tag:
.center{
text-align: center;
display: inherit;
}
.center > div { /* It is the fix if there are any div tag inside center tag */
margin-left: auto;
margin-right: auto;
}<span class="center">
Content
</span>texte fort