9 greșeli pe care nu ar trebui să le faci atunci când construiești o pagină web

Publicitate

Crearea unei pagini web cu HTML și CSS este Destul de direct Cum să creezi un site web: pentru începătoriAstăzi vă voi ghida în procesul de creare de la zero a unui site complet. Nu vă faceți griji dacă sună dificil. Te voi ghida prin ea la fiecare pas. Citeste mai mult . Dar este ușor să greșești și sunt destul de multe lucruri la care nu te-ai gândi. De cele mai multe ori, aceste mici greșeli nu vor face mare diferență.

Dar pe termen lung, acestea vă pot face viața mai dificilă. Aceste nouă greșeli sunt ușor de făcut, dar dacă le dai mai devreme decât mai târziu, pagina ta va arăta mai bine, va fi mai ușor de întreținut și funcționează cum vrei.

1. Styling în linie

Unul dintre lucrurile grozave despre HTML și CSS este că puteți să formatați orice linie de text - orice cuvânt unic, într-adevăr - oricând doriți. Dar asta nu înseamnă că ar trebui să profitați de această capacitate.

Iată un exemplu de stil inline pe care îl puteți utiliza pentru a face un paragraf mai mare decât alineatele înconjurătoare și pentru a-l evidenția într-o altă culoare:

Textul tău aici.

Acest lucru dă paragraful a Stil CSS Aflați HTML și CSS cu aceste instrucțiuni pas cu pasEști curios despre HTML, CSS și JavaScript? Dacă credeți că aveți un avantaj pentru a învăța cum să creați site-uri de la zero - iată câteva instrucțiuni pas-cu-pas minunate care merită încercate. Citeste mai mult care se încheie cu încheierea alineatului. Pare destul de eficient, nu?

Există o problemă importantă: dacă doriți să schimbați o mulțime de lucruri pe site-ul dvs. web, va trebui să accesați fiecare caz de stil inline și să îl schimbați. Dacă aveți 100 de paragrafe diferite, cu dimensiunea textului de 120% și albastru, va trebui să le găsiți pe toate 100 și să le schimbați în ceea ce ați decis este un format mai bun.

În schimb, utilizați o foaie de stil CSS. Iată stilul pe care l-ați folosi pentru paragraful de mai sus:

p.important {dimensiune: 120%; Culoarea albastra; }

Acum, în loc să utilizați stilul inline, puteți utiliza pur și simplu această linie:

Textul tău aici.

Iar paragraful tău va fi mare și albastru. Și atunci când faceți o modificare la clasa „importantă” din CSS, toate se vor schimba.

2. Tabele pentru aspect

Oamenii obișnuiau să folosească tabele pentru formatarea paginilor destul de regulat. Folosind un tabel, puteți organiza elementele de pe pagina dvs. în coloane și rânduri, precum și să aplicați alinieri și stiluri diferite. Chiar și tabelele unicelulare ar fi utilizate pentru a alinia corect conținutul. Dar această utilizare a meselor este în general încruntată.

La fel ca stilurile inline, este mai ușor de întreținut utilizarea CSS în locul tabelelor HTML pentru aspect. Din nou, dacă doriți să faceți modificări pe zeci sau sute de pagini, este mult mai ușor să editați fișa de stil decât să parcurgeți fiecare pagină și să reglați tabelele.

Pe lângă o întreținere mai ușoară, citirea aspectelor CSS tinde să fie destul de ușor decât citirea tabelelor HTML. Mai ales dacă sfârșești să cuibărești multe niveluri de tabele unul în celălalt. S-ar putea să nu fie foarte ușor să mergeți înainte și înapoi între documentul HTML și fișa de stil pentru a vedea exact ce se întâmplă, dar conținutul paginii dvs. va fi mai clar și mai ușor de editat.

A folosi tabele aici și acolo pentru a împărți paginile în coloane nu este un păcat muritor. Uneori este mai ușor și mai rapid decât să încurci cu CSS. Dar dacă creați tabele gigantice, cu mai multe niveluri, ar trebui să luați în considerare reformatarea cu CSS.

3. HTML depreciat

Ca orice limbă, HTML se schimbă regulat. Etichetele recunoscute oficial se schimbă, iar unele devin învechite. Chiar dacă aceste etichete funcționează în continuare, cel mai bine este să le evitați.

De exemplu, dacă ai obișnuit să folosești eticheta pentru bold și etichetați pentru italice, sunteți în spatele vremurilor. și (pentru „accent”) sunt acum etichetele standard.

, , , și altele sunt, de asemenea, depășite.

Majoritatea etichetelor învechite au fost înlocuite cu CSS, astfel încât va trebui să utilizați stiluri (de preferință nu în linie) pentru a obține același efect. Dacă nu sunteți sigur cum să înlocuiți o etichetă depășită sau dacă încă există o etichetă specifică, verificați documentație HTML oficială sau pur și simplu executați o căutare rapidă.

4. JavaScript Inline

Unele pagini web folosesc JavaScript pentru adăugați funcționalitate suplimentară JavaScript și Dezvoltarea Web: Utilizarea modelului de obiect documentAcest articol vă va prezenta scheletul documentului cu care funcționează JavaScript. Având cunoștințe de lucru despre acest model de obiect de document abstract, puteți scrie JavaScript care funcționează pe orice pagină web. Citeste mai mult . Poate face ca paginile web să fie interactive, să valideze textul pe măsură ce este introdus, să adauge animații, să ofere răspunsuri la acțiunile utilizatorilor ș.a. Pe scurt, poate face o pagină mai utilă oferind un comportament suplimentar.

La fel ca CSS, puteți adăuga JavaScript inline la HTML. La fel ca CSS, acest lucru este în general descurajat. Pe lângă faptul că sunt potențial mai greu de întreținut, există și alte două motive care justifică această admisie.

JavaScript Inline poate utiliza cantități mai mari de lățime de bandă decât un script legat dintr-un alt fișier. Un proces numit minificare comprimă HTML și CSS înainte de a-l trimite unui utilizator, necesitând mai puțin lățime de bandă pe conexiuni în bandă largă sau mobile. JavaScript, însă, nu poate fi redus. De asemenea, nu va fi memorat în cache, în timp ce un fișier JavaScript separat poate sa fii în cache.

Toate aceste lucruri fac ca JavaScript-ul inline să fie mai intens pe lățime de bandă.

Este, de asemenea, mai greu să depanați, deoarece puteți utiliza un validator JavaScript pentru un fișier JavaScript... dar nu va funcționa pe scriptul inline. Și, din nou, creează un HTML mai curat și mai ușor de întreținut.

5. Etichete multiple H1

Etichetele de antet sunt grozave. Fac paginile mai ușor de degresat, îți pot oferi un impuls SEO și pot fi folosite pentru a sublinia anumite puncte.

Dar există șase niveluri de etichete dintr-un motiv. Ar trebui să existe într-adevăr o singură etichetă H1 pe pagina ta. Și acesta este adesea titlul paginii (în special pe bloguri și site-uri similare). S-ar putea să credeți că introducerea unui set de cuvinte cheie în etichetele H1 va face ca Google să aibă mai multe șanse să le ridice și să plaseze site-ul dvs. mai sus în rezultate.

Dar ceea ce face cu adevărat este ca pagina dvs. să fie mai confuză și mai greu de citit. Ceea ce va anula orice beneficii SEO oricum puteți vedea.

Utilizați H2, H3 și restul etichetelor de antet pentru a contura mai bine pagina. Nivelul rubricii ar trebui să ofere cititorului tău o idee despre importanța secțiunii următoare. Dacă le-ați indus în eroare, o vor ști și nu vor fi fericiți.

6. Săriți Alts Image

Fiecărei imagini i se poate oferi un atribut „alt” care afișează o linie de text specifică dacă imaginea nu poate fi afișată. S-ar putea să nu pară o ofertă mare, în special cu browserele moderne (atât desktop cât și mobile) care pot afișa aproape orice.

Dar a nu adăuga atribute alt este o mare greșeală, mai ales în epoca unei navigări mobile constante. Conexiunile mobile nu sunt întotdeauna grozave și, dacă un browser nu poate încărca o imagine, cititorul tău rămâne fără idee despre ce ar trebui să vadă acolo. Un atribut alt poate rezolva asta.

Și dacă cineva folosește un cititor de ecran VoiceOver face ca dispozitivele Apple să fie mai accesibile decât oricândPreședintele Fundației Americane a Nevăzătorului consideră că „Apple a făcut mai mult pentru accesibilitate decât orice altă companie până în prezent”, iar VoiceOver a jucat un rol important în acest sens. Citeste mai mult sau o altă caracteristică de accesibilitate, acel atribut alt ar putea fi tot ceea ce ies din imagine.

Desigur, există și beneficii potențiale SEO. Motoarele de căutare pot indexa atribute alt descriptive. Dar cel mai mare beneficiu aici este ajutarea cititorilor.

7. Nu etichete de închidere

Există câteva etichete HTML pe care le puteți scăpa fără a închide, cum ar fi

și

. Navigatorii știu că atunci când începeți un alt paragraf sau element de listă, precedentul s-a încheiat. Dar asta nu înseamnă că ar trebui să săriți pe etichetele de închidere.

În primul rând, în ciuda progreselor înregistrate în tehnologia browserului, există cu siguranță posibilitatea ca browserul să își afișeze conținutul în mod necorespunzător dacă nu ați închis etichetele. Iar aplicarea stilurilor ar putea produce rezultate imprevizibile, cum ar fi Utilizatorul Stack Exchange robertc demonstrează.

La ce se rezumă este că browserele așteaptă etichete de închidere. Nu au absolut nevoie de ele... dar vor beneficia cu siguranță de HTML-ul corect atunci când încearcă să afișeze pagina ta.

Din fericire, nu este nevoie de mult pentru a vă închide etichetele, mai ales dacă utilizați un editor HTML bun.

8. Fără a include un DOCTYPE

La începutul documentelor HTML, de obicei, veți vedea o declarație DOCTYPE, ca aceasta:

Este ceva despre care nu se vorbește des, dar este un element important în pagina ta. Declarația DOCTYPE spune unui browser ce tip de HTML utilizați. Acest lucru îi permite să redea HTML-ul corect.

Dacă săriți declarația DOCTYPE, pagina se va afișa în „modul quirks”. Aceasta este apărarea browserului modern împotriva paginilor web antichizate. Și schimbă modul în care se afișează pagina ta. O privire rapidă Modul quirks Firefox arată că sensibilitatea cazurilor se schimbă, proprietățile fontului nu se moștenesc în tabele, dimensiunile fontului sunt calculate diferit și imaginile fără atribute alt sunt afișate uneori incorect.

Majoritatea acestor lucruri sunt relativ minore. Dar dacă doriți ca pagina dvs. să fie afișată corect, ar trebui să vă asigurați că un browser are modul său de standardizare complet activat.

Pentru a face asta, aveți nevoie de un DOCTYPE. (Dacă nu sunteți sigur ce să folosiți, folosiți doar .)

9. Marcarea schemei de neglijare

Marcarea schemelor ajută motoarele de căutare să aibă o idee mai bună despre ce este pe pagina dvs. Mai exact, acea marcare indică motoarelor de căutare ce scrieți în fiecare secțiune.

De exemplu, într-un articol, puteți utiliza marcarea schemelor pentru a spune unui motor de căutare titlul, autorul, data, editorul și alte informații utile despre un articol.

Există scheme pentru filme, cărți, organizații, oameni, restaurante, produse, locuri, acțiuni, diferite tipuri de date, muzică, sculptură, rezervări, servicii, bancomate, fabrici de bere și aproape orice altceva vă puteți gândi. Este destul de uimitor.

Cu siguranță puteți scăpa fără să folosiți marcarea schemelor. Pagina ta va apărea corect fără ea. Cititorii tăi nu vor ști nici măcar că există. Dar mai sunt multe de câștigat din includerea acestui marcaj. Motoarele de căutare vor putea oferi informații mult mai detaliate și utile despre pagina dvs., inclusiv fragmente bogate.

Și cu instrumentul de marcare a schemelor Google, procesul este destul de ușor.

Obișnuiește-te cu cele mai bune practici HTML

A face aceste bune practici un obicei poate dura ceva. Și, uneori, se poate simți că iei mult timp suplimentar pentru ceva care nu te aduce foarte mult. Dar asigurându-vă că dvs. HTML și CSS Aflați HTML și CSS cu aceste instrucțiuni pas cu pasEști curios despre HTML, CSS și JavaScript? Dacă credeți că aveți un avantaj pentru a învăța cum să creați site-uri de la zero - iată câteva instrucțiuni pas-cu-pas minunate care merită încercate. Citeste mai mult sunt bine aranjate, ușor de lucrat și întreținute vă vor economisi mult timp pe termen lung.

Ce alte obiceiuri bune ați găsit utile când creați pagini web? Nu sunteți de acord cu oricare dintre practicile de mai sus? Împărtășește-ți gândurile în comentariile de mai jos!