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 sa feuille 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 beau code, ou s'il s'agit simplement d'une beauté dans la beauté. Code? Beauté? certainement! Après tout, le code est comme la poésie. (Traduction : « Le code est de la poésie » est le slogan du célèbre système de blogs WordPress .) Il ne s'agit que 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 l'art donné par son créateur. . coups de pinceau.
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 (2000 x 2000) 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 le balisage 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 fera l'affaire et suivra une « hiérarchie » claire.
Balises descriptives appropriées – En fonction des besoins, la liste est marquée comme suit : 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 côté serveur. (Quelle que soit la méthode, le langage, le CMS, tout ce qui fonctionne pour vous.)
Classes sémantiques – Non seulement vous devez configurer des noms d'éléments corrects, mais vous devez également nommer les classes et les ID de manière sémantique : ils peuvent servir de description 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, veuillez faire attention au codage 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 lecture 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.
Texte original : http://css-tricks.com/what-beautiful-html-code-looks-like/
Traduction : http://horans.cn/what-beautiful-html-code-looks-like/