Aujourd'hui, nous allons parler de sémantique en HTML5. J'ai déjà écrit un court article de critique sur . Je vous recommande de vous familiariser avec celui-ci avant de lire cet article. Nous allons maintenant examiner cette question plus en détail, sur la façon de composer correctement et avec compétence la structure sémantique d'un document HTML5.

Dans cet article nous allons progressivement créer une page HTML et l'agrémenter de balises sémantiques HTML5.

Figure - Structure sémantique d'une page HTML5.

DOCTYPE et balises méta dans le titre de la page

Commençons par un modèle de document HTML5 standard et ajoutons des balises méta à l'en-tête :

Titre de la page

J'ai ajouté une balise responsable des mots-clés. Et la balise responsable de la description de la page. Pour l'optimisation du référencement, ces balises sont obligatoires. Il est également nécessaire de remplir correctement l'étiquette. Le titre de la page doit être unique pour l'ensemble du site, et contenir dans le titre toute l'essence de la page pour laquelle il est précisé.

Allons plus loin. HTML5 introduit de nouvelles balises utilisées pour créer un balisage sémantique dans un document. Il s’agit des balises d’en-tête, de navigation, principale, d’article, de côté, de pied de page, etc. En termes d'affichage, ils fonctionnent de la même manière que les balises classiques, c'est-à-dire qu'ils sont des éléments de bloc. Mais s'il n'a pas de charge sémantique, alors header, nav, main et autres ne doivent être utilisés que de manière significative.

Titre de la page

L'en-tête de la page est formaté dans la balise header. Veuillez noter que le titre de la page est écrit à l'aide de la balise h1.

Titre du site

Si nous avons également un slogan à côté du titre, alors nous le plaçons dans un p, un div ou un span.

Titre du site

slogan du site

Une note sur la balise H1

A noter qu'en HTML5 la balise H1 est utilisée pour indiquer le titre du conteneur dans lequel elle se trouve (cela peut être un en-tête, une section, un article, etc.)

Avant l'avènement des balises HTML5, la sémantique était quelque peu différente et différente. Ainsi en HTML4 il ne pouvait y avoir qu’un seul titre H1 par page ! En règle générale, il s'agissait du titre de l'article ou du titre de la page (par exemple, s'il s'agit d'une page de catégorie sur laquelle plusieurs articles sont affichés.) H2 était utilisé pour les sous-titres, ou pour les sections de l'article principal. H3 pour les sous-sections et ainsi de suite.

Navigation dans les pages

La conception de la navigation principale du site doit être contenue dans la balise nav. Vous devez également vous rappeler qu’il est considéré comme une bonne pratique de concevoir une navigation avec des éléments de liste.

• Maison
• Portefeuille
• Galerie
• Contacts

Contenu sur la page

Le contenu principal de la page est formaté dans la balise main. Il peut s'agir d'un seul article, ou de plusieurs aperçus d'articles s'il s'agit d'une page de blog avec plusieurs entrées. Vous ne pouvez pas placer une barre latérale, un en-tête de page, un pied de page ou une navigation principale dans la balise principale !

...contenu de la page principale...

Conception des articles

La balise article est utilisée pour envelopper les articles. En général, cette balise contient un bloc de contenu qui peut être sorti du contexte de la page et utilisé séparément ailleurs. Il peut s'agir d'un article (le texte intégral de l'article ou un aperçu), d'un post sur le forum, etc.

Dans l'exemple ci-dessous, j'ai montré la conception de l'article en contexte, à l'intérieur de la balise main. L'article comporte un bloc d'en-tête avec le titre de l'article. La date de publication de l'article est spécifiée par une balise temporelle spéciale, qui s'affiche comme un élément en ligne normal. L'étiquette temporelle possède un attribut spécial dans lequel l'heure de publication doit être spécifiée au format machine. Cela peut être simplement datetime="2015-09-30" ou avec heures, minutes et secondes datetime="2015-09-30T15:25:55" . Le paramètre pubdate indique que l'article a été publié en même temps qu'il a été rédigé. S'il s'agit d'une actualité, il se peut que l'heure de l'actualité soit une et l'heure de publication soit différente, pour cela, vous devez spécifier l'étiquette temporelle deux fois et mettre pubdate uniquement dans l'étiquette où l'heure de publication est indiquée.

... Titre de l'article 30 septembre Sous-titre de l'article

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo quisquam, soluta sunt, aliquam voluptatem voluptate ! Deserunt repudiandae aperiam pariatur sit harum at a, quo, est neque. Adipisci beatae chaque fois?

Dans l'exemple ci-dessus, vous pouvez voir que les balises d'en-tête et de pied de page ont été utilisées à l'intérieur de l'article pour mettre en évidence le titre et le pied de page de l'article.

Barre latérale ou colonne avec widgets

Pour chaque élément individuel de la barre latérale, nous utilisons un bloc de côté. À l’intérieur, le titre est formaté avec la balise h1. Ainsi, une colonne de la barre latérale pourrait ressembler à ceci :

Titre du widget... Derniers messages... Commentaires populaires...

Balise de section

La balise section est utilisée pour représenter un groupe ou une section de contenu thématiquement lié. Son utilisation est similaire à celle d'un article, la principale différence étant que le contenu d'un élément peut n'avoir aucun sens en dehors du contexte de la page elle-même. Il est recommandé d'utiliser des balises ( – ) pour indiquer le sujet de la section.

Pour donner un exemple de l’article que vous lisez actuellement, vous pouvez entourer chaque paragraphe d’une balise. Par exemple, la balise section peut être utilisée pour mettre en évidence des blocs de contenu sur une page de destination. Cela ressemble à la définition d’un élément div, qui est souvent utilisé comme conteneur de contenu. La différence est qu'un div n'a aucune signification sémantique et ne dit rien sur le contenu qu'il contient. La balise section, au contraire, est utilisée pour indiquer clairement que le contenu qu'elle contient a un sens lié. Vous pouvez remplacer certaines de vos balises div par des balises de section, mais posez-vous toujours la question : « Ce contenu est-il lié ou non ?

Un exemple d'utilisation de la balise section dans une liste répertoriant les villes :

Un événement hors des villes

Rejoignez-nous dans ces villes en 2010.

Seattle

Suivez la route de briques jaunes.

Boston

C'est Beantown pour ses amis.

Minneapolis

C'est si gentil.

Hébergement non fourni.

Pied de page du site - Pied de page

Le pied de page du site est conçu avec la balise

© 2015 Copyright du site

Conclusion

Vous pouvez utiliser l'outil de présentation HTML5 pour vérifier la structure de la page. Il montre la structure de la page par blocs et titres.

La sémantique en HTML5 ne se limite pas aux balises indiquées ci-dessus dans l'article. Mais en utilisant les exemples ci-dessus, vous pouvez actualiser votre balisage et rendre votre site plus convivial pour les moteurs de recherche, ce qui se traduira par un meilleur classement de votre site dans les résultats de recherche.

Pour poursuivre ce sujet, vous pouvez explorer d'autres nouvelles balises HTML5. Ainsi que des microformats pour concevoir et structurer des données, tels que schema.org

Une remarque importante sur l'utilisation des balises HTML5. La spécification ne précise pas de règles strictes pour l'utilisation des balises sémantiques ; elle fournit uniquement des recommandations pour leur utilisation. Si vous ne comprenez pas ou ne savez pas où et quelle balise HTML5 utiliser, il est préférable d’utiliser un div pour ne pas endommager ou casser la structure du document.

Articles et matériaux

Chaque document HTML doit commencer par la balise< HTML >et terminez par la balise . Ces balises indiquent que les lignes entre elles représentent un seul document HTML. De plus, vous pouvez voir qu'un fichier HTML dans son ensemble est un élément du langage HTML.

De plus, le document HTML doit contenir les éléments HEAD (informations sur le document) et BODY (corps du document).

Section du document HEAD

La section HEAD d'un document définit son titre et contient également des informations supplémentaires sur le document pour le navigateur. Cette section est facultative, mais il est recommandé de toujours l'utiliser dans vos documents HTML, car un en-tête bien rédigé peut s'avérer très utile.

La section d'en-tête commence par la balise< HEAD >et suit immédiatement la balise. Entre les balises d'ouverture et de fermeture de l'élément HEAD se trouvent d'autres éléments d'en-tête.

Titre du document titre

Pour donner un nom à un document HTML, la balise est< TITLE >. Ce nom sera affiché dans le titre de la fenêtre du navigateur. Le titre est écrit entre les balises et et est une ligne de texte. La longueur de cette ligne peut être quelconque, mais il est recommandé de ne pas dépasser 60 caractères. L'élément TITLE ne doit apparaître que dans la section HEAD.

Section du document CORPS

Cette section du document contient les informations affichées dans la fenêtre du navigateur. La section BODY doit commencer par la balise< BODY >et se termine par la balise, entre laquelle se trouvent les éléments HTML qui composent le contenu du document.

Spécification de l'élément CORPS

Une balise possède un certain nombre d'attributs qui déterminent l'apparence du document. Vous trouverez ci-dessous la spécification de la balise.

TEXTE="couleur du texte"

BGCOLOR="couleur de fond"

BACKGROUND="adresse de l'image d'arrière-plan"

L'attribut TEXT spécifie la couleur de police de l'ensemble du document en RVB ou en notation de caractères. Par défaut (si cet attribut n'est pas précisé), les paramètres du navigateur sont utilisés.

L'attribut BGCOLOR spécifie la couleur d'arrière-plan de la fenêtre du navigateur de documents en RVB ou en notation symbolique. Les paramètres du navigateur sont utilisés par défaut.

L'attribut BACKGROUND permet de préciser l'adresse et le nom de l'image utilisée comme fond. Ce dessin sera reproduit et distribué en arrière-plan du document.

Les attributs LINK, VLINK et ALINK spécifient les couleurs des hyperliens en RVB ou en notation symbolique. Les paramètres du navigateur sont utilisés par défaut. Un lien hypertexte non visité est un lien hypertexte qui n’a pas encore été utilisé pour accéder à un autre document. Un lien hypertexte visité est un lien hypertexte qui a déjà été utilisé pour naviguer vers un autre document. Lien hypertexte actif – un lien hypertexte vers le document vers lequel vous accédez actuellement.

Conseils d'utilisation des attributs de balise BODY

 Si vous spécifiez au moins une couleur dans la balise BODY, spécifiez également les autres. Cela est dû au fait que l'utilisateur peut définir les paramètres de couleur de son navigateur comme cela lui convient le mieux. La spécification d'une seule couleur peut entraîner une fusion du texte avec la couleur d'arrière-plan pour certains utilisateurs. En conséquence, la visualisation du document sera difficile.

 Choisissez la couleur du texte pour qu'il « fonctionne » avec la couleur de fond ou les couleurs principales de l'image. Par exemple, le rouge sur le vert peut causer de graves problèmes à un nombre important de personnes.

 BGCOLOR et BACKGROUND peuvent être spécifiés dans l'élément BODY. Dans ce cas, le navigateur privilégie BACKGROUND, mais si l'image de fond ne peut pas être chargée, BGCOLOR sera utilisé. Par conséquent, essayez de définir la couleur d’arrière-plan pour qu’elle soit similaire à la couleur de l’image d’arrière-plan afin de ne pas perturber la balance des couleurs du document.

Bonjour! Vous ne trouverez rien d'utile dans cette leçon si vous êtes DÉJÀ familier avec la formation de la structure d'un document HTML. Pour ceux qui ne sont PAS familiers, je vais montrer la structure correcte (valide) d'un document Web HTML, y compris pour un site WordPress.

Structure générale correcte d'un document HTML

Tout d’abord, sans trop de préambule, la structure générale de tout document HTML devrait être la suivante :

/*Indique le type de document DTD actuel*/ /*Affiche le début du document*/ /*Affiche le début du titre (en-tête)*/ Test/*Affiche le titre*/ /*Affiche le début du titre* / /*Affiche le début de la partie principale du document (corps) */ /*Le contenu du document*/ /*Affiche la fin de la partie principale du document*/ /*Affiche la fin du document* /

Si vous supprimez les explications que j'ai montrées après chaque balise, alors la structure simple du document HTML ressemble à ceci

Test

Type de document DTD actuel

Type de document actuel ( Définition du type de document, DTD) est nécessaire au navigateur pour comprendre comment interpréter la page web en cours, car le langage HTML existe en plusieurs versions.

De plus, il existe d'autres langages de balisage autres que HTML, comme XHTML.

Remarque : XHTML est EXtensible HyperText Markup Language, qui se traduit par langage de balisage hypertexte étendu.

XHTML est similaire au HTML, mais la syntaxe est différente. Pour éviter que le navigateur ne confonde les langues, vous devez l'afficher dans la première ligne de code, le type du document actuel est DOCTYPE.

Le concept de balise en HTML

Avez-vous remarqué que la structure entière d'un document HTML est spécifiée par certaines balises - certains mots entourés de crochets angulaires.

Le mot placé entre crochets dans un document HTML est appelé une balise. Chaque balise a sa propre signification, déterminée par des règles de balisage.

• La balise signifie le titre du document HTML. Les balises head stockent des informations pour les navigateurs et les moteurs de recherche. Y compris sous forme de balises méta ;
• La balise désigne le contenu principal du document HTML. A savoir du texte, des images, des scripts Java Script, etc. ;
• La balise [p] est un élément de bloc et commence toujours sur une nouvelle ligne. Cela signifie le paragraphe de contenu principal d'un document HTML.

Important! Toutes les balises de balisage HTML doivent être associées. Autrement dit, la balise d'ouverture doit être fermée par une balise de fermeture, suivie d'une barre oblique.

Balises de titre et de sous-titre h1-h6

Pour améliorer la structuration du texte du document, ainsi que le référencement des pages Web, il existe des balises de contenu de corps supplémentaires. On les appelle balises de titre et de sous-titre de h1 à h6, 6 au total.

Elles, tout comme les balises [p]-paragraphe, qui permettent de mettre en évidence des sections sémantiques du texte, vous permettent de diviser le texte en parties sémantiques, en donnant à chaque section son propre titre.

Les balises h1 - h6 ont une dépendance subordonnée, le niveau inférieur de cette subordination est un paragraphe.

Il est important de noter que la violation de la dépendance subordonnée des balises h1 - h6 - p ne brisera pas l'affichage et la validité du document, mais ne fera qu'aggraver son optimisation pour les moteurs de recherche.

Un exemple de structure de document HTML développée

Permettez-moi de vous donner un exemple académique d'une structure de document HTML plus développée :

Test Titre principal Titre principal Premier sous-titre Titre principal Deuxième sous-titre Premier sous-titre mineur

Structure HTML5

En HTML 5, la structure du document devrait ressembler à ceci :

Il s'agit d'une déclaration qui montre que ce document est en HTML5 ;

c'est l'élément racine de la page HTML ;

Un élément avec des balises méta sur le document ;

Cet élément définit le titre du document ;

Cet élément contient le contenu visible de la page ;

L'élément définit un grand titre

L'élément définit un paragraphe.

Les balises H2 - H6 fonctionnent en HTML5

Toutes les balises sont doubles. La balise de début est appelée balise d'ouverture et la balise de fin est appelée balise de fermeture.

Balisage HTML sur un site WordPress

Malgré le fait que le script WordPress soit écrit en PHP, tous les fichiers du site, ou plutôt tous les fichiers du modèle de travail du site, ont un balisage html. Regardons l'exemple dans le fichier header.php du modèle Twenty Seventeen :

Vous pouvez le constater si toutes les fonctions WordPress sont placées dans un balisage HTML classique. Il existe un type de document :

Balises appariées,

Balise d'ouverture.

La balise de fermeture se trouve dans le fichier footer.php.

Comment afficher le code HTML d'une page de site WordPress

Ce que vous écrivez dans l'éditeur du site, en créant des articles ou des pages, n'est qu'une partie de la page HTML du site. Ce n'est même pas tout le corps de la page.

Pour visualiser le code HTML d'une page d'un site WordPress, et cela est très souvent nécessaire, il vous faut :

Ouvrez la page dans le navigateur ;

Passez à la police du clavier anglais ;

Appuyez sur les boutons suivants :

• Chrome : Ctrl+U
• Opéra : Ctrl+U
• Mozilla : Ctrl+U

Peut-être que vous ne savez pas encore pourquoi cela est nécessaire. Croyez-moi, vous en aurez besoin plus d’une fois pour analyser votre site et éventuellement les sites de vos concurrents.

Conclusion

En conclusion, je voulais tirer une conclusion, mais la seule chose qui me vient à l'esprit est que l'article s'est avéré entièrement destiné aux débutants. À première vue, il existe une grande différence entre l’exemple de code d’article et les exemples provenant de sites réels. Cependant, tous les fichiers ont la même structure de document HTML et il est extrêmement important de ne pas violer cette structure lorsque vous travaillez avec le site.

Il est temps de prendre comme exemple un simple document HTML. Nous écrirons du code qui entraînera l'affichage de la phrase « Hello, world ! » dans la fenêtre du navigateur. (traduit littéralement de l'anglais - « Bonjour le monde ! »). Ce type de pratique de codage constitue généralement la première expérience lors de l’apprentissage d’une nouvelle langue. Cette formulation du problème attire l’attention de l’étudiant sur plusieurs aspects clés du langage de programmation (dans notre cas, le langage de balisage), dont le principal est la structure de base du programme (dans notre cas, une page web).

type de document

Cet élément est également appelé élément racine car tous les autres éléments du document s'y trouvent. Un élément racine ne peut avoir que deux enfants : et .

élément de tête

Un élément est un conteneur pour d'autres éléments qui fournissent des informations sur le document, appelés métadonnées. Ces métadonnées indiquent au navigateur l'emplacement des scripts et feuilles de style externes, établissant la relation entre le document actuel et d'autres ressources, et peuvent fournir des informations supplémentaires destinées aux navigateurs. Hormis l'élément requis, abordé plus loin dans ce chapitre, les navigateurs n'affichent aucune métadonnée trouvée dans l'élément.

L'élément doit être le premier enfant de l'élément, aucun contenu ou élément ne doit le précéder :

élément de titre

L'élément fournit un titre textuel pour le document. Chaque document HTML doit avoir exactement un élément, qui doit être situé à l'intérieur de l'élément :

Titre de la fenêtre

Les navigateurs affichent le contenu de l'élément sous forme de titre (nom) du document, qui apparaît généralement en haut de la fenêtre du navigateur ou dans le titre d'un onglet :

élément du corps

L'élément est un conteneur pour tout le contenu d'une page Web. Tout ce qui est affiché dans une fenêtre de navigateur et vu par l'utilisateur y est contenu (chaque document HTML ne peut contenir qu'un seul élément). Son objectif principal est de séparer le contenu du document des métadonnées :

Titre de la fenêtre

C'est tout! Un début a été fait - vous avez reçu une excellente préparation. Voici à quoi ressemblera la structure du document fini avec la phrase « Hello, world ! » affichée dans la fenêtre du navigateur :

Titre de la fenêtre Bonjour tout le monde !

Dans la mesure du possible, expliquez votre code si nécessaire.

Utilisez des commentaires pour expliquer votre code : ce qu'il fait, ce qu'il fait et pourquoi la solution que vous choisissez est utilisée.

(Ce point est facultatif car il ne sert à rien de s'attendre à ce que le code soit toujours bien documenté. L'utilité des commentaires dépend de la complexité du projet et peut différer pour le code HTML et CSS.)

Tâches Cochez les tâches de votre liste de tâches à l'aide de TODO.

Marquez les tâches à l'aide du mot-clé TODO. N'utilisez pas d'autres formats couramment utilisés tels que @@ .

Mettez les contacts (nom d'utilisateur ou liste de diffusion) entre parenthèses : TODO(contact) .

Décrivez la tâche après deux points, par exemple : TODO : Tâche.

Recommandé : (# À FAIRE(Ivan Ivanov) : Traiter l'alignement #) Test
Recommandé:

• concombres
• Tomates

Règles de formatage HTMLType de document Utilisez HTML5.

(Il est recommandé d'utiliser HTML avec le type de contenu text/html. N'utilisez pas XHTML, car application/xhtml+xml a une mauvaise prise en charge du navigateur et limite les options d'optimisation.)

Validité HTML Utilisez du HTML valide autant que possible.

Utilisez du code HTML valide à moins que son utilisation ne vous permette pas d'atteindre la taille de fichier requise pour le niveau de performances souhaité.

Validateur HTML W3C (anglais) pour vérifier la validité du code.

La validité est une qualité importante et mesurable du code. La rédaction d'un HTML valide favorise l'apprentissage des exigences et des limites techniques et garantit une utilisation appropriée du HTML.

Non recommandé : cochez Vérifiez simplement
Recommandé : Vérifiez Juste un chèque.

Sémantique Utilisez HTML comme prévu.

Utiliser des éléments (parfois appelés à tort « balises ») aux fins prévues : titres pour les titres, p pour les paragraphes, a pour les liens, etc.

Cela rend le code plus facile à lire, à modifier et à maintenir.

Médias alternatifs Incluez toujours du contenu multimédia alternatif.

Essayez de fournir du contenu alternatif pour les médias, tels que des images, des vidéos ou des animations définies à l'aide de Canvas. Pour les images, il s'agit d'un texte alternatif significatif (alt), et pour la vidéo et l'audio, d'une transcription du texte et de la légende, si possible.

Le contenu alternatif peut aider les personnes handicapées. Par exemple, il est difficile pour une personne malvoyante de comprendre ce qu'il y a sur l'image si @alt n'est pas défini pour cela. D’autres personnes peuvent avoir des difficultés à comprendre ce qui se dit dans un enregistrement vidéo ou audio.

(Si l'alt de l'image est redondant ou s'il est simplement utilisé à des fins décoratives dans des endroits où CSS ne peut pas être utilisé, utilisez un texte alt vide alt="" )

Séparation des responsabilités Structure, conception et comportement séparés.

Gardez la structure (balisage), l’apparence (styles) et le comportement (scripts) séparés et essayez de minimiser les interactions entre eux.

Assurez-vous que les documents et les modèles contiennent uniquement du HTML et que le HTML sert uniquement à définir la structure du document. Déplacez tout le code responsable de la conception dans des fichiers de style et le code responsable du comportement dans des scripts.

Essayez de réduire leurs intersections au minimum en incluant un nombre minimum de fichiers de style et de scripts dans vos modèles.

Séparer la structure de la présentation et du comportement facilite la maintenance du code. La modification de modèles et de documents HTML prend toujours plus de temps que la modification de fichiers de style ou de scripts.

Non recommandé : HTML est nul. HTML est nul.

J'ai déjà lu cela quelque part, mais maintenant tout est définitivement clair : Le HTML est une vraie poubelle !!1 Je ne peux pas croire que pour changer le design, il faille tout refaire à chaque fois.
Recommandé : Ma première refonte uniquement CSS Mon nouveau design CSS

J'ai déjà lu cela auparavant, mais finalement je l'ai fait moi-même : j'utilise le principe de séparation des préoccupations et je ne mets pas le design en HTML.

Comme c'est cool !

Liens mnémoniques N'utilisez pas de liens mnémoniques.

La seule exception à cette règle concerne les caractères de service HTML (par exemple< и & ) а так же вспомогательные и “невидимые” символы (например неразрывный пробел).

Balises facultatives N'utilisez pas de balises facultatives. (pas nécessaire)

Pour réduire la taille du fichier et améliorer la lisibilité du code, vous pouvez omettre les balises facultatives. La spécification HTML5 contient une liste de balises facultatives.

(Cela peut prendre un certain temps avant que cette approche soit largement utilisée car elle est très différente de ce que l'on enseigne généralement aux développeurs Web. Du point de vue de la cohérence, du code et de la simplicité, il est préférable d'omettre toutes les balises facultatives plutôt que certaines d'entre elles).

Non recommandé : Nous gaspillons des octets – nous gaspillons de l’argent.
Recommandé : les octets, c'est de l'argent !

De sorte que

Attribut "type" Ne spécifiez pas l'attribut type lors de l'ajout de styles et de scripts à un document.

N'utilisez pas l'attribut type lors de la connexion de styles (sauf lorsque vous utilisez autre chose que CSS) et de scripts (sauf lorsque vous utilisez autre chose que JavaScript).

Spécifier l'attribut type dans ce cas n'est pas nécessaire car HTML5 utilise text/css (anglais) et text/javascript (anglais) par défaut. Cela fonctionnera même dans les anciens navigateurs.

Non recommandé:
Recommandé:
Non recommandé:
Recommandé:

Règles de formatage HTMLFormatage Créez une nouvelle ligne pour chaque élément de bloc, de tableau ou de liste et indentez chaque élément enfant.

Quels que soient les styles spécifiés pour l'élément (CSS vous permet de modifier le comportement de l'élément à l'aide de la propriété display), enveloppez chaque élément de bloc ou de tableau sur une nouvelle ligne.

Mettez également en retrait tous les éléments imbriqués dans un élément de bloc ou de tableau.

(Si vous rencontrez des problèmes avec les espaces entre les éléments de la liste, vous pouvez placer tous les éléments li sur une seule ligne. Il est recommandé que Lint émette un avertissement au lieu d'une erreur dans ce cas.

Recommandé:

• Macha
• Glacha
• Cheburash

Recommandé: Impôts sur les bénéfices

$ 5.00	$ 4.50

Règles de style CSS Validité CSS Utilisez un code CSS valide autant que possible.

Sauf dans les cas où un code dépendant du navigateur est requis ou dans les cas d'erreurs du validateur, utilisez un code CSS valide.

Utilisez des outils comme le W3C CSS Validator pour valider votre code.

La validité est une qualité importante et mesurable du code. L'écriture de CSS valides permet d'éliminer le code redondant et garantit une utilisation correcte des feuilles de style...

Identificateurs et noms de classe Utilisez des noms et des identifiants de classe génériques ou significatifs.

Au lieu d'utiliser des codes ou de décrire l'apparence d'un élément, essayez d'exprimer le sens de sa création dans le nom d'une classe ou d'un identifiant, ou donnez-lui un nom de modèle...

Les noms génériques sont simplement des variantes de noms d'éléments qui n'ont pas d'objectif particulier ou qui ne se distinguent pas de leurs frères et sœurs. Ils sont généralement nécessaires comme « aides ».

L'utilisation de noms de fonctionnalités ou de modèles réduit le besoin de modifications inutiles du document ou des modèles.

Obsolète : /* Obsolète : inutile */ #yee-1901 () /* Obsolète : description de l'apparence */ .button-green() .clear()
Recommandé : /* Recommandé : précis et pertinent */ #gallery () #login () .video () /* Recommandé : nom du modèle */ .aux () .alt ()

Noms d'identifiant et de classe Pour les identifiants et les classes, utilisez des noms aussi longs que nécessaire mais aussi courts que possible.

Essayez de formuler exactement ce que cet élément devrait faire, tout en étant aussi bref que possible.

Cette utilisation de classes et d'identifiants contribue à rendre le code plus facile à comprendre et plus efficace.

Sélecteurs de type Évitez d'utiliser des noms de classe ou des identifiants avec des sélecteurs de type d'élément (tag).

Sauf nécessité absolue (par exemple avec des classes d'assistance), n'utilisez pas de noms d'éléments avec des noms de classe ou des identifiants.

Raccourcis pour les propriétés Utilisez des raccourcis pour les propriétés autant que possible.

CSS propose de nombreuses formes abrégées différentes (telles que font ), qu'il est recommandé d'utiliser dans la mesure du possible, même si une seule des valeurs est spécifiée.

L’utilisation de la notation de propriétés abrégée est utile pour une plus grande efficacité et une meilleure compréhension de votre code.

Non recommandé : /* Non recommandé */ border-top-style : aucun ; famille de polices : palatino, georgia, serif ; taille de police : 100 % ; hauteur de ligne : 1,6 ; rembourrage inférieur : 2em ; remplissage-gauche : 1em ; remplissage à droite : 1em ; rembourrage supérieur : 0 ;
Recommandé : /* Recommandé */ border-top : 0 ; police : 100 %/1,6 palatino, géorgie, empattement ; remplissage : 0 1em 2em ;

0 et unités Ne pas spécifier d'unités pour les valeurs nulles

Ne spécifiez pas d'unités pour les valeurs nulles, sauf s'il y a une raison de le faire.

0 dans la partie entière d'une fraction Ne pas mettre « 0 » dans la partie entière d'une fraction.

Ne mettez pas 0 dans la partie entière dans les valeurs comprises entre -1 et 1.

Citations dans les liens N'utilisez pas de guillemets dans les liens

N'utilisez pas de guillemets ("" , "") avec url() .

Noms de couleurs hexadécimaux Utilisez autant que possible une notation hexadécimale à trois caractères.

La notation hexadécimale à trois caractères pour les couleurs est plus courte et prend moins de place.

Préfixes Sélecteurs de préfixes avec des préfixes uniques à l'application actuelle. (pas nécessaire)

Dans les grands projets, ainsi que dans le code qui sera utilisé pour d'autres projets ou sur d'autres sites, utilisez des préfixes (comme espaces de noms) pour les identifiants et les noms de classe. Utilisez des titres courts et uniques suivis d'un trait d'union.

L'utilisation d'espaces de noms permet d'éviter les conflits de noms et peut faciliter la maintenance de votre site. Par exemple, lors de la recherche et du remplacement.

Séparateurs dans les classes et les identifiants Séparez les mots dans les identifiants et les noms de classe à l'aide d'un trait d'union.

Évitez d'utiliser autre chose qu'un trait d'union pour relier les mots et les abréviations dans les sélecteurs afin d'améliorer la lisibilité et la compréhension de votre code.

Déconseillé : /* Déconseillé : les mots « démo » et « image » ne sont pas séparés */ .demoimage () /* Déconseillé : le trait de soulignement est utilisé à la place d'un trait d'union */ .error_status ()
Recommandé : /* Recommandé */ #video-id().ads-sample()

Hacks Évitez d'utiliser les informations sur la version du navigateur ou les hacks CSS - essayez d'abord d'autres méthodes.

Il peut être tentant de lutter contre les différences entre les navigateurs avec des filtres CSS, des hacks ou d'autres solutions de contournement. Toutes ces approches ne doivent être considérées qu’en dernier recours si vous souhaitez une base de code efficace et facilement maintenable. En termes simples, autoriser les piratages et la détection du navigateur nuira au projet à long terme, car cela signifie que le projet emprunte la voie de la moindre résistance. Ce qui facilite l’utilisation des hacks et permet de les utiliser de plus en plus souvent, ce qui aura pour conséquence de les utiliser trop souvent.

Règles de formatage CSSOrdre des annonces Trier les annonces par ordre alphabétique.

Définissez les déclarations par ordre alphabétique pour garantir un code cohérent et facile à utiliser.

Lors du tri, ignorez les préfixes du navigateur. De plus, si plusieurs préfixes de navigateur sont utilisés pour une propriété, ils doivent également être triés (par exemple -moz doit être avant --webkit)

Retraits en blocs. Mettez toujours le contenu du bloc en retrait.

Mettez toujours en retrait tout contenu de bloc, tel que des règles dans des règles ou des déclarations, pour afficher la hiérarchie et rendre le code plus facile à comprendre.

Après les déclarations Placez un point-virgule après chaque déclaration.

Utilisez un point-virgule après chaque déclaration pour assurer la cohérence du code et faciliter l'ajout de nouvelles propriétés.

Après les noms de propriétés Utilisez des espaces après les deux-points dans les déclarations.

Utilisez toujours un espace après les deux points (mais pas avant) dans les déclarations, pour l'ordre dans le code.

Séparation des sélecteurs et des déclarations Séparez les sélecteurs et les déclarations par un saut de ligne.

Démarrez chaque sélecteur ou déclaration sur une nouvelle ligne.

Règles de séparation Séparez les règles avec des sauts de ligne.

Mettez toujours un saut de ligne entre les règles.

Méta-règles CSSGrouping Rules Regroupez les règles et indiquez les groupes avec un commentaire. (pas nécessaire)

Dans la mesure du possible, regroupez les règles ensemble. Indiquez les groupes par des commentaires et séparez-les par des sauts de ligne.

Conclusion Être cohérent

Si vous modifiez du code, prenez quelques minutes pour comprendre comment il est écrit. Si les opérateurs mathématiques sont séparés par des espaces, faites de même. Si les commentaires sont entourés de parenthèses ou de tirets, faites de même avec vos commentaires.

L'idée de ce guide est de créer un vocabulaire commun qui permet aux développeurs de se concentrer sur ce qu'ils souhaitent exprimer plutôt que sur la manière dont ils le souhaitent.

Nous proposons des règles de conception uniformes qui vous permettent d'écrire du code dans le même style, mais le style de code déjà utilisé dans le projet est également important.

Si votre code est très différent du code existant, il peut perturber le rythme du lecteur et le rendre difficile à lire. Essayez d'éviter cela.

Note du traducteur Je voudrais également noter que Google se concentre principalement sur les grands projets à forte charge, où chaque octet coûte cher, il convient donc de considérer que s'ils recommandent de démarrer chaque sélecteur sur une nouvelle ligne, ou d'utiliser des espaces au lieu de onglets, cela implique principalement que le code sera minifié et compressé avant utilisation sur le site.

Merci à tous ceux qui ont lu jusqu'ici.

Balises : Ajouter des balises