Chaque fois que je visite un beau site Web, je ne peux m'empêcher de regarder le code source. C'est comme avoir une paire de lunettes à rayons X et pouvoir voir n'importe qui, même à travers ses feuilles de vigne. C'est tout simplement une évidence ! J'ai hâte de savoir si ce magnifique site Web est écrit avec le même code magnifique, ou s'il est simplement une beauté extérieure. Code? Beauté? certainement! Après tout, le code est comme la poésie. (Note de traduction : "Le code est de la poésie" est le slogan du célèbre système de blogs WordPress.) Il s'agit simplement du HTML le plus basique. Il n'est naturellement pas aussi complexe et élégant que d'autres langages dynamiques, mais il conserve néanmoins le charme que lui confère son langage. créateur.
Cela m'a fait réfléchir : comment rendre le code beau ? Avec HTML, tout cela est un travail manuel. Voyons comment les langages de balisage peuvent atteindre un état de beauté.
L'image est suffisamment grande (2000x2000) pour que vous puissiez l'imprimer et la coller dans votre casier personnel et impressionner vos amis. Cela dit, il s’agit effectivement d’une taille déroutante. Je publierai l'image PSD originale pour que tout le monde puisse la modifier.
HTML5 – HTML5 et ses nouveaux éléments apportent une beauté sans précédent.
DOCTYPE-HTML5 possède le meilleur type de document .
Indentation - Les tabulations et les espaces sont utilisés pour indenter le code afin d'afficher correctement la relation parent-enfant entre les balises et de souligner la structure hiérarchique.
Charset - Une déclaration charset doit être faite dans l'en-tête avant tout le contenu.
Titre – Le titre du site Web est simple et clair. Commencez par décrire la fonction de la page, après le séparateur, et terminez par le titre du site Web.
CSS - utilise uniquement une simple feuille de style (les types de médias sont déclarés dans la feuille de style) et s'adresse uniquement aux bons navigateurs. IE6 et versions antérieures recevront une feuille de style générique.
Corps - En attribuant un identifiant au corps , vous pouvez lui donner un style unique pour différentes pages sans avoir besoin de balisage supplémentaire.
JavaScript - jQuery (la plus belle bibliothèque de scripts JavaScript ) est appelé par Google. Un seul fichier JavaScript est chargé. Chaque script est référencé en bas de page.
Chemin du fichier : pour plus d’efficacité, utilisez des chemins relatifs pour les ressources du site. Du point de vue de l'adaptation à la réimpression, les fichiers de contenu (tels que les images) utilisent des chemins absolus.
Attributs de l'image - L'image contient un texte alternatif, principalement pour le cas où l'image est manquante, mais elle peut également être utilisée à des fins de vérification. Afin d'améliorer l'efficacité du rendu, il est préférable de spécifier la largeur et la hauteur de l'image.
Contenu principal d'abord – Le contenu principal de la page doit venir après l'étiquetage et la navigation de base, et avant tout contenu auxiliaire (tel que les barres latérales).
Éléments descriptifs appropriés au niveau des blocs - HEADER, NAV, SECTION, ARTICLE, ASIDE - ces nouvelles " sections de description " décriveront mieux le contenu que le précédent DIV.
Hiérarchie – La mise en majuscule des balises de titre sera efficace et suivra une « hiérarchie » claire.
Balises descriptives appropriées - Les listes sont étiquetées en fonction de différents besoins : listes non triées, triées et personnalisées qui ne sont pas couramment utilisées.
Contenu commun inclus : il est préférable d'inclure le même contenu qui apparaît sur différentes pages dans la page depuis le serveur. (Quelle que soit la méthode, le langage, le CMS, tout ce qui fonctionne pour vous.)
Classes sémantiques - Il est non seulement nécessaire de définir des noms d'éléments corrects, mais également de s'assurer que les noms de classes et d'identifiants sont sémantiques : ils peuvent jouer un rôle descriptif même sans instructions spécifiques. (Par exemple, "col" vaut mieux que "gauche")
Classes : lorsque plusieurs éléments doivent utiliser des styles similaires, essayez de définir la même classe pour eux. (Réutilisabilité)
ID - Lorsque l'élément n'apparaît qu'une seule fois dans la page, essayez de définir des ID pour lui et ne définissez pas le même ID pour différents éléments.
Éléments dynamiques – Les effets dynamiques sont ajoutés uniquement lorsque cela est vraiment nécessaire.
Caractères codés : lorsque des caractères spéciaux apparaissent, faites attention à l'encodage des caractères .
Libre de style - Tout sur la page n'a rien à voir avec le style et vous n'avez même pas besoin de spécifier le style que vous souhaitez. Tout sur la page est limité aux trois éléments suivants : ressources requises du site, contenu, description.
Commentaires - Lors de la consultation du code, le contenu qui ne nécessite pas d'accent particulier ou qui n'est pas particulièrement évident sera inclus dans les commentaires .
Valide : le balisage à l'échelle du site est conforme à la validation du W3C. Faites attention à la fermeture des balises, assurez-vous des attributs nécessaires, évitez les méthodes obsolètes, etc.