12 principii pentru un cod HTML curat - Revista Smashing
Buletin informativ Smashing
În fiecare săptămână, trimitem tehnici utile front-end și UX. Abonați-vă și obțineți Liste de verificare pentru designul interfeței inteligente PDF livrat în căsuța de e-mail.
HTML frumos și curat este fundamentul unui site frumos. Când îi învăț pe oameni despre CSS, încep întotdeauna prin a le spune că CSS bun poate exista doar cu un markup HTML la fel de bun. O casă este la fel de puternică ca fundația ei, nu? Avantajele HTML semantice curate sunt multe, totuși atât de multe site-uri web suferă de markup slab scris.
Să aruncăm o privire la un HTML slab scris, să discutăm problemele acestuia și apoi să-l transformăm în formă! Rețineți că nu adoptăm nicio judecată asupra conținutului sau designului acestei pagini, ci doar asupra marcajului care o construiește. Dacă sunteți interesat, aruncați o privire asupra codului rău și a codului bun înainte de a începe, astfel încât să puteți vedea imaginea de ansamblu. Acum să începem chiar în partea de sus.
Lecturi suplimentare pe SmashingMag:
1. DOCTIP tip strict
Dacă vom face acest lucru, să o facem bine. Nu este nevoie de o discuție cu privire la utilizarea HTML 4.01 sau XHTML 1.0: ambele oferă o versiune strictă care ne va menține drăguți și cinstiți în timp ce scriem codul nostru.
Codul nostru nu folosește oricum tabele pentru aspect (oricum!), Deci nu este nevoie de un DOCTYPE de tranziție.
Resurse:
2. Set de caractere și caractere de codificare
În secțiunea noastră, primul lucru ar trebui să fie declarația setului nostru de caractere. Folosim aici UTF-8, care este umflat, dar este listat după al nostru. Să mergem mai departe și să-l mutăm în sus, astfel încât browserul să știe cu ce set de caractere se ocupă înainte de a începe să citească orice conținut.
În timp ce vorbim despre personaje, să mergem mai departe și să ne asigurăm că toate personajele amuzante pe care le folosim sunt codificate corect. În titlul nostru avem un șir. Pentru a evita orice posibilă interpretare greșită a acestuia, îl vom converti în & în schimb.
Resurse:
3. Indentare adecvată
Bine, suntem în jur de trei rânduri și sunt deja enervat de lipsa de indentare. Indentarea nu are nicio influență asupra modului în care pagina este redată, dar are un efect imens asupra lizibilității codului. Procedura standard este de a indenta o filă (sau câteva spații) atunci când începeți un element nou care este un element secundar al etichetei de deasupra acestuia. Apoi deplasați-vă înapoi într-o filă când închideți acel element.
Regulile de indentare sunt departe de a fi stabilite în piatră; nu ezitați să vă inventați propriul sistem. Dar vă recomand să fiți în concordanță cu orice alegeți. Marcajul frumos indentat ajută la înfrumusețarea codului și la ușurarea citirii și a accesului.
Resurse:
4. Păstrați CSS și JavaScript extern
Avem câteva CSS care s-au strecurat în secțiunea noastră. Acesta este un fault grav, deoarece nu numai că ne încurcă marcajul, dar se poate aplica numai acestei singure pagini HTML. Păstrarea fișierelor CSS separate înseamnă că paginile viitoare se pot conecta la ele și pot utiliza același cod, astfel încât schimbarea designului pe mai multe pagini devine ușoară.
Este posibil ca acest lucru să se fi întâmplat la un moment dat ca o „soluție rapidă”, ceea ce este de înțeles și se întâmplă tuturor, dar să o mutăm într-un loc mai potrivit într-un fișier extern. Nu există JavaScript în secțiunea noastră principală, dar același lucru este valabil și pentru asta.
5. Cuibărește corect etichetele tale
Titlul site-ului nostru, „Site-ul meu pentru pisici”, este corect în interior