Ce înseamnă că codul nu este valabil? Ce sunt valabilitatea și validarea și de ce sunt necesare? cale. Service validator.w3.org

Bună ziua tuturor!

Verificarea validității codului HTML este necesară pentru, deoarece roboții de căutare văd doar codul HTML. Din acest motiv, este indicat să puneți codul site-ului în ordine completă. Serviciile online speciale care verifică codul și indică în mod specific erorile ne vor ajuta în acest sens.

Unul dintre aceste servicii este validator.w3.org, care este probabil cel mai bun. Este în întregime în limba engleză, așa că unii pot avea probleme în lucrul cu el, dar nu vă alarmați: validatorul vă va arăta atât numărul liniei, cât și eroarea în sine.

Codul valid este un cod care îndeplinește toate standardele.

Pentru lecție veți avea nevoie de următorul material:

Serviciul online menționat mai sus verifică codul HTML online pe întregul site. Trebuie doar să specificați domeniul site-ului dvs. și să faceți clic pe butonul „Verifică”, astfel încât să începeți să verificați codul HTML al site-ului.

Validatorul oferă, de asemenea, o caracteristică foarte interesantă - verificarea fișierelor site-ului de pe un computer local. În opinia mea, acest instrument va fi util celor care realizează site-uri web personalizate. Înainte de a trimite comanda, trebuie să verificați totul, deoarece doriți ca oamenii să fie întotdeauna mulțumiți de munca dvs. Puteți verifica fișierele accesând fila „Validare prin încărcare fișier”:

Cum să remediați erorile din codul HTML?

Serviciul W3c Validator mi-a arătat două erori și mi-a dat 8 avertismente. Voi încerca să le repar și să vă arăt cum se face.

Remedierea erorii „Stilul elementului nu este permis ca copil al elementului div în acest context. (Suprimarea erorilor ulterioare din acest subarbore.)”. Această eroare îmi spune că nu este nevoie să specificați stiluri în codul HTML, și anume în etichetă. Prin urmare, stilurile care sunt scrise în acest bloc trebuie să fie transferate în fișierul style.css și asta este tot.

Validatorul indică, de asemenea, unde este exact eroarea:

În acest fel, puteți găsi și remedia erorile de cod HTML. Dar site-urile constau nu numai din cod de marcare, ci și CSS, așa că verificăm și foile de stil în cascadă ale resursei web.

Se verifică valabilitatea codului CSS

De asemenea, puteți verifica validitatea codului CSS în validatorul W3c. Puteți face acest lucru folosind acest link. Principiul de funcționare este același: specificați adresa URL a site-ului sau selectați un fișier pe computer și faceți clic pe butonul „Verifică”.

Spre deosebire de același validator HTML, validatorul CSS este în rusă.

Erori și avertismente CSS

La verificarea validității codului CSS, serviciul produce un număr mare de erori și avertismente. Am primit 23 de erori și până la 281 de avertismente. La prima vedere, acest lucru poate părea mult și poate fi chiar înfricoșător, dar majoritatea acestor erori și avertismente sunt afișate doar pentru că serviciul nu cunoaște anumite proprietăți care se aplică diferitelor browsere.

În cazul meu, majoritatea celor 281 de avertismente sunt proprietăți CSS pentru afișare normală în diferite browsere:

Serviciul poziționează etichete ca „extensie de furnizor necunoscută”. Prin urmare, dacă, atunci când vă verificați fișierele CSS, vedeți un număr mare de astfel de erori, atunci nu vă alarmați. Totul e bine.

Nu voi enumera cele mai frecvente erori și modalități de a le elimina, deoarece soluțiile fiecăruia pot fi diferite și trebuie să vă uitați la codul HTML în sine pentru a înțelege ce se întâmplă.

Dacă nu puteți rezolva o eroare, atunci împărtășiți problema în comentariile la lecție, poate vom găsi o soluție împreună.

Sper că lecțiile care au fost publicate în această săptămână v-au fost utile și au ajutat la rezolvarea anumitor probleme.

Ei bine acum, la revedere!

Articolul anterior
Articolul următor

Verificarea validității codului HTML al site-ului este inclusă în mod obligatoriu în . Dar nu este nevoie să supraestimăm semnificația erorilor de validare în promovarea SEO - este foarte mică. Pentru orice subiect din TOP vor exista site-uri cu un număr mare de astfel de erori și trăiesc bine.

DAR! Absența erorilor tehnice pe site este un factor de clasare și, prin urmare, această oportunitate nu trebuie neglijată. Este mai bine să o repari, cu siguranță nu se va înrăutăți. Motoarele de căutare îți vor vedea eforturile și îți vor oferi un mic plus în karma ta.

Cum să verificați un site pentru validitatea codului HTML

Codul site-ului este validat folosind serviciul online W3C HTML Validator. Dacă există erori, serviciul vă oferă o listă. Acum voi analiza cele mai frecvente tipuri de erori pe care le-am întâlnit pe site-uri.

Eroare: ID duplicat min_value_62222

Și în spatele acestei erori există un avertisment.

Avertisment: prima apariție a ID min_value_62222 a fost aici

Aceasta înseamnă că este duplicat ID-ul identificatorului de stil, care, conform regulilor de valabilitate html, trebuie să fie unic. În loc de ID, puteți folosi CLASS pentru obiecte duplicate.

Corectarea acestui lucru este de dorit, dar nu foarte critică. Dacă există o mulțime de astfel de erori, atunci este mai bine să le corectați.

În mod similar, pot exista și alte opțiuni:

Eroare: ID duplicat placeWorkTimes
Eroare: ID duplicat callbackCss-css
Eroare: ID duplicat Capa_1

Următorul este un avertisment foarte comun.

Avertisment: atributul type nu este necesar pentru resursele JavaScript

Aceasta este o greșeală foarte frecventă la verificarea validării site-ului web. Conform regulilor HTML5, atributul type nu este necesar pentru eticheta de script, este un element depreciat.

Avertisment similar pentru stiluri:

Avertisment: Atributul type pentru elementul de stil nu este necesar și ar trebui să fie omis

Corectarea acestor avertismente este de dorit, dar nu critică. Dacă există o cantitate mare, este mai bine să o corectați.

Avertisment: Luați în considerare evitarea valorilor ferestrelor de vizualizare care împiedică utilizatorii să redimensioneze documentele

Acest avertisment indică faptul că nu puteți crește dimensiunea paginii pe mobil sau tabletă. Adică, utilizatorul a dorit să privească mai atent imaginile sau textul foarte mic și nu poate face acest lucru.

Mi se pare foarte nedorit acest avertisment, este incomod pentru utilizator și este un minus din motive de comportament. Eliminat prin eliminarea acestor elemente - maximum-scale=1.0 și user-scalable=no.

Eroare: a fost specificat atributul itemprop, dar elementul nu este o proprietate a niciunui articol

Acesta este un micro-markup, atributul itemprop trebuie să fie în interiorul elementului cu itemscope. Cred că această eroare nu este critică și poate fi lăsată așa cum este.

Avertisment: documentele nu ar trebui să utilizeze about:legacy-compat, cu excepția cazului în care sunt generate de sisteme vechi care nu pot scoate tipul standard de document

Linia about:legacy-compat este necesară doar pentru generatoarele html. Aici trebuie doar să o faci, dar eroarea nu este deloc critică.

Eroare: sursă etichetă finală rătăcită

Dacă vă uitați în codul site-ului în sine și găsiți acest element, puteți vedea că o singură etichetă este scrisă ca o pereche - acest lucru nu este corect.

În consecință, trebuie să eliminați eticheta de închidere din cod. Similar cu această eroare, pot apărea etichete

Eroare: un element img trebuie să aibă un atribut alt, cu excepția anumitor condiții. Pentru detalii, consultați îndrumările privind furnizarea de alternative de text pentru imagini

Toate imaginile trebuie să aibă un atribut alt, consider că această eroare este critică și trebuie corectată.

Eroare: elementul ol nu este permis ca element secundar al elementului ul în acest context. (Suprimând erori suplimentare din acest subarboresc.)

Imbricarea etichetelor este incorectă aici. ÎN

. În acest exemplu, aceste elemente nu sunt deloc necesare.

În mod similar, pot exista și alte erori ca aceasta:
- Elementul h2 nu este permis ca copil al elementului ul în acest context.
- Elementul a nu este permis ca copil al elementului ul în acest context.
- Elementul noindex nu este permis ca copil al elementului li în acest context.
- Elementul div nu este permis ca copil al elementului ul în acest context.
Toate acestea trebuie corectate.
- Eroare: atributul http-equiv nu este permis în meta elementul în acest moment
Atributul http-equiv nu este destinat elementului meta, el trebuie eliminat sau înlocuit.

Erori similare:
- Eroare: atributul n2-lightbox nu este permis pe elementul a în acest moment.
- Eroare: atributul asyncsrc nu este permis în scriptul elementului în acest moment.
- Eroare: prețul atributului nu este permis pentru opțiunea elementului în acest moment.
- Eroare: Atributul hashstring nu este permis în intervalul de elemente în acest moment.
De asemenea, aici trebuie să eliminați atributele n2-lightbox, asyncsrc, price, hashstring sau să le înlocuiți cu alte opțiuni.
- Eroare: etichetă de pornire greșită în imaginea din cap
Sau cam asa:
- Eroare: etichetă de pornire greșită în div în head
Etichetele img și div nu ar trebui să fie în . Această eroare trebuie corectată.
- Eroare: CSS: Eroare de analiză
În acest caz, nu ar trebui să existe un punct și virgulă după paranteză în stiluri.

Ei bine, o astfel de greșeală, un fleac, dar nu plăcut) Vedeți singur dacă trebuie eliminat sau nu, nu va avea niciun impact asupra promovării site-ului.
- Avertisment: atributul charset de pe elementul de script este învechit
Nu mai este nevoie să specificați codarea în scripturi, acesta este un element învechit. Avertismentul nu este critic, la discreția dvs.
- Eroare: scriptul elementului nu trebuie să aibă un set de caractere de atribut decât dacă este specificat și atributul src
În această eroare, trebuie să eliminați atributul charset="uft-8" din script, deoarece arată codificarea în afara scriptului. Cred că această greșeală trebuie corectată.
- Avertisment: titlu gol
Iată un antet h1 gol. Trebuie să eliminați etichetele sau să puneți un titlu între ele. Eroarea este critică.
- Eroare: eticheta de final br
Eticheta br este singură, dar este făcută ca și cum ar închide o pereche. Trebuie să eliminăm/din etichetă.
- Eroare: referința la caracterul numit nu a fost terminată cu punct și virgulă. (Sau & ar fi trebuit să fie scăpat ca &.)
Acestea sunt caractere HTML speciale, trebuie să le scrieți corect sau să le copiați. Este mai bine să remediați această greșeală.
- Eroare fatală: nu se poate recupera după ultima eroare. Orice erori suplimentare vor fi ignorate
Aceasta este o eroare gravă:

Nu ar trebui să existe nimic după ea, deoarece aceasta este ultima etichetă de închidere a paginii. Trebuie să ștergeți totul după el sau să îl mutați mai sus.
- Eroare: CSS: dreapta: doar 0 poate fi o unitate. Trebuie să puneți o unitate după numărul dvs
Trebuie să scrieți valoarea în px:

Iată o eroare similară:
- Eroare: CSS: margin-top: doar 0 poate fi o unitate. Trebuie să puneți o unitate după numărul dvs
- Eroare: element neînchis a
Codul HTML valid este un cod care îndeplinește toate standardele W3C (World Wide Web Consortium). Peste tot există standarde: pe Internet - valabilitate, în limbi - gramatică, în întreprinderi - standarde de stat.

Blogurile/site-urile care verifică validitatea codului și cu cel mai bun succes reduc erorile la minim vor respecta standardele World Wide Web, astfel de site-uri vor fi afișate corect în toate browserele, încărcarea va crește, ceea ce în viitor va au un efect bun asupra factorilor comportamentali și asupra sistemului de clasare în motoarele de căutare. Codul HTML al site-ului web care are multe erori HTML și CSS este considerat nevalid.

Blogul meu a avut 340 de erori și 240 de avertismente. Nu am putut scrie articole timp de o săptămână întreagă, am fost într-o dispoziție zero, am deschis site după site, am citit, dar nu am putut ajunge la fund. Pe al sutelea site, acum nici măcar nu voi da un link către site, este păcat, desigur, autorul a subliniat atât de bine esența problemei, încât chiar și un începător și-ar putea da seama.

La început au existat gânduri: „Am dat-o în bară singur”. Dar când am eliminat încet eroare după eroare, mi-am dat seama că am primit multe cadou de la designerii de layout sau de la autorul șablonului.
Cum să faci un cod html valid online
Puteți verifica validitatea codului HTML al site-ului web folosind validatorul standard oficial W3C. Urmați linkul >>> către serviciul online. Verificați marcajul (HTML, XHTML, ...) documentelor web. În linia de adresă, introduceți adresa URL a site-ului dvs. și faceți clic pe „Verifică”.
Cum să remediați erorile de validitate a codului html
În articol, voi descrie metoda mea de a crea cod valid. Accesați pagina principală a blogului dvs. și utilizați combinația de taste Ctrl+U pentru a deschide codul sursă al site-ului. Ne uităm la ce linie de erori și avertismente în validator

Găsim linia necesară în codul sursă, o copiem, deschidem orice editor vizual de cod HTML online, lipim codul în editor și ne uităm la rezultat.

eroare „quickedit”.

Găsiți linia și inserați-o în editorul HTML online. Eroare - buton pentru editarea rapidă a gadgeturilor. Am un șablon terță parte, dar special pentru platforma Blogger (Blogspot), un cadou de la autorul șablonului.

Butoanele nu erau vizibile în viața reală, dar codurile au rămas în șablon. Eu personal aveam 15 butoane.

Soluție. Deschide blogul, mergi la șablon, face o copie de rezervă, șterge toate butoanele. Găsirea codului

și ștergeți-l.

Pot exista multe astfel de coduri pentru a le elimina pe toate, selectați codul în fereastra de căutare și apăsați Enter.

Este indicat să rețineți! De fiecare dată când adăugați un widget sau gadget la un blog, codul butonului va apărea în șablon și va genera o eroare în validator.

Rezultat: 15 eliminări de cod și minus 50 de erori

Aș dori să subliniez că ați înțelege mai repede, dacă ștergeți o linie, alte linii de valabilitate pot fi șterse. Erorile se repetă în validator.

Dacă este posibil, nu rulați șablonul, orice lucru care nu funcționează corect este foarte rău. De fapt, de exemplu, aceste butoane nu m-au deranjat, nu le-am văzut, nu m-au enervat, dar au mărit dimensiunea codului șablonului.

A doua eroare și minus 42 de erori în validator.

Merg în același mod prin generatorul de cod al editorului HTML în timp real. Am lipit codul din pagina sursă în editor și problema s-a rezolvat. Acesta este doar codul pentru formularul de căutare pe blog de pe pagina publicației.

Soluție și corectare a erorilor: căutarea mea pe blog este de la Yandex, ceea ce înseamnă că codul nu este de la . Cum să găsești publicația potrivită?! Introduc interogarea „Căutare pe blog” în căutarea mea și găsesc articolul. În editorul de mesaje șterg codul și îl adaug din nou.

Validatorul are următoarea eroare

Deschid codul sursă al blogului folosind comanda rapidă de la tastatură Ctrl+U și caut linia 666, care indică o eroare în validator.

Mă duc din nou pe drumul meu pentru a corecta greșelile. Copiez codul și îl lipesc într-un editor HTML online.

Și ce văd? Este trist, jignitor, enervant, dar ok, din principiu, nu voi corecta această greșeală până în vremuri mai bune.

Deci, dragii mei vizitatori, nu vă faceți griji prea mult cu privire la erorile din cod. Acestea afectează în mod natural încărcarea site-ului, dar Google nu își certa copiii pentru erori. Ordinea trebuie restabilită, dar din câte știu, există erori minore pe site-urile oficiale ale motoarelor de căutare.

Este recomandabil să corectez încălcările grave, dar nu voi șterge căutarea din Yandex și nu am luat codul din vârful degetelor, dar pe site-ul oficial și căutarea pe blog funcționează bine. Daca nu ma crezi, poti sa verifici!

Dacă nu puteți corecta erorile și cu siguranță trebuie să faceți acest lucru, vă sfătuiesc să apelați la liber profesioniști, serviciul va costa de la 100 la 300 de ruble. Corectarea codului html personal necesită mult timp.

Validarea înseamnă testarea ceva în raport cu standardele (cerințe). În contextul webmasterilor, validarea site-ului înseamnă verificarea codului acestuia corectitudineȘi erori. Cu alte cuvinte: nu ar trebui să existe etichete sau structuri de neînțeles și, desigur, nu ar trebui să existe erori html.
Ce afectează validarea?
1. Validarea site-ului afectează în primul rând modul în care site-ul este afișat în browsere. Fiecare browser are propriile mecanisme de procesare a codului html. Dacă există erori în aspect (și aproape întotdeauna există), atunci browserul însuși le corectează și vedem site-ul afișat în forma corectă. Dar browserele nu au fost întotdeauna atât de capabile, iar anterior webmasterii au avut mai multe probleme cu corectitudinea aspectului. Validarea corectă afectează direct compatibilitatea între browsere.

2. Validarea poate afecta, de asemenea, încrederea site-ului pentru motoarele de căutare și, prin urmare, poziția site-ului. Cu toate acestea, nu se poate spune că codul HTML valid este un factor serios de clasare. Aspectul corect este doar unul dintre mulți factori care sunt luați în considerare numai în situații controversate.

Dar pentru motoarele de căutare, codul html este tot ceea ce vede robotul de căutare. Dacă există erori acolo, atunci pur și simplu interpretează greșit unele elemente, care uneori pot fi critice. De exemplu, dacă site-ul are etichete incorecte .. , (de exemplu, nu există nicio etichetă de închidere). Motorul de căutare nu va repara nimic, așa cum fac browserele. În consecință, poziția site-ului poate suferi foarte mult din cauza unor astfel de erori.
Exemplu din viață
Voi da un exemplu practic despre modul în care validarea poate avea un impact negativ asupra site-ului dvs. atât din punctul de vedere al SEO, cât și al utilizatorilor. Cândva, lucram pe site și am uitat din greșeală să închid o etichetă. După ce am verificat corectitudinea modificării în browserele populare, am făcut modificări site-ului.

După ceva timp, când am analizat traficul prin Yandex Metrica, am observat că timpul mediu de vizită în browserul Internet Explorer era mult mai scurt. După ce am deschis site-ul prin acest browser, mi-am dat seama ce se întâmplă. Întregul site a fost denaturat, era pur și simplu imposibil de citit conținutul. Și asta creează două probleme deodată. Prima problemă a fost că pierdeam tot traficul din IE, iar a doua problemă a fost că încurcam factorii comportamentali.
Cum se verifică un site pentru validitatea codului html 1. Validator html online
Există un serviciu gratuit pe Internet http://validator.w3.org/. Verifică validitatea codului html. Să aruncăm o privire mai atentă asupra modului în care funcționează acest serviciu.

Efectuează mai multe verificări ale codului dvs. Principalele:
Validare de sintaxă - verificarea erorilor de sintaxă. este o sintaxă validă, chiar dacă nu este o etichetă HTML validă, deci verificarea sintaxei este minim utilă pentru a scrie HTML bun.
Verificarea cuibării etichetelor - etichetele trebuie închise în ordinea inversă față de deschiderea lor. De exemplu, această verificare prinde erori cu .
Validare DTD - verificarea faptului că codul dvs. se potrivește cu definiția tipului de document specificată. Aceasta include verificarea numelor de etichete, atributelor și „încorporarea” etichetelor (etichete de un tip în interiorul etichetelor de alt tip)
Verificați elementele străine - verificarea identifică tot ceea ce este în cod, dar lipsește în DTD. De exemplu, etichete și atribute personalizate.

Principalul argument împotriva validării este că este prea strictă și nu corespunde modului în care funcționează de fapt browserele. Da, HTML poate fi nevalid, dar toate browserele pot trata un cod nevalid în același mod. Dacă sunt dispus să îmi asum responsabilitatea pentru codul prost pe care îl scriu, atunci nu trebuie să-mi fac griji în privința verificării. Singurul lucru pentru care trebuie să-mi fac griji este că funcționează.

În general, cea mai mare problemă a mea de validare este verificarea nr. 4 (pentru elemente străine). Sunt un susținător al utilizării atributelor personalizate în etichetele HTML pentru a stoca metadate suplimentare legate de un anumit element. După înțelegerea mea, aceasta este, de exemplu, adăugarea atributului foo atunci când am date (bară) pe care trebuie să le asociez cu un anumit element. Uneori, oamenii supraîncarcă atributele existente în aceste scopuri doar pentru a trece validarea, chiar dacă atributul va fi folosit în alte scopuri. Nu are sens pentru mine.

Secretul browserelor este că nu verifică niciodată dacă codul HTML corespunde DTD-ului specificat. Doctype pe care l-ați specificat în document comută parserul browserului într-un anumit mod, dar acesta nu încarcă doctype și nu verifică codul pentru conformitate cu acesta. Adică, analizatorul de browser procesează HTML cu unele ipoteze de invaliditate, cum ar fi etichete cu auto-închidere și elemente de blocare în interiorul elementelor inline (sunt sigur că există și altele).

În cazul atributelor personalizate, toate browserele analizează și recunosc atributele corecte din punct de vedere sintactic ca fiind valide. Acest lucru face posibilă accesarea unor astfel de atribute prin DOM folosind Javascript. Deci, de ce ar trebui să-mi fac griji cu privire la valabilitate? Voi continua să-mi folosesc atributele și sunt foarte bucuros că HTML5 le oficializează.

Cel mai bun exemplu de tehnologie care are ca rezultat HTML nevalid, dar care face o diferență uriașă este ARIA. ARIA funcționează prin adăugarea de noi atribute la HTML 4. Aceste atribute oferă o semnificație semantică suplimentară elementelor HTML, iar browserul este capabil să transmită această semantică dispozitivelor de asistență pentru a ajuta persoanele cu dizabilități. Toate browserele majore acceptă acum marcajul ARIA. Cu toate acestea, dacă utilizați aceste atribute, veți avea HTML nevalid.

În ceea ce privește etichetele personalizate, cred că nu este nimic greșit în a adăuga etichete noi corecte din punct de vedere sintactic la o pagină, dar nu văd prea multă valoare practică în ea.

Pentru a-mi clarifica poziția: cred că verificările #1 și #2 sunt foarte importante și ar trebui făcute întotdeauna. De asemenea, consider că verificarea nr. 3 este importantă, dar nu la fel de importantă ca primele două. Verificarea #4 este foarte discutabilă pentru mine, deoarece afectează atributele personalizate. Consider că, la maximum, atributele personalizate ar trebui să fie marcate ca avertismente (mai degrabă decât erori) în rezultatele validării, astfel încât să pot verifica dacă am introdus incorect numele atributului. Marcarea etichetelor personalizate ca erori poate fi o idee bună, dar are și unele probleme, de exemplu la încorporarea conținutului în alte markupuri - SVG sau MathML.

HTML valid nu garantează accesibilitatea;
HTML valid nu garantează o bună UX (experiență utilizator);
HTML valid nu garantează un site web funcțional;
HTML valid nu garantează afișarea corectă a site-ului.

Știu că acesta este un subiect controversat pentru mulți, așa că vă rugăm să vă abțineți de la a fi pur emoțional în comentarii.

UPD: multumesc pentru karma, am mutat-o la una tematica. Voi repeta cuvintele autoarei: înțeleg că acesta este un subiect controversat, dar vă rog să vă abțineți de la comentarii pur emoționale și să argumentați.