Bonjour tout le monde. Je suis retourné à Saint-Pétersbourg à nouveau après trois semaines dans le cercle polaire arctique. Et ici tout est encore gris et sombre: (

Leçon d'aujourd'hui pour les webmasters avancés. Débutants, je ne recommande pas de comprendre indépendamment un sujet aussi difficile, il vaut mieux lire les posts "". Dans l'article, il était mentionné que l'un des critères de qualité d'un sujet était la validité de son code.
En termes généraux, j'ai donné la définition de ce terme. Mais, je pense, il est intéressant de traiter cette question plus en détail, ce que nous ferons dans l'article d'aujourd'hui.

Comment est apparu le World Wide Web Consortium?

Validité au sens général du terme - conformité. Dans le cas d'Internet, les normes et standards de mise en page et de création de code sont définis par le Consortium mondial du W3C. Les créateurs de cette organisation ont été à l’origine du développement des premières versions de HTML (langage de texte hypertexte ou langage de balisage hypertexte) et sont devenus les pionniers du World Wide Web, qui a progressivement acquis une immense popularité. Cette découverte appartient à Sir Timothy John Berners-Lee avec Robert Kayo. Bernes-Lee est toujours à la tête du World Wide Web Consortium (W3C) et législateur dans ce domaine.

Avec l'aide du balisage HTML, il est devenu possible de créer des pages Web et de les reconnaître dans un aspect familier pour les utilisateurs, des navigateurs ont été créés. Le W3C a introduit un certain nombre de normes auxquelles les documents doivent se conformer avec le réseau afin que tous les navigateurs puissent les reconnaître correctement. Pendant tout le développement d'Internet, les créateurs de guerre se sont battus pour le championnat. Certains d'entre eux ont même essayé d'introduire leurs nouvelles normes, mais grâce à leurs développements, le W3C a réussi à conserver le rôle du législateur dans les règles de création de code. Dans HTML 3, la prise en charge CSS a déjà été incluse (feuilles de style en cascade ou feuilles de style en cascade). Initialement, les styles, les couleurs et les formes étaient définis directement dans le code HTML, mais la création de CSS simplifiait grandement cette tâche, déchargeait le code source et, par conséquent, le temps de chargement de la page. La dernière version est Html 5, qui devient de plus en plus pertinente. Pendant longtemps, sa place a été occupée par HTML 4.01 (depuis 1999).

Ce contexte historique est fourni afin que vous ayez une compréhension plus globale du sujet de l'examen d'aujourd'hui - la validation du site. Si vous allez dans la section «Standards» du site officiel du W3C, vous verrez une liste complète de sous-sections contenant des standards. Ici, par exemple, vous pouvez voir le statut actuel sur HTML:

Pour chacune des sous-clauses, de longues listes de normes définissant l'un ou l'autre attribut, élément de la version actuelle du code, sont fournies. Ici, par exemple, un contenu incomplet sur HTML 5:

Les règles, comme vous le savez, sont nombreuses. Pour vérifier la conformité de votre site avec eux, vous pouvez utiliser des validateurs de site spéciaux.

Mais avant d'examiner leur travail, voyons combien il est important de mener à bien cette opération.

Le site doit-il être valide?

Il n’ya pas de consensus sur cette question, mais des raisons objectives indiquent qu’il est nécessaire de vérifier la validation du site.

La première chose à laquelle vous devriez prêter attention est la compatibilité dite du navigateur entre navigateurs. C'est à dire idéalement, le site devrait être affiché de manière égale dans tous les navigateurs. Dans ce cas, le respect des normes W3C garantit cette option.

Deuxièmement, les robots des moteurs de recherche reconnaissent le code HTML par les mêmes paramètres que les navigateurs. C'est à dire Si votre code contient des erreurs, par exemple des balises non fermées, des liens rompus ou une structure endommagée, tout cela peut affecter l'indexation du site par les moteurs de recherche. Ainsi, des erreurs grossières dans le code peuvent réduire la position de la ressource dans le problème.

Cependant, comme nous l'avons déjà vu, le W3C a beaucoup de règles et, parfois, leur respect n'est pas possible. Par conséquent, dans cette affaire, il est préférable de s'en tenir au milieu: corriger tout d'abord les erreurs grossières. Il est important de suivre la syntaxe correcte, de vérifier l'imbrication des balises, de conserver leur séquence et leur structure correctes.

Validateurs de code HTML et CSS

Dès le départ, il est préférable de surveiller le respect des règles. À la toute première étape du choix d’un thème WordPress pour votre blog, prenez le temps de vérifier la validité de son langage html et de son code css. Il est souhaitable que, initialement, le validateur html-code et css produisent le résultat suivant:

Après avoir installé les plugins et les add-ons, consultez également le blog pour identifier immédiatement les problèmes et leurs sources.

Pour vérifier la validation de la page, il existe différents services en ligne. Les plus fiables et les plus complets sont les validateurs du W3C.

Vous y trouverez des liens vers la page principale du site officiel - www.w3.org

Unicorn est un validateur combiné en russe (il a la fonction de changer de langue), qui donne des informations sur tous les paramètres du site.

Entrez l'URL du site et cliquez sur "Vérifier".

Le nombre d'erreurs (croix rouge) et les avertissements (point d'exclamation jaune) sont indiqués à droite.

Vous pouvez voir des informations détaillées sur les erreurs dans la liste déroulante sous chacune des options.

Le validateur html vérifie les erreurs sur la page spécifiée par l'URL et non sur l'ensemble du site.

Des informations plus détaillées sur les erreurs avec des invites peuvent être obtenues lors de la vérification de la validation du code CSS et HTML dans des programmes distincts.

Voici la description des erreurs et de leurs causes dans le validateur html:

Comme vous pouvez le constater, les informations sont en anglais. Chaque erreur ou avertissement se voit attribuer le numéro de ligne du code source dans lequel il se trouve (ligne 381, ligne 652). Tout d’abord, vous devez corriger les erreurs (icône rouge). Si vous ne savez pas quelle est l'erreur et comment y remédier, essayez de rechercher des informations sur des forums spécialisés ou posez des questions dans les commentaires de cet article.

Encore une fois, le validateur html diagnostique le code source et vous devez corriger les erreurs dans les fichiers pertinents de votre blog. Sur la façon de les trouver, nous avons discuté dans l'article sur.

Dans ce validateur, il est possible d'inclure des options supplémentaires:

• Vous pouvez regrouper les erreurs par type (grouper les messages d'erreur par type);
• afficher tout le code source utilisé par le service dans l'analyse (Afficher la source);
• vérifier les pages qui donnent une erreur (Valider les pages d'erreur).

De plus, la fonction incluse «Nettoyer le balisage avec Html-Tidy» vous permet de voir votre code avec des erreurs corrigées en fonction de la version du programme Html-Tidy. Certes, le W3C avertit que ce programme n'est pas leur développement et ne donne donc aucune garantie que le code sera correct. Cependant, ce code peut servir d'indice lors de la correction des erreurs.

Une option de correction d'erreur similaire est fournie par le validateur de code CSS du W3C. Vous n'avez pas besoin de l'activer, cela fonctionne par défaut.

En plus des validateurs de sites en ligne, il est également possible d'installer une extension pour FireFox, qui vérifiera les erreurs dans le code source de la page directement dans le navigateur. Cela s'appelle "Validateur HTML".

Je me souviens également qu’en plus du HTML et du CSS, il y en avait aussi. Sa présence est importante pour l'optimisation des moteurs de recherche.

Le sujet d'aujourd'hui est assez compliqué. Lorsque vous commencerez à corriger des erreurs, il y aura sûrement beaucoup de questions. Il est conseillé de corriger ce que vous êtes sûr de ne pas casser le site. N'oubliez pas de le faire avant d'apporter des modifications. Au revoir

P.S.  L'autre jour, nous avons pris des billets pour le Kamchatka en septembre à un prix avantageux de 16 600 aller-retour par personne. C'est très bon marché, ces prix ne sont plus depuis longtemps. Si quelqu'un est intéressé, je pense que vous pouvez toujours attraper de tels billets. Grimpez le long des volcans et admirez la nature sauvage intacte, nous serons avec le club de tourisme PIK.

La vérification de la validité du code HTML du site est nécessairement incluse dans mon Mais ne surestimez pas l’importance des erreurs de validation dans la promotion du référencement, c’est très petit. Sur n'importe quel sujet du TOP, il y aura des sites avec un grand nombre d'erreurs de ce type et bien vivre pour eux-mêmes.

MAIS! Le manque d'erreurs techniques sur le site est un facteur de classement, et il ne faut donc pas négliger cette opportunité. Il est préférable de réparer, ce ne sera certainement pas pire. Les moteurs de recherche verront vos efforts et donneront un petit signe plus au karma.

Comment vérifier le site sur la validité du code HTML

La validation du code de site est vérifiée à l'aide du service en ligne W3C HTML Validator. S'il y a des erreurs, le service vous en donne une liste. J'analyserai maintenant les types d'erreur les plus courants rencontrés sur les sites.

• Erreur: ID dupliqué min_value_62222

Et pour cette erreur un tel avertissement.

• Avertissement: la première occurrence de l'ID min_value_62222 était ici

Cela signifie qu'un identifiant de style est dupliqué, ce qui, selon les règles de validité HTML, doit être unique. Au lieu d'un identifiant pour les objets en double, vous pouvez utiliser CLASS.

Corriger cela est souhaitable, mais pas très critique. Si beaucoup de telles erreurs, il est préférable de le réparer.

De même, il peut y avoir de telles options:

• Erreur: ID dupliqué placeWorkTimes
• Erreur: ID dupliqué callbackCss-css
• Erreur: ID dupliqué Capa_1

Ce qui suit est un avertissement très commun.

• Avertissement: le type d'attribut n'est pas nécessaire pour les ressources JavaScript

C'est une erreur très courante lors de la vérification de la validation du site. Selon les règles HTML5, l'attribut type de la balise de script n'est pas nécessaire, il s'agit d'un élément obsolète.

De même, un tel avertissement pour les styles:

• Ce n'est pas nécessaire et devrait être omis.

La correction de ces avertissements est souhaitable, mais pas critique. Avec un grand nombre de meilleure solution.

• Avertissement: envisagez d'éviter les valeurs de la fenêtre d'affichage

Cet avertissement indique que vous ne pouvez pas augmenter la taille de la page sur un mobile ou une tablette. C'est-à-dire que l'utilisateur voulait voir une image plus proche ou un très petit texte et ne pouvait pas le faire.

Je trouve cet avertissement très indésirable, inconfortable pour l'utilisateur, il s'agit d'un inconvénient comportemental. Éliminé en supprimant ces éléments - maximum-scale = 1.0 et user-scalable = no.

• Cet article n'est la propriété d'aucun article.

Il s'agit d'un micro-marquage, l'attribut itemprop doit être à l'intérieur d'un élément avec itemscope. Je considère que cette erreur n'est pas critique et peut être laissée telle quelle.

• Avertissement: Les documents ne doivent pas être utilisés à propos de: legacy-compat, sauf s’ils sont générés par le système qui ne peut pas produire le doctype standard.

La chaîne about: legacy-compat est nécessaire uniquement pour les générateurs HTML. Ici, il vous suffit de faire mais l'erreur n'est pas critique.

• Erreur: source de balise de fin dispersée

Si vous regardez dans le code du site lui-même et trouvez cet élément, vous pouvez voir qu'une seule balise   enregistré en tant que paire - ce n'est pas vrai.

En conséquence, vous devez supprimer la balise de fermeture du code.. De même à cette erreur, des tags peuvent se produire

• Erreur: Un attribut, à moins que ce ne soit dans certaines conditions. Pour plus de détails, consultez les instructions sur le texte.

Toutes les images doivent avoir l'attribut alt, je considère cette erreur comme critique, il faut la corriger.

• Erreur: Elément ol dans ce contexte. (Suppression des erreurs supplémentaires dans cette sous-arborescence.)

Ce n'est pas correctement orthographié balises imbriquées. Dans

  devrait seulement être
• . Dans cet exemple, ces éléments ne sont pas du tout nécessaires.

  

  De même, il peut encore y avoir de telles erreurs:

  • Élément h2 ul. Dans ce contexte.
  • Élément dans ce contexte.
  • L'élément noindex li dans ce contexte.
  • Élément dans ce contexte.

  Tout cela doit être corrigé.

  • Erreur: URL d'attribut à ce stade

  

  L'attribut http-equiv n'est pas destiné à un méta-élément, vous devez le supprimer ou le remplacer.

  Erreurs similaires:

  • Erreur: Attribut n2-lightbox
  • Erreur: l'attribut asyncsrc n'est pas autorisé sur le script d'élément à ce stade.
  • Erreur: Prix attribut à ce stade.
  • Erreur: La chaîne de hachage d'attribut n'est pas autorisée sur l'étendue de l'élément à ce stade.

  Ici, vous devez également supprimer les attributs de n2-lightbox, asyncsrc, price, hashstring ou les remplacer par d'autres options.

  • Erreur: balise de démarrage incorrecte en tête

  Ou comme ceci:

  • Erreur: balise de début incorrecte dans la tête de division

  

  Les tags Img et div ne doivent pas être en . Cette erreur doit être corrigée.

  • Erreur: CSS: Erreur d'analyse

  

  Dans ce cas, il ne devrait pas y avoir de point-virgule après le crochet dans les styles.

  Eh bien, une telle erreur, une bagatelle, mais pas sympa) Voyez par vous-même, vous devez le supprimer ou non, il n'aura aucun rôle absolu dans la promotion du site.

  • Avertissement: l'attribut charset sur l'élément de script est obsolète

  Les scripts n'ont plus besoin de prescrire l'encodage, c'est un élément obsolète. L'avertissement n'est pas critique, à votre discrétion.

  • Erreur: l'attribut de script de script d'élément non défini src est également spécifié

  Dans cette erreur, l'attribut charset = "uft-8" doit être supprimé du script, car il montre le codage en dehors du script. Je pense que cette erreur doit être corrigée.

  • Attention: titre vide

  

  Voici un en-tête h1 vide. Besoin d'enlever les étiquettes

    ou mettez un titre entre eux. L'erreur est critique.
  • Erreur: balise de fin br

  

  La balise br est unique et est conçue comme si vous fermiez les doubles. Besoin de retirer / de la balise.

  • Erreur: La référence au caractère nommé ne se termine pas par un point-virgule. (Ou aurait dû être échappé que &.)

  

  Ce sont des caractères HTML spéciaux, vous devez écrire correctement ou copier. Mieux vaut corriger cette erreur.

  • Erreur fatale: Impossible de récupérer après la dernière erreur. Toute autre erreur sera ignorée

  C'est une grave erreur:

  

  Après  il ne devrait y avoir rien du tout, puisqu'il s'agit de la dernière balise de page de fermeture. Il est nécessaire de tout supprimer ou de le transférer plus haut.

  • Erreur: CSS: à droite: seul 0 peut être une unité. Vous devez mettre une unité après votre numéro

  Vous avez besoin d'une valeur en px pour écrire:

  

  Voici une erreur similaire:

  • Erreur: CSS: margin-top: seul 0 peut être une unité. Vous devez mettre une unité après votre numéro
  • Erreur: élément non fermé a

  Les pages de tous les sites Internet sont ornées d’un code spécial, écrit selon les règles HTML normalisées.

  Quelle est la validité?

  La validation est un test de conformité aux normes établies et, dans le contexte utilisé par les webmasters, à l’exactitude du code de page: erreurs de syntaxe, imbrication de balises, etc. Si tout est fait "correctement", le code de page ne doit pas contenir d’attributs, de constructions et d’erreurs incorrects. La validation du site Web révèle des défauts qui doivent être corrigés.

  La validité du site Web est la conformité du code aux normes HTML existantes.

  Vous pouvez savoir s'il y a des commentaires ou des erreurs dans le code de la page Web, que ce soit en ligne ou sans accès à Internet et à l'aide de programmes hors ligne.

  Que sont les validateurs de code?

  Le validateur de code est un programme à l'aide duquel vous pouvez vérifier la conformité du code HTML des pages et du code CSS aux normes modernes. Il trouve et corrige les éléments incorrects, en indiquant leur emplacement et en formulant exactement ce qui est mal décoré.

  Les principaux "signes" de la mise en page valide

  Une mise en page valide contient un code qui est totalement conforme aux exigences du Consortium W3C (World Wide Web Consortium), qui élabore des normes technologiques pour l’ensemble de l’Internet.

  Si le code sur les pages du site est correct, alors dans tous les navigateurs, le site est affiché correctement (et non de travers).

  Il n'y a aucune suspicion d'une "baisse" injuste dans le numéro et il n'y a aucune page, jetée hors de l'index.

  Un exemple En supposant que les balises sont incorrectes

  ..

  ,   (en particulier, il n'y a pas d'élément de fermeture), le moteur de recherche ne corrigera rien - il sera interprété comme écrit en noir et blanc dans le code. En conséquence, la promotion du site peut avoir des conséquences.

  Une mise en page valide est-elle importante dans la promotion de sites Web?

  En théorie, oui, mais en pratique, il se trouve que de nombreux sites comportent des erreurs de validation en haut, et que les sites contenant des erreurs se déplacent généralement bien. Les problèmes liés à la promotion ne peuvent se produire que si votre site est affiché de manière incorrecte sur certains types d'appareils ou dans un type de navigateur. Si cela a l'air génial, mais qu'il y ait des erreurs de validation, cela n'aura aucun impact sur la promotion.

  

  Certains webmasters ont délibérément exploré cette question en essayant de déterminer si les résultats du classement dépendaient des résultats de la validation. Le webmaster Mark Daost a noté que la validité du code n'était pas critique. Et Shaun Anderson, au contraire, est arrivé à la conclusion que la validité est un baume pour le site en termes d’émission de positions.

  Un autre expert, Mike Davidson, a également mené une expérience similaire et a conclu que Google classait les pages en fonction de la qualité de leur rédaction. Par exemple, une balise non fermée peut entraîner la perception d'un contenu comme valeur de cette balise.

  Ce webmaster a tiré une conclusion très importante:

  Il est impossible de dire avec précision à quel point le classement dépend de la validité du code, mais il est absolument certain que les lacunes existantes peuvent entraîner le départ de pages ou de l'ensemble du site de l'index des moteurs de recherche.

  Pourquoi ai-je besoin d'un code valide

  Un code valide vous permet d'afficher correctement les pages dans les navigateurs (et les styles d'un site CSS peuvent ne pas s'afficher correctement).

  Et il est fort possible que dans un navigateur, votre site s'affiche de la manière que vous avez configurée et dans l'autre, de manière totalement différente. L'image peut être asymétrique et le contenu peut devenir complètement illisible.

  En conséquence, vous perdez le trafic de ce navigateur. De plus, le facteur comportemental, qui est l’un des trois facteurs les plus importants du référencement, influe considérablement sur les résultats du problème.

  Imaginez que les visiteurs accèdent à votre site et le ferment immédiatement car il est impossible de percevoir les informations - grâce aux erreurs de code. Ou ils reviennent généralement au moteur de recherche, car aucune solution n'a été trouvée. Tout ceci nuira aux services, car le facteur comportemental finira par altérer la position du site.

  Comment vérifier la validité du site

  Pour vérifier l’intégrité du code, un site de validation très utile, le «Service de validation de balisage», situé à l’adresse http://validator.w3.org, créée par le W3C, est le plus souvent utilisé.

  

  HTML

  Voici trois options pour la validation:

  • entrez l'URL de la page;
  • téléchargez le fichier avec le code de votre ordinateur;
  • insérez le code prêt dans le formulaire.

  Le service indique non seulement les erreurs du code html et leur emplacement, mais donne également des conseils sur la résolution des problèmes.  Si le code est déjà disponible sur le Web, vous pouvez valider en saisissant son adresse URL dans le formulaire «Valider par URL», puis en cliquant sur le bouton Vérifier. Le validateur HTML activera la lecture du code et rapportera les résultats.

  Vous devez entrer l'URL de l'URL en cours de vérification. L'ensemble du site ne sera pas vérifié. Entrez l'adresse du site - le programme n'est que sa page principale. Si des commentaires sont trouvés, un avis indiquant que le code du programme est invalide est émis, puis les lignes contenant les erreurs autorisées sont indiquées.

  

  Cette vidéo explique clairement le processus de vérification à l'aide d'un validateur:
  

  Vérifier les fichiers locaux

  À la même adresse, http://validator.w3.org, vous pouvez vérifier le code en sélectionnant l'onglet «Valider par téléchargement de fichier» et en chargeant le document avec le code enregistré.

  

  Sélectionnez le chemin d'accès au fichier requis et cliquez sur Vérifier. Ensuite, tout se passe de la même manière.

  Utiliser le formulaire pour entrer le code

  Parfois, il est plus pratique d’insérer immédiatement le code de page et de le vérifier en ligne: sélectionnez l’onglet «Valider par saisie directe» et envoyez tout le code au serveur.

  CSS

  La validation du code CSS peut également être passée par le validateur en ligne: https://jigsaw.w3.org/css-validator/

  

  Tout ici est en russe, pour beaucoup c'est une très agréable surprise.

  Encore une fois, vous pouvez choisir - indiquez l’URL, téléchargez votre fichier ou insérez le code.

  Le site est vérifié pour les erreurs, comme c'est le cas avec HTML, et nous obtenons une réponse du serveur. Il n’existe aucun paramètre de vérification. Toutefois, nous pouvons examiner le code valide généré proposé situé après la liste des défauts de code.

  

  Nous étudions le code résultant et apportons la source à la forme désirée.

  Extensions du navigateur

  Pour les navigateurs, il y a toutes sortes d'extensions à valider. Pour Google Chrome, il existe le plug-in HTML Tidy Browser Extension qui vérifie la validité du code, l'extension Validator pour Opera, Zappatic pour Safari et le validateur HTML pour Firefor.

  Laissez-nous nous attarder sur ce dernier plus en détail. Il effectue la même validation que le validateur, uniquement hors ligne. Vous pouvez le prendre ici. http://users.skynet.be/mgueury/mozilla/

  Installez l'extension, redémarrez le navigateur - et vous pouvez travailler immédiatement. En cas de problème lors de l'installation, vous pouvez écrire au support technique de Mozilla Firefox ou naviguer sur le forum. http://forum.mozilla-russia.org/doku.php?id=general:extensions_installing

  Vidéo détaillée sur l'installation de HTML Validator et son utilisation:

  Lorsque vous chargez une URL, l'extension est automatiquement activée et lit le code. Le résultat est visible dans le coin supérieur droit.

  Le résultat ressemble à une petite image avec le résultat de la validation:

  

  En cliquant sur le résultat, vous pouvez ouvrir:
    - code source;
    - erreurs - dans le bloc inférieur gauche (ou un message sur la validité);
    - conseils de correction d'erreur - en bas à droite.

  

  Comment réparer les erreurs les plus courantes

  Peu importe la manière dont le code est vérifié, les erreurs sont répertoriées. En outre, une chaîne avec un bogue est indiquée.

  Avant de modifier le code, au cas où, créez une copie de sauvegarde du modèle de site.

  Dans l'extension pour Firefox, lorsque vous cliquez sur le nom de l'erreur dans la fenêtre ouverte de l'extension, vous êtes automatiquement projeté sur une ligne contenant un code non valide.

  

  Des astuces pour corriger ces erreurs sont indiquées.
    Je vais donner quelques exemples.

  1. Pas d'espace entre les attributs.
    ... rel = "icône de raccourci" href = "http://arbero.ru/favicon.ico" type = "image / x-icon"

  Ici, les correctifs suppriment le "point-virgule".

  2. Balise de fin pour l'élément "div" non ouvert

  La balise div de clôture est superflue. Nous l'enlevons.

  Connaissez-vous mal l'anglais (et tout y est toujours décrit)? Copiez le code d'erreur et collez-le dans le moteur de recherche. Un sujet similaire a probablement déjà été décrit par un webmaster ou un concepteur de modèle, vous trouverez donc toujours un moyen de résoudre le problème avec des ressources spécialisées.

  Bien que, honnêtement, je ne dépenserais pas beaucoup d’efforts pour corriger les erreurs dans le code. Mieux vaut simplement s’assurer que le site est correct sur tous les appareils et tous les navigateurs.

  Salut Je vais immédiatement répondre à votre question: est-ce que cela vaut la peine de vous lire cette leçon? Accédez à un service très utile et gratuit, entrez l'adresse de votre site et si vous constatez des erreurs sur votre site, le cours mérite d'être lu. Exemples d’affichage d’erreurs à l’aide de ce validateur en ligne:

  

  Sur mon blog maintenant, il n'y a plus de telles erreurs, je m'en suis débarrassé (il y avait plus de 70 erreurs et plus de 80 avertissements). Pour clarifier, je vais vous dire ce qu'est un code valide et pourquoi nous en avons besoin.

  Un code valide est un code conforme aux normes.

  Pour la validité, vous pouvez vérifier HTML, CSS, toutes sortes de micromarking et plus. Aujourd'hui, je vais parler de validité HTML.

  • Le code valide est facultatif, mais le nombre d'erreurs doit être minimal, sinon votre site ne sera pas inter-navigateur. La validité du code est principalement nécessaire pour garantir que votre site s'affiche correctement dans tous les navigateurs.
  • Les robots de recherche "parlent" avec votre site en HTML, il est donc important d'indiquer clairement le contenu du site avec toutes les "balises fermées", etc.
  • La validité HTML affecte le référencement, mais de manière relativement insignifiante (à moins bien sûr que vous ayez des centaines voire des milliers d'erreurs). Je recommande de lire les observations intéressantes de Devaki "L'influence de la qualité HTML sur leur classement."
  • Lorsque j'ai rendu le code valide sur mon site, j'ai trouvé et corrigé mes erreurs stupides (balises dupliquées, lettres manquantes, etc.).
  • Vous ne devez pas "vous déchirer * omettre", si une erreur est difficile à corriger, sinon sa réparation nuirait à la fonctionnalité du site. L'essentiel est d'être pratique pour l'utilisateur.

  Ci-dessous, je passerai en revue les principales erreurs signalées par le validateur. Si tout à coup il n'y a plus d'erreur dans la liste ci-dessous, écrivez-la dans les commentaires, nous essaierons de la résoudre ensemble et j'ajouterai une solution à ce problème dans cette leçon. En passant, oui, les erreurs signalées par le validateur W3C sont les suivantes:

  

  Chaque erreur a un indice - il s’agit du numéro de la ligne dans le code source de la page. Vous pouvez déjà en déterminer approximativement le fichier de thème dans lequel se trouve la chaîne donnée. Le code source de la page est recherché à l'aide de CTRL + U (dans les principaux navigateurs).

  

  Avant de commencer, créez une copie de sauvegarde de votre modèle de site.

  De plus, pour simplifier la recherche d’erreurs dans le code source, vous pouvez utiliser le validateur HTML pour Mozilla Firefox. Après l'avoir installé, en allant au code source de la page, vous verrez les mêmes erreurs, qui sont indiquées par le service validator.w3.org. En cliquant sur le nom de l'erreur (dans le coin inférieur gauche), vous serez automatiquement transféré sur la ligne où se trouve le code invalide.

  

  Rechercher des erreurs en HTML à l'aide du validateur w3c et les corriger

  Recherchez votre erreur dans la liste ci-dessous et cliquez dessus. Vous "ferez défiler" automatiquement si nécessaire.

  1. Pas d'espace entre les attributs.

  ... rel = "icône de raccourci" href = "http://arbero.ru/favicon.ico"; type = "image / x-icon" Supprimez simplement le "point-virgule".
  

  2. L'attribut width sur l'élément td est obsolète. Utilisez CSS à la place.

  td valign = "center" width = "80" height = "80"\u003e

  Similaire nous transformons à la forme

  td style = "align: center; width: 80; height: 80;"\u003e
  

  3. Un attribut img element, sauf sous certaines conditions. Pour plus de détails, consultez les instructions relatives aux alternatives de texte pour les images.

  Une des erreurs les plus courantes. Il n'y a tout simplement pas assez de texte alternatif pour l'image. Enregistrer la balise alt.
  

  4. La section manque de titre. Envisagez d'utiliser des éléments h2-h6 pour ajouter des en-têtes d'identification à toutes les sections.

  section id = "comments"\u003e

  À l'intérieur du bloc de section doit contenir quelque chose des balises h2-h6, si elles ne sont pas présentes, il suffit de renommer le mot section en div.

  5. L'élément hgroup est obsolète. Pour baliser les sous-positions, considérons la sous-position de la sous-position après l'élément h1-h6 contenant la position principale,

  il n'y a pas besoin de sous-titre par exemple, mais pas de sous-titre. Pour regrouper des en-têtes et des sous-titres, des titres alternatifs ou des slogans, envisagez d'utiliser des éléments ou des éléments.

  Similaire au paragraphe précédent. Il suffit de changer la phrase hgroup en div. Vous pouvez utiliser l'outil Rechercher / Remplacer tout dans un éditeur de texte pour accélérer ces processus.
  

  6. Elément "noindex" non défini

  Pour rendre la balise noindex valide, nous l'écrivons sous forme de commentaire, à savoir:

  Nous n'indexons pas

  7. Balise de fin pour l'élément "div" non ouvert

  La balise div de clôture est superflue. Nous l'enlevons.
  

  8. Le type de document n'autorise pas l'élément "li" ici; manque un des "ul", "ol", "menu", "dir" start-tag

  Utilisation incorrecte de la balise "li": balise "ul" manquante, balise "ol", etc. Vérifiez.
  

  9. Balise de fin pour "div" omise, mais OMITTAG NO a été spécifié

  La balise div de fermeture est manquante.
  

  10. Il n'y a pas d'attribut "frontière"

  alt = "" width = "1" height = "1" border = "0" /\u003e

  Supprimez simplement la phrase border = "0".

  11. caractère "<" is the first character of a delimiter but occurred as data

  Ne pas utiliser le tag "<" перед обычными словами, используйте лучше разные кавычки.
  

  12. Saw "lorsqu’on attend un nom d’attribut. Cause probable: = manquant immédiatement avant.

  Excédent de citation, supprimez-le.
  

  13. L'attribut align de l'élément est obsolète. Utilisez CSS à la place.

  N'utilisez pas la valeur align dans la balise img. Écrivez-le séparément, sous cette forme:

  voici la photo (img src)

  14. Valeur incorrecte pour l'attribut href sur le lien d'élément: Caractère illégal dans le segment de chemin: pas un point de code d'URL.

  Conclusion

  Si vous avez une erreur sur le site qui ne figure pas dans cette liste, écrivez dans les commentaires. Nous comprendrons et je compléterai l'article. Je répète, si une erreur ne peut pas être corrigée, ne vous inquiétez pas.

  J'ai eu une erreur sur mon blog (bien que pour une raison quelconque, le code était toujours sans erreur hier):

  Le format était le suivant: espace attendu, tabulation, nouvelle ligne ou barre oblique mais trouvé.< instead.

  Si vous savez comment résoudre ce problème, je vous en serai reconnaissant. Je suis un peu perfectionniste. 🙂

  Rendrez-vous le code HTML du site valide?

  Je souhaite que vous receviez du code HTML valide sur votre site, dont la notification ressemble à ceci:

  P.s. Avez-vous souvent surcharger votre corps? Ensuite, vous avez besoin d'un programme de désintoxication. Restaurez la force et l'équilibre énergétique.

  Bonjour chers amis! Content de te voir sur mon blog! Aujourd'hui, nous allons parler de validité HTML  sur le site dans son ensemble et ses pages individuelles. La validité est la conformité d'un code à certaines normes. Le World Wide Web Consortium (W3C) travaille au développement de normes Web - une communauté internationale d’organisations, de membres du personnel et du public.

  Le consortium a pour mission de libérer tout le potentiel du World Wide Web en élaborant et en mettant en œuvre des protocoles et des directives assurant la croissance à long terme d’Internet.

  Le site Web officiel du W3C fournit des outils en ligne très utiles aux webmasters, dont l’un est un validateur, un service gratuit qui vous permet de vérifier l’engagement du site envers les normes Web modernes.

  

  Malheureusement, le service est entièrement en anglais, mais si vous connaissez un peu le développement et la mise en page, vous en comprendrez certainement l'essence et le message

  Donc, sur la page principale, il y a trois onglets:

  1. Valider par URI - vérifiez l'URL spécifiée;
  2. Valider par téléchargement de fichier - vérifiez le fichier téléchargé;
  3. Valider par saisie directe - vérification par saisie directe du code source.

  Pour lancer l'analyseur, vous devez basculer vers l'onglet requis. À titre d'exemple, je vais envisager de vérifier l'URL. Sous le lien Plus d'options, des options supplémentaires sont masquées; cliquez dessus pour accéder aux paramètres:

  • Encodage de caractères - encodage de caractères. WordPress utilise UTF-8, mais vous pouvez laisser la valeur par défaut «Détecter automatiquement» pour détecter automatiquement le codage.
  • Type de document - type de document (HTML, XHTML, SVG, etc.). Activez la case à cocher Uniquement si manquant si le type de document n'est pas spécifié sur la page et que vous devez le définir manuellement pour vérification.
  • Lister les messages séquentiellement - affiche les erreurs et les avertissements dans une liste séquentielle;
  • Grouper les messages d'erreur par type - regroupez les erreurs et les avertissements par type;
  • Show Source - Afficher le code source;
  • Afficher le contour - affiche la structure du document;
  • Nettoyer le balisage avec HTML Tidy - nettoyer le balisage avec HTML Tidy;
  • Valider les pages d'erreur - vérifier les pages contenant des erreurs, par exemple 404;
  • Sortie verbeuse - sortie détaillée. Pour être honnête, je n’ai pas remarqué la différence lorsque cette option est activée, si vous savez de quoi elle est responsable - partagez-la dans les commentaires, je vous en serai très reconnaissante.

  Lorsque tous les paramètres sont définis, cliquez sur le bouton Vérifier pour lancer le validateur HTML. Si le document ne contient pas d'erreur, le message suivant apparaîtra:

  Vérification du document terminée. Aucune erreur ou avertissement à afficher.

  Traduit en russe, cela signifie: «La vérification de la documentation est terminée. Aucune erreur ou avertissement trouvé. ” Génial!

  Au cas où le document ne réussirait pas le test, nous verrons une inscription simple à propos de son achèvement:

  Et bien sûr, une liste de messages contenant des informations sur les erreurs et les avertissements accompagnés d'explications, ainsi que des liens vers des lignes de documents spécifiques, mais uniquement si l'option Afficher la source était activée.

  La capture d'écran ci-dessous montre un fragment de la vérification de la page principale de Yandex. C'est étrange de le voir, je ne m'y attendais même pas, car Yandex participe lui-même au développement des normes W3C ... Bon, d'accord, il est très difficile de respecter toutes les normes, en particulier pour un portail aussi volumineux.

  

  Au début de son parcours, le blog du Free Webmaster contenait de nombreuses erreurs et avertissements. En étudiant, j'ai réussi à en réduire le nombre et à m'en débarrasser. Je continuerai de respecter les normes W3C, bien que certains plugins ajoutent une cuillerée de goudron à un baril de miel ... Le temps nous le dira!

  Alors pourquoi devrions-nous code valide? La validation des documents Web est une étape importante qui peut considérablement contribuer à améliorer et à assurer leur qualité, tout en faisant économiser beaucoup de temps et d’argent. Certains experts affirment que le code correct peut affecter les résultats de la recherche! Consultez votre site et parlez des résultats!