Faites attention à l'application des balises HTML dans la production de pages Web_HTML/Xhtml_Production de pages Web

HTML a tenté de supprimer la présentation et d'évoluer vers le contenu, conduisant à la justification de séparer la signification du contenu (HTML) de la présentation (CSS). Cela rendra les pages Web plus minces car un ensemble d'instructions de présentation (sous la forme de documents CSS externes) peut être appliqué à plusieurs pages. Cela facilitera également la gestion du site puisque des changements globaux pourront être effectués en modifiant un seul fichier.
Certaines balises incorrectes sont essentiellement des balises de présentation (telles que small) qui peuvent être remplacées par des règles CSS plus significatives et plus simples. D'autres ne sont pas uniquement destinés à la présentation, mais sont inutilement volumineux (comme la balise font) ou désagréables au détriment de la convivialité (comme la balise blink). Étiquette
Voici les balises que vous pouvez rencontrer fréquemment et qui peuvent offrir de meilleurs choix : b peut être utilisé pour produire des éléments audacieux. Il est plus logique d'utiliser strong (ce qui signifie une forte emphase) à la place, ou d'utiliser CSS pour faire le travail et d'ajouter la règle font-weight: bold pour indiquer les éléments en gras. i peut être utilisé pour générer des éléments en italique. Utilisez em (pour souligner), ce qui a également plus de sens. Ou vous pouvez utiliser CSS pour exprimer l'italique : font-style: italic big peut produire une taille de police plus grande. Utilisez plutôt un titre (tel que h1, h2, etc., lorsque le texte est déjà un titre), qui ajoute du sens, ou utilisez simplement l'attribut font-size en CSS pour obtenir plus de contrôle. small peut produire de petites polices. CSS (font-size) prend à nouveau plus de contrôle. hr peut être utilisé pour afficher une ligne horizontale. Il est rare d'utiliser hr pour concevoir en CSS. Les attributs border-top, border-bottom de CSS ou les images simples le feront mieux.
Bien que les balises ci-dessus soient compatibles avec les dernières normes HTML, elles n'ont aucune signification pour le contenu que devraient avoir de bonnes balises. Ils pourraient être plus utiles, mais ils ne sont pas particulièrement nocifs et pourraient facilement être confondus avec d'innocentes pépites de beurre qui ne fondraient pas dans la bouche et qui ne fondraient pas dans la bouche lorsqu'elles se tenaient à côté des étiquettes sales suivantes. u peut générer un soulignement pour les éléments. Cela vous rappelle que le texte souligné a de nombreux liens. C'est pourquoi cette balise est morte depuis longtemps : vous n'êtes pas obligé de souligner le texte non connecté. center peut être utilisé pour centrer des éléments à l'intérieur d'éléments. La propriété CSS text-align autorise non seulement center, mais aussi left, right et justify. menu est utilisé pour créer des listes de menus. Ce n'est pas aussi parfait que ul, car les listes non ordonnées sont plus polyvalentes et ul figure en bonne place dans le cadavre du menu. Les éléments layer et div sont similaires dans le sens où ils sont positionnés en haut du CSS. Cela ne fonctionne que dans les anciennes versions de Netscape, donc ce n'est plus utile. blink ou marquee. Dites non à haute voix ! On devrait s’attendre à ce qu’ils soient tels, mais ils bénéficient d’un soutien très limité et ne feront que des blagues très, très malsaines. font, qui peut être utilisé pour définir le nom de la police, la taille et la couleur d'un élément, a mérité à juste titre le titre de tristement célèbre roi des tags dans le monde des tags. Les anciens sites Web (et même les nouveaux) envahissent les pages comme une épidémie mondiale de fourmis. La majeure partie de la prolifération des balises font provient du logiciel de création Web , qui utilise la balise font incluant la couleur et la taille sur chaque élément. La balise font est abusée pour apparaître sur chaque élément répétitif (c'est-à-dire chaque fois que vous utilisez un élément p), alors qu'avec CSS, vous pouvez appliquer des éléments répétitifs avec un code court, ou même contrôler l'ensemble du site Web. Grâce à la méthode CSS, non seulement la page peut être plus finefont qu'un parasité par un grand nombre de balises , mais elle est aussi plus facile à maintenir car il suffit de changer le line dans le fichier CSS, au lieu de modifier chaque balise font une par une. Cela augmente également la probabilité de maintenir un site Web avec une conception cohérente dans son ensemble. Les balises font et l'utilisation inappropriée des tableaux sont deux causes majeures de gonflement inutile. propriété
Peut-être pensez-vous que vous utilisez de bonnes étiquettes, mais il existe encore des attributs parasites gênants qui peuvent apparaître à tout moment. name est utilisé pour spécifier un nom pour un élément. Il est entièrement accepté dans les éléments de formulaire tels que input, mais ailleurs, le travail de name a été remplacé par l'attribut id. . text et bgcolor peuvent définir la couleur de base du texte et la couleur d'arrière-plan de la page dans la balise de début body. Les propriétés CSS color et background-color le font également lorsqu'elles sont appliquées au sélecteur body. backgroundVous pouvez spécifier une image d'arrière-plan dans la balise body. CSS fera un meilleur travail en utilisant des propriétés telles que background-image pour gérer les images d'arrière-plan. link, alink, vlink sont utilisés dans la balise body pour préciser la connexion (non visitée, activée et visitée). Les bébés CSS─:link, :active et :visited feront le travail. align peut être utilisé pour aligner le contenu d'un élément (comme <div align="center">Stuff</div>), mais, comme la balise center<code>center, la propriété text-align<code>text-align de CSS est le nouveau patron. target<code>target peut ouvrir une connexion de différentes manières, la plus couramment utilisée est d'ouvrir une nouvelle fenêtre (comme <a href="wherever.html" target="_blank ">Aidez-moi</a><code><a href="wherever.html" target="_blank">Help me</a>). Cela a l'air génial, mais vous ne faites pas cela sur votre site Web. Les utilisateurs ne s'attendent pas à ce que quelque chose de magique (comme une nouvelle fenêtre) apparaisse, et l'outil de navigation le plus courant est le bouton Précédent du navigateur, qui n'est pas disponible si vous ouvrez une nouvelle fenêtre. C’est illégal et pas facile à utiliser. Avis
conserve les propriétés de présentation des balises telles que width<code>width et height<code>height pour les images, et cellpadding<code>cellpadding et cellspacing<code>cellspacing pour les tableaux, car celles-ci les éléments utilisent souvent des valeurs différentes. Ce n'est pas une solution parfaite, mais si votre page Web contient beaucoup d'images et de tableaux, vous n'avez pas d'autre choix judicieux que de les utiliser.
L'attribut de performance le plus déroutant est la balise textarea<code>textarea, qui n'a que deux attributs légaux, cols<code>cols et rows<code>rows, dans la dernière version HTML. nécessaire. Bonne étiquette, mauvaise utilisation
Pour entrer dans votre chambre, vous vous penchez par un trou pour chien, mais attendez, il y a une porte pour les humains avec une poignée ! Wow, regardez – juste ce qu'il faut pour entrer.
Utilisez les balises HTML (bonnes balises), croyez-le ou non (croyez-le !), il y a une bonne raison : vous les utilisez avec une bonne prémisse, et vous obtiendrez un meilleur résultat.
La page Web elle-même est plus facile à utiliser que la syntaxe et la sémantique des balises HTML pour les utilisateurs. Les lecteurs d'écran rencontrent souvent une balise ul<code>ul ou ont h1<code>h1 ou h2<code>h2. Mettez-les en surbrillance lorsque vous utilisez des balises de titre.
Le plus abusé dans le monde des balises HTML est le tableau. Les tableaux sont souvent utilisés pour la mise en page, mais ils ne doivent être utilisés que pour afficher des données tabulaires, comme ils ont été conçus pour cela. La méthode de mise en page sans tableaux n'est pas une sorte de quête zen de l'illumination. Elle réduit non seulement considérablement le poids de la page Web, mais facilite également sa maintenance et sa refonte. Avis
Parfois, les concepteurs utilisent également les balises et les attributs mentionnés ici (en particulier en utilisant des tableaux pour la mise en page) pour créer des conceptions de transition qui peuvent fonctionner dans les anciennes versions des navigateurs (en particulier Netscape 4), et qui fonctionnent également sur. navigateurs modernes. Les tableaux permettent un meilleur contrôle de la présentation sur Netscape 4 où CSS est incompétent. Malheureusement, ces utilisateurs sont rares, tandis que le nombre d’utilisateurs d’appareils mobiles qui dénoncent les défauts de la disposition des tableaux augmente. La conception sans table décrite ci-dessus évite ces défauts et, malgré quelques légers changements de performances pour un petit sous-ensemble d'utilisateurs, reste entièrement fonctionnelle dans tous navigateurs. cadre
Boucle d'Or pense qu'une tasse de céréales serait une bonne idée, mais trois énormes mammifères carnivores apparaissent soudainement et la jettent par la fenêtre. Le cadre est la tasse de céréales. Ils peuvent sembler en bonne santé, mais ils ont atteint le stade en voie de disparition et vont bientôt disparaître.
La plupart des sites Web n'utilisent pas de cadres et les utilisateurs ordinaires traiteront un document comme une page.
Dans certains cas, par exemple, vous souhaitez empêcher les utilisateurs d'ajouter des pages Web spécifiques aux favoris, ou vous souhaitez que les utilisateurs recommandent des pages Web spécifiques à l'aide d'un logiciel de courrier électronique ou de messagerie instantanée, ou vous souhaitez rendre l'ensemble du site Web très compliqué, ce qui rend difficile pour les utilisateurs de se déplacer fréquemment entre les cadres, ou si vous voulez confondre les moteurs de recherche, cela suffit, utilisez des cadres !
En bref, les frameworks augmentent la complexité et perdent en convivialité. Avis
Tant que vous suivez les règles suivantes, vous ne ferez jamais d'erreur :
1) N'utilisez pas de balise ou d'attribut même s'il ne correspond que légèrement aux performances. C'est une chose CSS. Et CSS le fait mieux.
2) Utiliser la balise dans le but suggéré par son nom. Les balises de tableau sont utilisées sur les données tabulaires. Les balises de titre sont utilisées sur les titres. Attends, attends.
3) Utilisez des balises appropriées pour un contenu spécifique. Utilisez list<code>list pour les listes, hx (x = 1 - 7) pour les titres, etc.

Lecture approfondie Principes essentiels des normes du Guide avancé du HTML : rompez avec les mauvaises habitudes et passez aux normes – Compatibilité XHMTL