Designerii petrec ore întregi perfecționându-și meșteșugurile pentru a ajusta cu atenție cele mai mici detalii ale design-urilor site-urilor web care ies din pixurile lor. Cu toate acestea, calitatea codului de foarte multe ori rămâne foarte scăzută. Ai nevoie de dovezi? Consultați galeriile de șabloane CSS gratuite. 90% dintre șabloane nu vor trece verificarea. În plus, majoritatea erorilor sunt foarte primitive și foarte ușor de remediat. În această lecție, vom analiza erorile tipice din codul HTML care împiedică finalizarea cu succes a verificării.
De ce verifica codul?
Dacă site-ul arată grozav în browser, atunci de ce să verificați codul? O întrebare tipică adresată înainte de a revizui codul. Dar site-ul nu se limitează doar la ceea ce este vizibil pentru utilizator. Paginile HTML sunt concepute pentru a prezenta date, nu efecte grafice. Datele trebuie să poată fi citite de întreaga comunitate vastă de oameni care folosesc internetul. Și cititorii pot folosi tehnologii foarte diferite pentru a primi informațiile prezentate pe site-ul tău - de exemplu, pot folosi un program vocal și pot asculta pur și simplu ceea ce este scris pe pagina ta.
O pagină HTML care nu conține erori se va afișa în general corect în majoritatea browserelor și va fi, de asemenea, compatibilă cu tehnologiile viitoare. Aici merită menționat motoarele de căutare, a căror funcționare este foarte importantă în scopuri SEO. Nimeni nu vrea să le creeze obstacole, iar codul curat și corect este mult mai ușor de perceput de către roboții de căutare.
Este și o chestiune de profesionalism. Codul HTML incorect este foarte asemănător cu erorile gramaticale din textul unui site web. Și deși clientul poate să nu observe erori în cod, acest lucru nu schimbă esența problemei. Nimănui nu-i plac erorile gramaticale în design, dar cumva lăsarea codului HTML cu erori nu este considerat același act rușinos.
Erori comune
Mai jos sunt erorile care au fost surprinse în șabloanele din prima pagină a celebrei galerii de șabloane CSS. O mulțime de site-uri web arată grozav, chiar grozav, dar adesea calitatea codului nu se potrivește cu calitatea designului. Deși majoritatea acestor erori pot fi remediate foarte rapid și ușor.
Cea mai gravă greșeală este să nu folosești Doctype! Fără etichetă Doctypeînseamnă că browserul va „ghici” ce limbă a fost folosită pentru a crea documentul. Pentru a corecta eroarea, trebuie să specificați tipul de document al paginii dvs.
Elementul nu este închis
Dacă deschideți o etichetă undeva în documentul HTML, trebuie să o închideți în locul potrivit. Uitarea în această chestiune nu numai că duce la erori la verificarea codului, dar poate provoca și probleme serioase cu șablonul. Figura arată o situație în care autorul a uitat să închidă eticheta
Omite caracterul / în elementele de auto-închidere
Majoritatea elementelor HTML au etichete de închidere separate, de exemplu:
Caracterele speciale nu au fost convertite
Caractere neconvertite în URL
Conform punctului anterior, caracterele speciale, în special și ampersand, trebuie să fie codificate în șiruri URL. Link-urile către site-uri web create folosind PHP conțin adesea variabile care folosesc simbolul & și trebuie scrise folosind codul și HTML.
Blocați elementele din interiorul elementelor inline
Una dintre regulile de bază ale HTML este că elementele bloc nu trebuie să fie NICIODATĂ conținute în elementele inline.
Un exemplu popular de greșeală este utilizarea unui link în titlu:
banane
este un element bloc, deci trebuie să se înfășoare în jurul unui link (element inline): banane
.
Atributul alt imagine lipsește
Fiecare imagine dintr-un document HTML trebuie să aibă un atribut alt care descrie conținutul imaginii. Chiar dacă imaginea este în scopuri de design, ar trebui să aibă un atribut alt, dar în acest caz ar trebui lăsată goală, de exemplu, alt="" . Într-un alt caz, trebuie să furnizați o descriere a conținutului imaginii.
Folosind atribute precum lățimea și înălțimea
Acesta este probabil dezavantajul utilizării pe scară largă a editorilor WYSIWYG, care tind să insereze cod HTML redundant. Atributele de lățime și înălțime sunt definite în standardele de tip de document de tranziție, dar dacă v-ați propus să respectați cu strictețe standardele, probabil știți că toate atributele responsabile de prezentarea elementelor pe pagini ar trebui transferate în foaia de stil CSS pentru a separa conținutul și design.
Numele sau ID-ul clasei începe cu un număr
Un nume de clasă, un ID sau un nume de atribut nu poate începe cu un număr. Ele pot include numere, dar nu la începutul unui cuvânt.
Care este situația cu verificarea codului CSS?
Spre deosebire de HTML, CSS este folosit pentru a reprezenta vizual o pagină. Deci întrebarea este „Dacă pagina arată bine, atunci de ce să verificați codul?” in acest caz suna mai convingator. Codul CSS prost nu are același impact asupra paginilor web ca și codul HTML prost. Cu toate acestea, merită verificat pentru a detecta greșelile de scriere și erorile din cod. Dacă utilizați noi proprietăți CSS3, acestea vor face ca documentul să eșueze validarea deoarece nu sunt încă incluse în specificație, dar dacă sunteți sigur că totul este corect, atunci astfel de erori pot fi ignorate.
Aproape de rector 19 septembrie 2012 la ora 11:16Greșeli de evitat la scrierea codului HTML
Oricine lucrează cu HTML în fiecare zi ar trebui să fie foarte atent, deoarece respectarea tuturor regulilor HTML nu este atât de ușor. Acest lucru este foarte important, deoarece validatorul HTML găsește toate erorile, chiar și cele minore, și obțineți codul paginii cu erori. Astăzi vom încerca să acordăm atenție celor mai comune dintre ele. Sunt sigur că recomandările propuse vor fi foarte utile multora și mai ales dezvoltatorilor începători. Deci, bine ați venit sub
Imbricarea incorectă a etichetelor HTML
Este foarte important să închideți corect toate etichetele HTML. Ar trebui să se închidă în ordinea inversă a modului în care au fost deschise. Majoritatea începătorilor nu acordă suficientă atenție acestui lucru. Dacă etichetele sunt închise în ordine greșită, veți primi erori de validare și este posibil ca unele stiluri să nu fie utilizate. Atenție!
Eroare
PrivilnoUtilizarea elementelor bloc în interiorul elementelor inline
Oricine a folosit HTML măcar puțin în practică știe că un element poate fi afișat fie ca bloc, fie ca linie. Elementele bloc, inclusiv paragrafele și secțiunile, trebuie să conțină elemente inline. Aceasta este o structură logică a documentului, așa că asigurați-vă că codul o urmează.