30 meilleures pratiques HTML pour les débutants

L'aspect le plus difficile de l'exécution de Nettuts + est la comptabilisation de nombreux niveaux de compétences. Si nous publions trop de tutoriels avancés, notre auditoire débutant n'en tirera aucun avantage. La même chose vaut pour le contraire. Nous faisons de notre mieux, mais n'hésitez pas à vous joindre si vous sentez que vous êtes négligé. Ce site est pour vous, alors parlez-en! Cela dit, le tutoriel d'aujourd'hui s'adresse spécifiquement à ceux qui se plongent dans le développement Web. Si vous avez au moins un an d'expérience, nous espérons que certains des conseils énumérés ci-dessous vous aideront à devenir meilleur, plus rapidement.!

Vous pouvez également consulter certains des générateurs HTML sur Envato Market, tels que le populaire VSBuilder, qui vous permet de générer le code HTML et CSS pour la création automatique de vos sites Web en choisissant des options à partir d'une simple interface..

Ou vous pouvez créer votre site Web à partir de rien par un développeur professionnel sur Envato Studio qui connaît et respecte toutes les meilleures pratiques HTML..

Learn CSS: Le guide complet

Nous avons créé un guide complet pour vous aider à apprendre le CSS, que vous soyez débutant avec les bases ou que vous souhaitiez explorer un CSS plus avancé..

Sans plus attendre, examinons les 30 meilleures pratiques à observer lors de la création de votre marquage..

1: fermez toujours vos tags

À l'époque, il n'était pas rare de voir des choses comme celle-ci:

Du texte ici. 
Un nouveau texte ici. 
Vous avez eu l'idée.

Notez que la balise UL / OL d'emballage a été omise. En outre, beaucoup ont choisi de ne pas utiliser les balises LI fermantes. Selon les normes actuelles, il s'agit tout simplement d'une mauvaise pratique et devrait être évité à 100%. Fermez toujours vos tags. Sinon, vous rencontrerez des problèmes de validation et des problèmes à chaque tournant.

Meilleur

 Du texte ici. 
 Un nouveau texte ici. 
 Vous avez eu l'idée.

2: Déclarer le type de document correct

Quand j'étais plus jeune, j'ai pas mal participé aux forums CSS. Chaque fois qu'un utilisateur rencontrait un problème, avant que nous examinions sa situation, il devait d'abord effectuer deux choses:

Validez le fichier CSS. Corrigez les erreurs nécessaires.
Ajouter un doctype.

"DOCTYPE se place avant la balise HTML d'ouverture en haut de la page et indique au navigateur si la page contient du HTML, du XHTML ou un mélange des deux, afin qu'il puisse interpréter correctement le balisage."

La plupart d'entre nous choisissent entre quatre doctypes différents lors de la création de nouveaux sites Web.

http://www.w3.org/TR/html4/strict.dtd ">
http://www.w3.org/TR/html4/loose.dtd ">
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd ">

Il y a actuellement un grand débat sur le bon choix ici. À un moment donné, l'utilisation de la version XHTML Strict était considérée comme la meilleure pratique. Cependant, après quelques recherches, on s’aperçut que la plupart des navigateurs revenaient au format HTML normal lorsqu’il l’interprétait. Pour cette raison, beaucoup ont choisi HTML 4.01 Strict à la place. L'essentiel, c'est que tout cela vous gardera sous contrôle. Faites des recherches et faites votre propre idée.

3: n'utilisez jamais de styles en ligne

Lorsque vous travaillez fort sur votre balisage, il peut parfois être tentant de choisir la voie la plus facile et de vous faufiler un peu avec le style..

Je vais rendre ce texte rouge afin qu'il se démarque vraiment et fasse prendre conscience des gens!

Bien sûr, cela semble assez inoffensif. Cependant, cela indique une erreur dans vos pratiques de codage.

Lors de la création de votre balisage, ne pensez même pas encore au style. Vous ne commencez à ajouter des styles qu'une fois la page complètement codée..

C'est comme traverser les ruisseaux dans Ghostbusters. C'est juste pas une bonne idée.
-Chris Coyier (en référence à quelque chose de complètement indépendant.)

Au lieu de cela, finissez votre balisage, puis référencez cette balise P à partir de votre feuille de style externe..

Meilleur

#someElement> p color: red;

4: Placez tous les fichiers CSS externes dans la balise head

Techniquement, vous pouvez placer des feuilles de style où vous voulez. Cependant, la spécification HTML recommande de les placer dans la balise HEAD du document. Le principal avantage est que vos pages vont apparemment se charger plus rapidement.

Lors de nos recherches sur les performances chez Yahoo !, nous avons découvert que le déplacement des feuilles de style dans le document HEAD accélère le chargement des pages. En effet, le fait de placer des feuilles de style dans HEAD permet à la page d’être rendue progressivement..
- ySlow Team

 Mes genres de maïs préférés

5: Pensez à placer des fichiers Javascript en bas

N'oubliez pas que l'objectif principal est de faire en sorte que la page se charge le plus rapidement possible pour l'utilisateur. Lors du chargement d'un script, le navigateur ne peut pas continuer tant que tout le fichier n'a pas été chargé. Ainsi, l'utilisateur devra attendre plus longtemps avant de constater des progrès..

Si vous avez des fichiers JS dont le seul but est d'ajouter des fonctionnalités - par exemple, après avoir cliqué sur un bouton - continuez et placez ces fichiers en bas, juste avant la balise body de fermeture. C'est absolument une bonne pratique.

Meilleur

Et maintenant vous connaissez mes types de maïs préférés.

6: ne jamais utiliser le Javascript en ligne. Ce n'est pas 1996!

Il y a quelques années, une autre pratique courante consistait à placer les commandes JS directement dans les balises. C'était très courant avec les simples galeries d'images. Essentiellement, un attribut "onclick" a été ajouté à la balise. La valeur serait alors égale à une procédure JS. Inutile de dire que vous ne devriez jamais, jamais faire cela. Transférez plutôt ce code dans un fichier JS externe et utilisez "addEventListener / attachEvent" pour "écouter" l'événement que vous souhaitez. Ou, si vous utilisez un framework tel que jQuery, utilisez simplement la méthode "click".

$ ('a # moreCornInfoLink'). click (function () alert ('Vous voulez en savoir plus sur le maïs?'););

7: Valider en continu

J'ai récemment blogué sur le fait que l'idée de validation avait été complètement mal interprétée par ceux qui n'en comprenaient pas complètement le but. Comme je le mentionne dans l'article, "la validation devrait fonctionner pour vous, pas contre."

Toutefois, en particulier lors de la première utilisation, je vous recommande vivement de télécharger la barre d’outils Web Developer et d’utiliser les options "Valider HTML" et "Valider CSS" de manière continue. Bien que CSS soit un langage assez facile à apprendre, il peut également vous faire arracher les cheveux. Comme vous le constaterez souvent, c'est votre balisage minable qui est à l'origine de cet étrange problème d'espace blanc sur la page. Valider, valider, valider.

8: Télécharger Firebug

Je ne peux pas assez le recommander. Firebug est sans aucun doute le meilleur plugin que vous utiliserez pour créer des sites Web. Non seulement il fournit un débogage Javascript incroyable, mais vous apprendrez également à identifier les éléments qui héritent de ce remplissage supplémentaire que vous ignoriez. Télécharge le!

9: Utilisez Firebug!

D'après mon expérience, de nombreux utilisateurs ne profitent que d'environ 20% des capacités de Firebug. Vous vous rendez vraiment un mauvais service. Prenez quelques heures et parcourez le Web pour trouver tous les didacticiels utiles que vous pouvez trouver sur le sujet..

Ressources

Vue d'ensemble de Firebug
Déboguer Javascript avec Firebug - tutoriel vidéo

10: Gardez vos noms de balises en minuscules

Techniquement, vous pouvez sortir en capitalisant vos noms de tag.

 Voici un fait intéressant sur le maïs.

Cela dit, s'il vous plaît ne le faites pas. Cela ne sert à rien et me fait mal aux yeux - sans oublier le fait qu'il me rappelle la fonction html de Microsoft Word!

Meilleur

 Voici un fait intéressant sur le maïs.

11: Utiliser les balises H1 - H6

J'admets que c'est quelque chose sur lequel j'ai tendance à me relâcher. Il est recommandé d’utiliser les six balises. Si je suis honnête, d'habitude je n'implémente que les quatre premiers mais j'y travaille! :) Pour des raisons sémantiques et SEO, forcez-vous à remplacer cette balise P par un H6 le cas échéant.

C'est un fait très important sur le maïs! 
 Le maïs est petit mais important.

12: Si vous créez un blog, enregistrez le H1 pour le titre de l'article

Ce matin encore, sur Twitter, j'ai demandé à nos abonnés s'ils pensaient qu'il était plus judicieux de placer la balise H1 en tant que logo ou de l'utiliser plutôt comme titre de l'article. Environ 80% des tweets renvoyés étaient en faveur de cette dernière méthode..

Comme pour tout, déterminez ce qui convient le mieux à votre propre site Web. Cependant, si vous créez un blog, je vous recommande de sauvegarder vos balises H1 pour le titre de votre article. À des fins de référencement, il s'agit d'une meilleure pratique - à mon avis.

13: Téléchargez ySlow

Surtout au cours des dernières années, l'équipe de Yahoo a réalisé un travail vraiment formidable dans notre domaine. Il n'y a pas si longtemps, ils ont publié une extension pour Firebug appelée ySlow. Une fois activé, il analysera le site Web donné et renverra un "bulletin" contenant des informations détaillées sur les domaines dans lesquels votre site doit être amélioré. Cela peut être un peu dur, mais c'est pour le plus grand bien. Je le recommande fortement.

14: Wrap Navigation avec une liste non ordonnée

Chaque site Web comporte une section de navigation. Tandis que vous pouvez certainement vous en tirer avec le formatage comme ceci:

  Accueil À propos Contact

Je vous encourage à ne pas utiliser cette méthode, pour des raisons sémantiques. Votre travail consiste à écrire le meilleur code possible dont vous êtes capable..

Pourquoi devrions-nous styler une liste de liens de navigation avec autre chose qu'une LISTE non ordonnée?

La balise UL est censée contenir une liste d'éléments.

Meilleur

 Accueil
 Sur
 Contact

15: Apprenez à cibler Internet Explorer

Vous vous trouverez sans doute à crier après IE à un moment ou à un autre. C'est en fait devenu une expérience de liaison pour la communauté. Quand j'ai lu sur Twitter comment l'un de mes copains se battait contre les forces d'IE, je souris et pense: "Je sais ce que vous ressentez, mec."

La première étape, une fois que vous avez terminé votre fichier CSS principal, consiste à créer un fichier "ie.css" unique. Vous pouvez ensuite le référencer uniquement pour IE en utilisant le code suivant.

Ce code indique: "Si le navigateur de l'utilisateur est Internet Explorer 6 ou une version inférieure, importez cette feuille de style. Sinon, ne faites rien." Si vous devez également compenser IE7, remplacez simplement "lt" par "lte" (inférieur ou égal à).

16: Choisissez un excellent éditeur de code

Que vous soyez sous Windows ou Mac, il existe de nombreux éditeurs de code fantastiques qui fonctionneront à merveille pour vous. Personnellement, j'ai un Mac et un PC côte à côte que j'utilise tout au long de la journée. En conséquence, j'ai développé une assez bonne connaissance de ce qui est disponible. Voici mes meilleurs choix / recommandations dans l'ordre:

Amoureux Mac

Coda
Expresso
TextMate
Aptana
DreamWeaver CS4

Amoureux du PC

InType
Éditeur de texte électronique
Bloc-notes++
Aptana
Dreamweaver CS4

17: Une fois le site Web terminé, compressez!

En compressant vos fichiers CSS et Javascript, vous pouvez réduire la taille de chaque fichier de 25% environ. S'il vous plaît, ne prenez pas la peine de le faire pendant votre développement. Cependant, une fois que le site est plus ou moins complet, utilisez quelques programmes de compression en ligne pour économiser de la bande passante..

Services de compression Javascript

Compresseur Javascript
JS Compressor

Services de compression CSS

Optimiseur CSS
Compresseur CSS
CSS propre

18: couper, couper, couper

En repensant à mon premier site web, je devais avoir un grave cas de divitis. Votre instinct naturel est d’envelopper chaque paragraphe avec une div, puis de l’envelopper avec une autre div pour faire bonne mesure.. Comme vous l'aurez vite compris, c'est très inefficace.

Une fois votre balisage terminé, parcourez-le deux fois de plus et trouvez des moyens de réduire le nombre d'éléments sur la page. Cette UL a-t-elle vraiment besoin de sa propre division d'emballage? Je crois que non.

Tout comme la clé de l'écriture est de "couper, couper, couper", il en va de même pour votre balisage.

19: Toutes les images nécessitent des attributs "Alt"

Il est facile d'ignorer la nécessité d'attributs alt dans les balises d'image. Néanmoins, il est très important, pour des raisons d’accessibilité et de validation, que vous preniez un moment supplémentaire pour remplir ces sections..

Mal

Meilleur

20: Reste en retard

Je doute fort que je sois le seul à avoir, à un moment de mon apprentissage, levé les yeux et compris que je me trouvais dans une pièce plongée dans l’obscurité totale tard dans la matinée. Si vous vous êtes trouvé dans une situation similaire, soyez assuré que vous avez choisi le bon champ.

Les incroyables moments "AHHA", du moins pour moi, se produisent toujours tard le soir. Ce fut le cas lorsque j'ai commencé à comprendre exactement ce que les fermetures de Javascript étaient. C'est un bon sentiment que vous devez ressentir, si vous ne l'avez pas déjà.

21: Voir la source

Quel meilleur moyen d'apprendre le HTML que de copier vos héros? Au départ, nous sommes tous des copieurs! Puis, lentement, vous commencez à développer vos propres styles / méthodes. Alors, visitez les sites Web de ceux que vous respectez. Comment ont-ils codé ceci et cette section? Apprenez et copiez d'eux. Nous l'avons tous fait, et vous devriez aussi. (Ne volez pas le dessin; apprenez simplement du style de codage.)

Vous remarquez des effets Javascript intéressants que vous aimeriez apprendre? Il est probable qu'il utilise un plugin pour réaliser l'effet. Affichez la source et recherchez dans la balise HEAD le nom du script. Ensuite, recherchez-le sur Google et mettez-le en œuvre sur votre propre site! Yay.

22: style tous les éléments

Cette pratique exemplaire est particulièrement vraie lors de la conception pour des clients. Ce n’est pas parce que vous n’avez pas utilisé de quotation de bloc que le client ne le fera pas. Ne jamais utiliser des listes ordonnées? Cela ne veut pas dire qu'il ne le fera pas! Faites vous-même un service et créez une page spéciale spécialement pour montrer le style de chaque élément: ul, ol, p, h1-h6, les guillemets, etc..

23: utiliser Twitter

Dernièrement, je ne peux pas allumer la télévision sans entendre parler de Twitter. c'est vraiment devenu plutôt odieux. Je n'ai pas envie d'écouter Larry King faire la publicité de son compte Twitter - nous savons tous qu'il ne met pas à jour manuellement. Yay pour les assistants! Aussi, combien de mères ont ouvert un compte après l'approbation d'Oprah? Nous ne pouvons que souhaiter le jour où quelques-uns d’entre nous étaient au courant du service et de son potentiel de "fontaine"..

Initialement, l'idée derrière Twitter était de publier "ce que vous faisiez". Bien que cela reste vrai dans une faible mesure, il est devenu beaucoup plus un outil de réseautage dans notre industrie. Si un développeur Web que j'admire poste un lien vers un article qu'il a trouvé intéressant, vous feriez mieux de croire que je vais le vérifier aussi - et vous devriez aussi! C’est la raison pour laquelle des sites comme Digg deviennent de plus en plus nerveux.

Si vous venez de vous inscrire, n'oubliez pas de nous suivre: NETTUTS.

24: apprendre Photoshop

Un commentaire récent sur Nettuts + nous a attaqué pour avoir publié quelques recommandations de Psdtuts +. Il a fait valoir que les didacticiels Photoshop n'avaient pas d'activité commerciale sur un blog de développement Web. Je ne suis pas sûr de lui, mais Photoshop est ouvert 24 heures sur 24 et 7 jours sur 7 sur mon ordinateur.

En fait, Photoshop peut devenir l'outil le plus important dont vous disposez. Une fois que vous avez appris le HTML et le CSS, je vous recommanderais personnellement d'apprendre le plus de techniques Photoshop possible..

Visitez la section vidéos à Psdtuts+
Gagnez plus de 25 $ pour vous abonner à Lynda.com pendant un mois. Regardez toutes les vidéos que vous pouvez trouver.
Profitez de la série "You Suck at Photoshop".
Prenez quelques heures pour mémoriser autant de raccourcis clavier PS que possible..

25: Apprendre chaque balise HTML

Il existe littéralement des dizaines de balises HTML que vous ne rencontrerez pas tous les jours. Néanmoins, cela ne signifie pas que vous ne devriez pas les apprendre! Connaissez-vous le tag "abbr"? Qu'en est-il de "citer"? Ces deux seuls méritent une place dans votre coffre à outils. Apprenez tous!

À propos, si vous ne connaissez pas les deux énumérés ci-dessus:

abbr fait à peu près ce que vous attendez. Cela fait référence à une abréviation. "Blvd" pourrait être enveloppé dans un tag parce que c'est une abréviation de "boulevard".
citer est utilisé pour faire référence au titre de certains travaux. Par exemple, si vous référencez cet article sur votre propre blog, vous pouvez insérer "30 meilleures pratiques HTML pour les débutants" dans une étiquette. Notez qu'il ne doit pas être utilisé pour faire référence à l'auteur d'une citation. C'est une idée fausse commune.

26: Participer à la communauté

Tout comme des sites comme le nôtre contribuent grandement à enrichir les connaissances d'un développeur Web, vous devriez également! Vous avez enfin compris comment faire flotter correctement vos éléments? Faites un blog pour apprendre aux autres comment. Il y aura toujours des personnes moins expérimentées que vous. Non seulement vous contribuerez à la communauté, mais vous apprendrez également. Remarquez à quel point vous ne comprenez pas vraiment quelque chose avant d'être obligé de l'enseigner?

27: Utiliser une réinitialisation CSS

C'est un autre domaine qui a été débattu à mort. Réinitialisations CSS: utiliser ou ne pas utiliser; telle est la question. Si je devais donner mon avis personnel, je vous recommanderais à 100% de créer votre propre fichier de réinitialisation. Commencez par télécharger un fichier populaire, comme celui d’Eric Meyer, puis, petit à petit, à mesure que vous en apprendrez davantage, commencez à le modifier. Si vous ne le faites pas, vous ne comprendrez pas vraiment pourquoi vos éléments de liste reçoivent un supplément de remplissage alors que vous ne le spécifiez nulle part dans votre fichier CSS. Epargnez-vous la colère et réinitialisez tout! Celui-ci devrait vous aider à démarrer.

html, corps, div, envergure, h1, h2, h3, h4, h6, h6, p, blockquote, pre, un, abbr, acronyme, adresse, gros, citer, code, img, ins, kbd, q, s, samp, petit, frappe, fort, dl, dt, dd, ol, ul, li, champs, forme, étiquette, légende, tableau, légende, tbody, tfoot, tead, thead, tr, th, td marge: 0; rembourrage: 0; bordure: 0; contour: 0; taille de police: 100%; alignement vertical: ligne de base; fond: transparent;  body line-height: 1;  ol, ul list-style: none;  blockquote, q quotes: none;  blockquote: before, blockquote: after, q: before, q: after content: "; content: none; table border-collapse: collapse; border-spacing: 0;

28: Line 'Em Up!

De manière générale, vous devez vous efforcer d’aligner vos éléments le mieux possible. Regardez vos dessins préférés. Avez-vous remarqué comment chaque titre, icône, paragraphe et logo s'aligne sur quelque chose d'autre sur la page? Ne pas le faire est l’un des plus grands signes d’un débutant. Pensez-y de cette façon: si je vous demande pourquoi vous avez placé un élément à cet endroit, vous devriez pouvoir me donner une raison exacte..

29: Trancher un PSD

Bon, vous avez donc acquis une solide connaissance des langages HTML, CSS et Photoshop. La prochaine étape consiste à convertir votre premier fichier PSD en un site Web opérationnel. Ne t'inquiète pas ce n'est pas aussi difficile que vous pourriez le penser. Je ne peux pas penser à un meilleur moyen de mettre vos compétences à l'épreuve. Si vous avez besoin d'aide, consultez ces didacticiels vidéo détaillés qui vous expliquent exactement comment faire le travail..

Trancher et dés que PSD
De PSD à HTML / CSS

30: n'utilisez pas de cadre… pourtant

Les frameworks, qu'ils soient en Javascript ou en CSS, sont fantastiques. mais s'il vous plaît ne les utilisez pas quand vous commencez. Bien que l'on puisse soutenir que jQuery et Javascript peuvent être appris simultanément, il n'en va pas de même pour CSS. J'ai personnellement promu le framework CSS 960 et je l'utilise souvent. Cela dit, si vous êtes encore en train d’apprendre le langage CSS - c’est-à-dire la première année - vous ne vous rendrez plus confus que si vous en utilisiez un..

Les frameworks CSS sont destinés aux développeurs expérimentés qui souhaitent gagner du temps. Ils ne sont pas pour les débutants.

Suivez-nous sur Twitter ou abonnez-vous au fil RSS NETTUTS pour plus d'articles et de sujets sur le développement Web quotidiens.

Code