Partager:
9 erreurs à ne pas commettre lors de la création d'une page Web
Créer une page Web avec HTML et CSS est assez simple Comment créer un site Web: pour les débutants Comment créer un site Web: pour les débutants aujourd'hui Je vais vous guider tout au long du processus de création d'un site Web complet. Ne vous inquiétez pas si cela semble difficile. Je vous guiderai à travers chaque étape du processus. Lire la suite . Mais il est facile de faire des erreurs et il y a pas mal de choses auxquelles vous pourriez ne pas penser. La plupart du temps, ces petites erreurs ne feront pas beaucoup de différence.
Mais à long terme, ils peuvent vous rendre la vie plus difficile. Ces neuf erreurs sont faciles à commettre, mais si vous les supprimez plus tôt que plus tard, votre page paraîtra mieux, sera plus facile à gérer et fonctionnera comme vous le souhaitez..
1. Style en ligne
L’un des avantages des langages HTML et CSS est que vous pouvez formater n’importe quelle ligne de texte - n’importe quel mot, en réalité - quand vous le souhaitez. Mais cela ne signifie pas que vous devriez tirer parti de cette capacité.
Voici un exemple de style en ligne que vous pouvez utiliser pour agrandir un paragraphe par rapport aux paragraphes environnants et le mettre en surbrillance dans une couleur différente:
Votre texte ici.
Cela donne au paragraphe un style CSS. Apprenez le HTML et le CSS avec ces didacticiels étape par étape. Apprenez le HTML et le CSS avec ces didacticiels étape par étape. Êtes-vous curieux de connaître HTML, CSS et JavaScript? Si vous pensez avoir le don d'apprendre à créer des sites Web à partir de rien, voici quelques tutoriels étape par étape qui valent le coup d'être essayés. Lire la suite qui se termine par la conclusion du paragraphe. Semble assez efficace, à droite?
Il y a un gros problème avec cela: si vous voulez changer beaucoup de choses sur votre site Web, vous devrez aller à la recherche de chaque style de style en ligne et le changer. Si vous avez 100 paragraphes différents qui ont une taille de texte de 120% et sont bleus, vous devrez les trouver tous et les changer en ce que vous avez décidé de choisir un meilleur format..
Au lieu de cela, utilisez une feuille de style CSS. Voici le style que vous utiliseriez pour le paragraphe ci-dessus:
p.important taille: 120%; Couleur bleue; Maintenant, au lieu d'utiliser le style en ligne, vous pouvez simplement utiliser cette ligne:
Votre texte ici.
Et votre paragraphe sera grand et bleu. Et quand vous apportez un changement au “important” classe dans votre CSS, ils vont tous changer.
2. Tableaux pour la mise en page
Les gens utilisaient régulièrement des tableaux pour formater la mise en page. En utilisant un tableau, vous pouvez organiser les éléments de votre page en colonnes et en lignes, ainsi qu'appliquer différents alignements et styles. Même les tableaux unicellulaires seraient utilisés pour aligner correctement le contenu. Mais cette utilisation des tables est généralement mal vue.
Comme pour les styles en ligne, il est plus facile de gérer les CSS au lieu de tableaux HTML. Encore une fois, si vous souhaitez effectuer des modifications sur des dizaines ou des centaines de pages, il est beaucoup plus facile de modifier votre feuille de style que de parcourir chaque page et d'ajuster les tableaux..
En plus de faciliter la maintenance, la lecture des structures CSS a tendance à être un peu plus facile que la lecture des tableaux HTML. Surtout si vous finissez par imbriquer plusieurs niveaux de tables les uns dans les autres. Il peut ne pas être très facile d’aller et venir entre votre document HTML et votre feuille de style pour voir exactement ce qui se passe, mais le contenu de votre page sera plus clair et plus facile à modifier..
Utiliser des tableaux ici et là pour diviser des pages en colonnes n'est pas un péché mortel. Parfois, c'est plus facile et plus rapide que de jouer avec CSS. Mais si vous créez des tables gigantesques à plusieurs niveaux, vous devriez envisager un reformatage avec CSS..
3. HTML obsolète
Comme toute langue, HTML change régulièrement. Les étiquettes officiellement reconnues changent et certaines deviennent obsolètes. Même si ces balises fonctionnent toujours, il vaut mieux les éviter.
Par exemple, si vous avez l'habitude d'utiliser le tag pour audacieux et le tag pour italique, vous êtes en retard. et (pour “accentuation”) sont maintenant les tags standard.
La plupart des balises déconseillées ont été remplacées par CSS. Vous devrez donc utiliser des styles (de préférence non inline) pour obtenir le même effet. Si vous ne savez pas comment remplacer une balise déconseillée ou si une balise spécifique est encore utilisée, consultez la documentation HTML officielle ou lancez simplement une recherche rapide..
4. JavaScript intégré
Certaines pages Web utilisent JavaScript pour ajouter des fonctionnalités supplémentaires. Développement JavaScript et Web: Utilisation du modèle objet de document Développement JavaScript et Web: Utilisation du modèle objet Document Cet article vous présente le squelette de document avec lequel JavaScript fonctionne. Ayant une connaissance pratique de ce modèle d'objet de document abstrait, vous pouvez écrire du code JavaScript qui fonctionne sur n'importe quelle page Web. Lire la suite . Il peut rendre les pages Web interactives, valider le texte saisi, ajouter des animations, fournir des réponses aux actions de l'utilisateur, etc. En bref, cela peut rendre une page plus utile en fournissant un comportement supplémentaire.
Tout comme CSS, vous pouvez ajouter du code JavaScript intégré à votre code HTML. De même que CSS, cela est généralement déconseillé. En plus d'être potentiellement plus difficile à maintenir, il existe deux autres raisons qui justifient cet avertissement..
Le JavaScript en ligne peut utiliser une plus grande quantité de bande passante qu'un script lié à partir d'un fichier différent. Un processus appelé minification compresse HTML et CSS avant de l'envoyer à un utilisateur, ce qui nécessite moins de bande passante sur les connexions haut débit ou mobiles. JavaScript en ligne, cependant, ne peut pas être minifié. Il ne sera pas non plus mis en cache, alors qu'un fichier JavaScript séparé pouvez être caché.
Toutes ces choses rendent inline JavaScript plus gourmand en bande passante.
Il est également plus difficile de déboguer, car vous pouvez utiliser un validateur JavaScript pour un fichier JavaScript… mais cela ne fonctionnera pas avec le script en ligne. Et, encore une fois, cela rend le HTML plus propre et plus facile à maintenir.
5. Plusieurs balises H1
Les balises de titre sont excellentes. Ils rendent les pages plus faciles à parcourir, peuvent vous donner un coup de pouce pour le référencement et peuvent être utilisés pour souligner certains points..
Mais il y a six niveaux de balises de titre pour une raison. Il ne devrait y avoir qu'un seul tag H1 sur votre page. Et c'est souvent le titre de la page (en particulier sur les blogs et sites similaires). Vous pensez peut-être que le fait de placer un ensemble de mots-clés dans les balises H1 augmentera la probabilité pour Google de les saisir et de classer votre site plus haut dans les résultats..
Mais cela rend réellement votre page plus confuse et difficile à lire. Ce qui annulera tous les avantages SEO que vous pourriez voir de toute façon.
Utilisez H2, H3 et le reste des balises de titre pour mieux décrire votre page. Le niveau de la rubrique devrait donner à votre lecteur une idée de l’importance de la section suivante. Si vous les avez induits en erreur, ils le sauront et ils ne seront pas heureux.
6. Ignorer les modifications d'image
Chaque image peut être donné un “alt” attribut qui affiche une ligne de texte spécifique si l'image ne peut pas être affichée. Cela peut ne pas sembler grave, surtout avec les navigateurs modernes (de bureau et mobiles) pouvant afficher à peu près tout.
Mais ne pas ajouter d'attributs alt est une grave erreur, en particulier à l'ère de la navigation mobile constante. Les connexions mobiles ne sont pas toujours géniales, et si un navigateur ne peut pas charger une image, votre lecteur n’a aucune idée de ce qu’il devrait y voir. Un attribut alt peut résoudre ce problème.
Et si quelqu'un utilise un lecteur d'écran, VoiceOver rend les appareils Apple plus accessibles que jamais VoiceOver rend les appareils Apple plus accessibles que jamais Le président de la Fondation américaine des aveugles estime que "Apple a fait plus pour l'accessibilité que toute autre société à ce jour" - et VoiceOver a joué un grand rôle à cet égard. En savoir plus ou une autre fonctionnalité d'accessibilité, cet attribut alt peut être tout ce qu'ils retirent de l'image.
Bien entendu, il existe également des avantages potentiels en termes de référencement. Les moteurs de recherche peuvent indexer des attributs alt courts et descriptifs. Mais le plus grand avantage ici aide vos lecteurs.
7. Ne pas fermer les balises
Il y a des balises HTML que vous pouvez vous en tirer avec ne pas fermer, comme
et
Tout d’abord, malgré les progrès de la technologie des navigateurs, il est tout à fait possible que le navigateur affiche votre contenu de manière incorrecte si vous n’avez pas fermé vos balises. Et l’application de styles peut produire des résultats imprévisibles, comme le montre robertc, utilisateur de Stack Exchange,.
En résumé, les navigateurs attendent des balises de fermeture. Ils n'en ont absolument pas besoin… mais ils auront certainement intérêt à disposer du code HTML correct lorsqu'ils essaieront d'afficher votre page..
Heureusement, il ne faut pas grand chose pour fermer vos tags, surtout si vous utilisez un bon éditeur HTML.
8. Ne comprenant pas un DOCTYPE
Au début des documents HTML, vous verrez généralement une déclaration DOCTYPE, comme celle-ci:
C'est quelque chose dont on ne parle pas souvent, mais c'est un élément important de votre page. La déclaration DOCTYPE indique au navigateur quel type de HTML vous utilisez. Cela lui permet de rendre le code HTML correctement.
Si vous ignorez la déclaration DOCTYPE, la page sera rendue en “Mode de quirks.” C'est la défense du navigateur moderne contre les pages Web obsolètes. Et cela change la façon dont votre page s'affiche. Un rapide coup d'œil au mode quirks de Firefox montre que les modifications de la casse, les propriétés des polices ne sont pas héritées des tableaux, les tailles de police sont calculées différemment et les images sans attributs alt s'affichent parfois de manière incorrecte..
La plupart de ces choses sont relativement mineures. Mais si vous souhaitez que votre page s'affiche correctement, vous devez vous assurer que le mode Standard complet est activé pour un navigateur..
Et pour ce faire, vous avez besoin d'un DOCTYPE. (Si vous ne savez pas quoi utiliser, utilisez simplement .)
9. Balise de schéma de négligence
Le balisage de schéma aide les moteurs de recherche à avoir une meilleure idée du contenu de votre page. Plus précisément, ce balisage indique aux moteurs de recherche ce que vous écrivez dans chaque section..
Par exemple, dans un article, vous pouvez utiliser le balisage de schéma pour indiquer à un moteur de recherche le titre, l'auteur, la date, l'éditeur et d'autres informations utiles sur un article..
Il existe des schémas pour des films, des livres, des organisations, des personnes, des restaurants, des produits, des lieux, des actions, différents types de données, de la musique, des sculptures, des réservations, des services, des guichets automatiques, des brasseries et à peu près tout ce que vous pouvez penser. C'est assez incroyable.
Vous pouvez certainement vous en sortir sans utiliser le balisage de schéma. Votre page s'affichera correctement sans elle. Vos lecteurs ne sauront même pas que c'est là. Mais il y a beaucoup à gagner à inclure ce balisage. Les moteurs de recherche pourront fournir des informations bien plus détaillées et utiles sur votre page, y compris des extraits enrichis..
Et avec l'outil de balisage de schéma de Google, le processus est en fait assez facile.
Habituez-vous aux meilleures pratiques HTML
Faire de ces meilleures pratiques une habitude peut prendre un certain temps. Et parfois, vous avez l’impression que vous prenez beaucoup de temps supplémentaire pour quelque chose qui ne vous rapporte pas beaucoup. Mais en vous assurant que votre HTML et CSS Apprendre le HTML et le CSS avec ces didacticiels étape par étape Apprendre le HTML et le CSS avec ces didacticiels étape par étape Vous êtes curieux du HTML, du CSS et de JavaScript? Si vous pensez avoir le don d'apprendre à créer des sites Web à partir de rien, voici quelques tutoriels étape par étape qui valent le coup d'être essayés. Lire la suite sont bien présentés, faciles à utiliser et maintenables, ce qui vous fera gagner beaucoup de temps à long terme.
Quelles autres bonnes habitudes avez-vous trouvées utiles lors de la création de pages Web? Êtes-vous en désaccord avec l'une des pratiques ci-dessus? Partagez votre opinion dans les commentaires ci-dessous!