Serviciu de validare. Curs de layout - validare pagini. Verificarea accesibilității de pe dispozitivele mobile

Paginile tuturor site-urilor de pe Internet sunt proiectate cu un cod special scris conform regulilor HTML standardizate.

Ce este valabilitatea?

Validarea este o verificare a conformității cu standardele stabilite, iar în contextul folosit de webmasteri, corectitudinea codului paginii: erori de sintaxă, imbricarea etichetelor etc. Dacă totul este făcut „corect”, codul paginii nu trebuie să conțină atribute, structuri incorecte. si erori. Validarea site-ului vă permite să identificați deficiențele care trebuie corectate.

Valabilitatea site-ului este conformitatea codului cu standardele HTML existente.

Puteți afla dacă există comentarii sau erori în codul unei pagini web fie online, fie fără acces la Internet și folosind programe offline.

Ce sunt validatorii de cod

Un validator de cod este un program care poate fi utilizat pentru a verifica codul HTML al paginilor și codul CSS pentru conformitatea cu standardele moderne. Ea găsește și înregistrează elemente incorecte, indicând locația acestora și formulând exact ce este formatat incorect.

„Semne” de bază ale aspectului valid

Aspectul valid conține cod care respectă pe deplin cerințele W3C (World Wide Web Consortium), care dezvoltă standarde tehnologice pentru întregul Internet.

Dacă codul de pe paginile site-ului este corect, atunci site-ul este afișat corect (și nu strâmb) în toate browserele.

Nu există suspiciuni de „degradare” nedreptă în rezultatele căutării și nu există pagini eliminate din index.

Exemplu. Dacă, să presupunem, etichetele sunt incorecte

..

, (în special, elementul de închidere lipsește), atunci motorul de căutare nu va corecta nimic - îl va interpreta așa cum este scris în alb și negru în cod. Ca urmare, pot apărea consecințe legate de promovarea site-ului.

Este aspectul valid important în promovarea site-ului?

În teorie, da, dar în practică se dovedește că există o mulțime de site-uri cu erori de validare în partea de sus, iar site-urile cu erori în general se mișcă bine. Problemele cu promovarea pot apărea numai dacă site-ul dvs. nu este afișat corect pe un anumit tip de dispozitiv sau într-un anumit browser. Dacă arată grozav, dar există erori în validare, acest lucru nu va avea niciun impact asupra promovării.

Unii webmasteri au cercetat în mod special această problemă, încercând să afle dacă rezultatele clasamentului depind de rezultatele validării. Webmasterul Mark Daost a remarcat că validitatea codului nu este fundamentală. Shaun Anderson, dimpotrivă, a ajuns la concluzia că valabilitatea este ca un balsam pentru sufletul unui site în ceea ce privește clasamentele de căutare.

Un alt specialist, Mike Davidson, a efectuat și el un experiment similar și a ajuns la concluzia că Google clasifică paginile în funcție de calitatea scrierii lor. De exemplu, o etichetă neînchisă poate face ca o bucată de conținut să fie percepută ca valoarea etichetei respective.

Acest webmaster a făcut un punct foarte important:

Este imposibil de spus cu certitudine cât de puternic depinde clasamentul de validitatea codului, dar este absolut sigur că deficiențele existente pot duce la eliminarea paginilor sau a întregului site din indexul motorului de căutare.

De ce ai nevoie de cod valid?

Codul valid permite paginilor să se afișeze corect în browsere (și este posibil ca stilurile CSS ale site-ului să nu fie afișate corect).

Mai mult, este foarte posibil ca într-un browser site-ul dvs. să fie afișat așa cum l-ați configurat, iar în altul - complet diferit. Imaginea poate fi denaturată și conținutul poate deveni complet ilizibil.

Ca urmare, pierdeți trafic din acest browser. În plus, factorul comportamental, care este unul dintre cei mai importanți trei factori în SEO, afectează semnificativ rezultatele căutării.

Imaginați-vă că vizitatorii vin pe site-ul dvs. și îl închid imediat din cauza incapacității de a percepe informațiile - datorită erorilor din cod. Sau, în general, revin înapoi la motorul de căutare deoarece nu a fost găsită o soluție. Toate acestea vor face un deserviciu, deoarece în cele din urmă factorul comportamental va schimba poziția site-ului în rău.

Cum se verifică valabilitatea unui site

Pentru a verifica integritatea codului, ei folosesc cel mai adesea site-ul de validare foarte util „Markup Validation Service”, situat la: http://validator.w3.org, creat de W3C.

HTML

Aici aveți trei opțiuni de validare:

  • introduceți adresa URL a paginii;
  • încărcați fișierul de cod de pe computer;
  • lipiți codul terminat în formular.

Serviciul nu numai că indică erorile de cod html și locația acestora, dar oferă și sfaturi despre cum să le remediezi. Dacă codul este deja disponibil pe Web, atunci îl puteți valida introducând adresa URL în formularul „Validare prin URL” și făcând clic pe butonul Verificare. Validatorul HTML va permite citirea codului și va raporta rezultatele.

Trebuie să introduceți adresa URL exactă a paginii URL pe care o verificați. Întregul site nu va fi verificat. Introdu adresa site-ului web - doar pagina sa de pornire este considerată un program. Dacă se găsesc comentarii, se emite o notificare despre invaliditatea codului programului și apoi sunt indicate rândurile cu erori.

Acest videoclip explică clar procesul de verificare folosind un validator:

Verificarea fișierelor locale

La aceeași adresă http://validator.w3.org puteți verifica codul selectând fila „Validare prin încărcare fișier” și încărcând un document cu codul scris.

Selectați calea către fișierul necesar și faceți clic pe Verificare. Apoi totul se întâmplă în același mod.

Folosind formularul pentru a introduce un cod

Uneori este mai convenabil să introduceți imediat codul paginii și să îl verificați online: selectați fila „Validare prin introducere directă” și trimiteți tot codul la server.

CSS

Valabilitatea codului CSS poate fi verificată și folosind un validator online: https://jigsaw.w3.org/css-validator/

Totul aici este în rusă, pentru mulți aceasta este o surpriză cu adevărat plăcută.

Din nou, puteți alege să introduceți o adresă URL, să încărcați fișierul sau să lipiți codul.

Site-ul este verificat pentru erori, ca în cazul HTML, și primim un răspuns de la server. Nu există setări de verificare, dar puteți examina codul valid sugerat generat, situat după lista de defecte de cod.

Studiem codul rezultat și îl aducem pe cel original în forma dorită.

Extensii de browser

Există tot felul de extensii de validare pentru browsere. Pentru Google Chrome există pluginul HTML Tidy Browser Extension care verifică validitatea codului, pentru Opera - extensia Validator, pentru Safari - Zappatic, pentru Firefor - HTML Validator.

Să ne uităm la acesta din urmă mai detaliat. Efectuează aceeași verificare ca validatorul, doar offline. O poți obține aici http://users.skynet.be/mgueury/mozilla/

Instalați extensia, reporniți browserul - și puteți începe să lucrați imediat. Dacă aveți probleme cu instalarea, puteți scrie la asistența Mozilla Firefox sau puteți căuta pe forum http://forum.mozilla-russia.org/doku.php?id=general:extensions_installing

Videoclip detaliat despre instalarea HTML Validator și utilizarea acestuia:

La încărcarea oricărei adrese URL, extensia este activată automat și citește codul. Rezultatul este vizibil în colțul din dreapta sus.

Rezultatul arată ca o imagine mică cu rezultatul validării:

Făcând clic pe rezultat, puteți deschide:
- sursă;
— erori - în blocul din stânga jos (sau un mesaj despre valabilitate);
— sfaturi pentru corectarea erorilor sunt în dreapta jos.

Cum să remediați cele mai frecvente erori

Indiferent de modul în care este verificat codul, erorile apar într-o listă. Trebuie indicată și linia cu defectul.

Înainte de a edita codul, merită să faceți o copie de rezervă a șablonului de site, pentru orice eventualitate.

În extensia Firefox, când faceți clic pe numele erorii în fereastra de extensie deschisă, sunteți redirecționat automat către o linie cu cod invalid.

Aceste erori conțin sfaturi despre cum să le corectați.
Permiteți-mi să vă dau câteva exemple.

1. Fără spațiu între atribute.
…rel=”pictogramă comandă rapidă” href=”http://arbero.ru/favicon.ico” tip=”image/x-icon”

Aici corecțiile sunt pentru a elimina „punctul și virgulă”.

2. Etichetă finală pentru elementul „div” care nu este deschis

Eticheta div de închidere este redundantă. Să-l scoatem.

Știți prost engleza (și totul este întotdeauna descris în ea)? Copiați codul de eroare și inserați-l într-un motor de căutare. Un subiect similar a fost probabil deja descris de un webmaster sau un designer de layout, prin urmare, veți găsi întotdeauna o modalitate de a rezolva problema pe resurse specializate.

Deși, să fiu sincer, nu aș cheltui prea mult efort pe erorile din cod. Este mai bine să vă asigurați că site-ul arată corect pe toate dispozitivele și browserele.

Validare- aceasta este verificarea ceva pentru conformitatea 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 sunt aproape întotdeauna), 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 zone 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, făceam îmbunătățiri site-ului ș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 era că încurcam factorii comportamentali.

Cum să verificați 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.

În acest articol voi introduce conceptul "valabilitate" codul site-ului (html și css). Sper că toată lumea își amintește că html este structura site-ului. Css - reguli și stiluri pentru etichete care sunt descrise în html.

O vom înțelege de la bază: teorie, apoi trecem la practică. De asemenea, veți găsi răspunsuri la următoarele întrebări: care este valabilitatea codului html și css, de ce este necesar, de ce motoarele de căutare iubesc codul curat/valid. Și cel mai important, vă voi arăta cu exemple cum să verificați validitatea codului unui site.

De ce trebuie să verificați validitatea codului html și css?

Valabilitate - altfel cod curat (fără erori)

Constanta nr. 1. Valabilitatea codului site-ului permite ca site-ul să fie afișat corect în diferite browsere, adică. toate componentele vizuale și funcționale ale site-ului sunt afișate și funcționează corect. Cel mai adesea, se dovedește că browser-ul procesează și afișează corect toate elementele site-ului, dar asta nu înseamnă că codul este curat și neted ca fundul unui copil.

Constanta nr. 2. Codul curat (html și css) este încurajat de motoarele de căutare (Yandex, Google). Vorbind în rusă, atunci când un robot de motor de căutare vine la resursa dvs. și vede că validitatea a fost îndeplinită, atunci robotul de căutare va ști că această resursă nu conține erori și, prin urmare, va trata site-ul în bine.

Din experienta personala:În practica mea, a existat o situație în care articole noi de pe un blog nu doreau să apară în rezultatele căutării. Se pare că faci totul bine, dar Yandex nu apare și gata! Ce să faci, unde să sapi? Cineva va crede că filtrele sunt filtre, dar nu există așa ceva.

Am verificat site-ul pentru validitatea codului html și cât de surprins am fost și mi-am dat seama unde a fost îngropat câinele. S-a dovedit că codului îi lipsea o etichetă de închidere, iar aceasta este o etichetă specială care închide secțiuni de cod sau link-uri din motorul de căutare Yandex. Si ce am primit? Întregul articol este închis de la indexare. Iată răspunsul la întrebarea: „De ce nu apare în rezultatele căutării?” Apoi, desigur, am remediat această eroare.

Să trecem de la textul simplu cu teorie la practică și să învățăm cum să efectuăm verificări de validare online

Salutare tuturor! Astăzi vă voi spune despre ce este vorba valabilitatea codului site-ului, de ce este necesar și cum să îl verificați și să îl remediați utilizând diverse servicii online de validare W3C (html, CSS). Deci, să începem cu teorii. Care este mai exact acest termen?

Valabilitatea codului este gradul în care codul site-ului dvs. web respectă standardele internaționale acceptate, prescurtat ca W3C. Cu alte cuvinte, cu mult timp în urmă, au fost adoptate o serie de reguli generale de scriere a codului, care, dacă nu sunt conforme cu standardele W3C, pot duce la afișarea incorectă a site-ului dvs. în diferite browsere de computer și mobile. De asemenea, în unele cazuri deosebit de rare, acest lucru poate duce la sancțiuni din partea motoarelor de căutare, precum și la impunerea diferitelor filtre care pot încetini dezvoltarea proiectului dumneavoastră. Dar acest lucru se întâmplă foarte rar, deoarece chiar și Yandex și Google înșiși au cod care nu este 100% valid, adică conține erori.

De fapt, probabil că aveți o întrebare: de ce trebuie să-mi petrec timpul editând codul site-ului meu, astfel încât să devină valid, dacă oricum nu afectează nimic? După cum am scris mai sus, acest lucru este necesar pentru a vă asigura că site-ul dvs. se afișează corect (fără erori și erori) în diferite browsere. Astăzi, după cum știți, diverse tipuri de modele de telefoane devin din ce în ce mai populare: iPhone, Android, Smartphone și altele, care sunt deja folosite de întreaga populație a pământului. Astăzi, fiecare a treia persoană are propriul său telefon mobil, prin care poate intra online și vă poate vizita site-ul. Aceasta este de aproximativ 20-30 de ori mai mult decât cei care au propriul computer, laptop sau tabletă.

Adică înțelegi ideea. Publicul de oameni care folosesc dispozitive mobile este cel mai mare, ceea ce trebuie să țintăm. Și dacă vă amintiți câte dispozitive mobile au fost lansate în ultimii 10 ani și câte modele noi continuă să fie lansate la fiecare șase luni, atunci devine clar că ar fi foarte stupid să pierdeți un astfel de trafic (vizitatori). În plus, noile tehnologii nu stau pe loc și, odată cu apariția limbajului html5 actualizat, vechiul dvs. site web creat în 200 se poate dovedi a fi, ca să spunem așa, un mare zgomot pe fundalul rețelei globale.

Cum să verifici validitatea codului html și CSS al site-ului tău?

Există o mulțime de astfel de servicii pe Internet, cu toate acestea, aproape toate sunt strâmbe și chiar și în limba engleză, unde nu va fi foarte ușor de înțeles ce se spune. Dar totuși, există unul dintre ele care este mai normal, care nu numai că oferă o explicație, dar arată și în ce linie de cod se află eroarea. Așadar, faceți cunoștință - jigsaw.w3.org.

Vizitând acest site, puteți verifica validitatea codului site-ului dvs. în trei moduri. În fila „Verificare URI”, introduceți adresa site-ului dvs., iar serviciul vă va oferi întreaga listă de erori găsite în coduri doar pe pagina principală! Dacă, la fel ca mine, nu cunoașteți foarte bine codurile și când vizualizați codul site-ului dvs. nu găsiți linia care trebuie corectată, atunci puteți pur și simplu să încărcați fișierul de stiluri CSS (designul site-ului) în „verificați fișierul încărcat ” fila .

În acest caz, veți ști deja în ce fișier trebuie să editați codul. Apropo, o poți face și mai ușor. Dacă site-ul dvs. rulează pe un motor, de exemplu, atunci va trebui să mergeți doar la panoul de administrare al blogului din „aspect” „editor”, selectați un fișier, de exemplu, antet (header.php), copiați codul și inserați-l în fila serviciului „Verificare text”. Așa mi-am verificat personal blogul.

Deci, pe site-ul meu personal au fost 44 de erori, ceea ce este foarte puține în comparație cu alte site-uri. Apropo, unchiul Yandex are până la 155 de erori, ah-ah-ah. Ei bine, bine, să nu vorbim despre lucruri triste.

Pentru a vă fi mai ușor să corectați aceste inexactități în coduri, permiteți-mi să vă arăt personal câteva exemple pe blogul meu. Mai întâi, acordați atenție inscripției Linia 26. Aceasta indică o linie de cod. Pentru a-l găsi rapid, plasați acest cod pe care l-ați introdus în serviciul jigsaw.w3.org în orice editor html, vor fi afișate etichetele liniilor.

Observați că unele etichete sunt întotdeauna evidențiate cu roșu în cod. Acesta este locul în care trebuie să căutați și să editați codul. Cel mai adesea, trebuie eliminat complet sau etichetele lipsă trebuie adăugate la el. De asemenea, în titlu și în partea de jos a inscripției există sfaturi în limba engleză despre ce trebuie făcut pentru a corecta eroarea.

Exemplul 1. Aici trebuie să eliminați ghilimele evidențiate cu roșu <> . Ele nu ar trebui să fie în interiorul codului, acolo unde există deja la început și la sfârșit.

Exemplul 2. Lipsește o etichetă de închidere la sfârșitul codului /> . Rețineți că dacă în partea de sus a codului există o altă linie, tot cu o etichetă neînchisă, atunci trebuie să fie și închisă, altfel eroarea nu va dispărea.

Exemplul 3. Aici trebuie doar să eliminați linia repetată: „ href=""> .

Apropo, ar trebui să corectați erorile în primul rând, cele marcate cu o cruce, și nu cu un semn de exclamare, deoarece aceste erori nu sunt atât de importante. De asemenea, înainte de a repara ceva, faceți acest lucru, deoarece există o mare probabilitate să îl rupeți. După ce curățați complet codul, vă recomand să vă uitați la modul în care site-ul dvs. este afișat în diferite browsere pe diferite platforme de computer și telefon. Serviciul online gratuit browsershots.org vă poate ajuta în acest sens.

Cum altfel poți verifica rapid validitatea codului html și CSS al site-ului tău?

Dacă jigsaw.w3.org nu a fost suficient pentru dvs., atunci iată câteva servicii suplimentare pentru verificarea validității codului html al unui site: www.validome.org, watson.addy.com,

În concluzie, vreau să spun că dacă găsești câteva erori în tine, atunci nu trebuie să-ți faci griji, deoarece nu este atât de important astăzi. În general, au fost efectuate experimente pe această temă de mult timp, din care a devenit clar că codul prost valid nu afectează rezultatele căutării unui site. Dar, din păcate, internetul este un mediu în care totul se schimbă rapid. Astăzi poate că nu contează, dar mâine Yandex va adăuga acest algoritm suplimentar și pozițiile de căutare se pot lăsa (scădea). Deci, dacă aveți timp suplimentar pentru a modifica codul site-ului dvs., este mai bine să o faceți acum.

Validarea este unul dintre cele mai importante aspecte ale unui design web bun. Să ne uităm la ce este și cum să verificăm validitatea codului HTML. Ca exemplu, să luăm cel mai comun sistem de management al conținutului (CMS) – WordPress. După care vom împărtăși o listă de erori pe care le-am întâlnit în practică și, cel mai important, vom oferi propriile noastre metode dovedite pentru eliminarea acestora.

De ce este necesar să se verifice validitatea unui site web?

Mai simplu spus, verificarea unei pagini web va determina dacă aceasta îndeplinește standardele dezvoltate de World Wide Web Consortium (W3C). Acest lucru se face de obicei prin verificarea validității paginilor individuale folosind serviciul de validare online al W3C.

La fel cum există reguli gramaticale în diferite limbi, există și reguli în programare. Verificarea vă permite să vedeți dacă pagina respectă aceste reguli și, dacă există erori sau avertismente, se vor oferi recomandări pentru a le rezolva. Vom discuta mai detaliat necesitatea unei astfel de verificări mai jos.

Ce influențează valabilitatea unui site?

Te-ai întrebat vreodată cum „citesc” browserele o pagină web? Au „motoare” pentru analiza codului și transformarea acestuia într-o formă vizuală pentru oameni. Din păcate, fiecare browser are propriul său mecanism de procesare a codului, iar acest lucru poate face ca paginile dvs. să fie afișate diferit.

O pagină web incorectă poate fi citită diferit de browsere. Acest lucru va duce la posibil ca vizitatorii dvs. să nu poată vedea corect conținutul paginii în browserele lor. Validarea va corecta mai târziu aproape toate diferențele majore și va face pagina dvs. web lizibilă de aproape toate browserele web (cea mai comună excepție fiind versiunile mai vechi de Internet Explorer). De aici provine termenul „aspect cross-browser” – adică. aspect care este la fel de bun (compatibil) pentru toate browserele populare.

Cum va afecta acest lucru SEO? Este important să înțelegeți că roboții motoarelor de căutare iubesc paginile web semantice. Aspectul semantic, conform Wikipedia, este o abordare a creării de pagini web în HTML, bazată pe utilizarea etichetelor HTML în conformitate cu semantica (scopul) acestora. În plus, o pagină web semantică structurală permite roboților de căutare să determine cu mai multă precizie semnificația atât a elementelor individuale ale paginii web, cât și a întregului text în ansamblu. Potrivit Google, codul valid nu afectează în niciun fel clasarea paginii. Dar, în același timp, prezența erorilor în cod poate afecta negativ scanarea micro-markupului și adaptarea la dispozitivele mobile.

Instrumente de validare pentru site-ul dvs

Înțelegând necesitatea absenței erorilor de validare pe paginile site-ului, să vedem cum să căutăm aceste erori.

Există multe servicii gratuite pentru verificarea site-ului web, cum ar fi Serviciul de validare a marcajului W3C, Analizor de pagini web, Capturi de browser și altele.