8 levinumat HTML-i viga, mida peaksite veebi paremaks arendamiseks vältima

Teiesugused lugejad aitavad MUO-d toetada. Kui teete ostu meie saidil olevate linkide abil, võime teenida sidusettevõtte komisjonitasu. Loe rohkem.

Iga veebisaidi aluseks on HTML – see on veebilehtede sisu struktureerimise ja esitamise peamine keel.

Kuid isegi kogenud HTML-i kodeerijad võivad teha lihtsaid vigu, mille tulemuseks on halvasti optimeeritud veebisaidid. Ja sellised vead võivad tekitada probleeme jõudluse, kasutatavuse ja juurdepääsetavusega.

PÄEVA VIDEO MAKKEUSE SISUGA JÄTKAMISEKS KERIMISE

Nende vältimiseks proovige uurida järgmisi levinumaid HTML-i vigu ja leida näpunäiteid nende vältimiseks.

1. Vananenud HTML-i elementide kasutamine

ekraanipilt, mis näitab aegunud HTML-elementide kasutamist

HTML on aja jooksul muutunud, nii et mõned elemendid ja atribuudid on nüüd üleliigsed. Kaasaegsed brauserid ei toeta aegunud elemente ja atribuute ning nende kasutamine võib teie veebisaidi kiirust negatiivselt mõjutada.

The silt teksti tsentreerimiseks märgend teksti vormindamiseks ja läbikriipsutatud teksti sildid on mõned kõige sagedamini kasutatavad aegunud HTML-i elemendid. Nende komponentide jaoks peaksite kasutama kaasaegseid vasteid.

miks mu telefon laadimise ajal kuumaks läheb?

Näiteks võite kasutage sisu tsentreerimiseks CSS-i , mitte tag. Lisaks saate fondistiile määrata CSS-i, mitte tag.

2. Ei sisalda alternatiivteksti

Ekraanipilt, millel on näide koodist, mis ei sisalda piltide alternatiivteksti

Kuigi pildid on veebidisaini oluline komponent, ei näe nägemispuudega vaatajad neid. Sellisena peaksite lisama kirjeldav alternatiivtekst fotodele, et muuta need paremini kättesaadavaks.

Alternatiivne tekst võimaldab teksti kõneks muutmise mootoritel lugeda kasutajatele ette pildikirjelduse. See pole siiski mõeldud ainult ekraanilugejatele; alt tekst võib olla kasulik otsingumootori optimeerimisel. Enamik brausereid kuvab ka alternatiivteksti, kui pildi laadimine ebaõnnestub.

3. HTML-i elementide vale pesastamine

Vastuvõetava koodi ja veebisaidi nõuetekohase toimimise tagamiseks peaksid HTML-i elemendid korralikult pesitsema. Ebapiisaval pesastamisel võivad olla ettenägematud tagajärjed, sealhulgas katkised paigutused, puuduv sisu ja katkised lingid.

Näiteks peaksite enne uue avamist sulgema iga div sildi. Samamoodi ei tohiks te kunagi silt väljaspool järjestatud või järjestamata loendit.

kuidas teha usb turvavõtit

4. Div siltide liigkasutamine

Ekraanipilt, mis näitab div-märgendite liigset kasutamist.

Silt 'div' on paindlik HTML-i element, mida kasutatakse sisu rühmitamiseks ja kujundamiseks. Selle sildi liigne kasutamine võib aga kaasa tuua halvasti organiseeritud veebisaidi ja muuta koodi hooldamise keeruliseks.

Peaksite kasutama HTML-i semantilisi elemente, mis annavad sisule tähenduse, mitte kõige jaoks div-märgendeid. Võite kasutada päise, mitte div-märgendi jaoks. Samuti peaksite kasutama asemel navigeerimisriba silt

tag.

5. Ei kasuta semantilist HTML-i

HTML-koodi ekraanipilt ilma semantilisi elemente kasutamata

Ilma selliseid semantilisi elemente nagu , ,

, , ja , võib veebileht tunduda segane ja korrastamata, muutes kasutajatel navigeerimise ja vajaliku teabe leidmise keerulisemaks.

Teie veebisait võib olla ka madalamal kohal otsingumootori tulemuste lehed (SERP-d) kui otsingumootoritel on probleeme sisu indekseerimisega.

6. CSS-i asemel tekstisiseste stiilide kasutamine

Saate rakendada tekstisiseseid CSS-i stiile otse HTML-i elemendile, kasutades stiiliatribuuti. Kuigi need stiilid on abiks kiirete muudatuste tegemiseks, võib nende liigne kasutamine muuta koodi hooldamise raskemaks ja kahjustada veebisaidi tõhusust.

Seetõttu peaksite kasutama väliseid CSS-faile, mis rakendavad veebisaidile globaalselt stiile, mitte tekstisiseseid stiile. Need parandavad veebisaidi jõudlust, vähendades brauserisse saadetavat koodi, ja lihtsustavad ka veebisaidi hooldust.

7. Tundliku kujunduse mittekasutamine

Responsive disain on veebidisaini strateegia, mis võimaldab veebisaitidel kohaneda erinevate ekraanisuuruste ja seadmetega. See lähenemine on hädavajalik veebisaidi juurdepääsetavuse parandamine ja kasutajakogemust, arvestades mobiilseadmete kasvavat kasutamist.

Erinevate stiilide rakendamiseks seadme ekraani suurusest lähtuvalt peaksite kasutama CSS-meediumipäringuid. See parandab kasutajakogemust, kuna muudab veebisaidi juurdepääsetavaks erinevates seadmetes.

8. HTML-i valideerimise ebaõnnestumine

Veebiarendus peab algama HTML-i valideerimisega, et kood oleks veatu ja vastaks veebistandarditele. Kehtetu HTML võib põhjustada katkiseid paigutusi, puuduvat sisu, katkisi linke ja palju muid probleeme.

Koodis vigade leidmiseks ja parandamiseks peaksite kasutama HTML-i validaatorit. Lisaks korrektsusele parandab valideerimine ka jõudlust, juurdepääsetavust ja otsingumootori optimeerimist.

Kaasaegse HTML-i ja CSS-i kasutamine

Kuna silmapiiril on uued funktsioonid, annavad HTML5 ja CSS3 arendajatele rohkem ressursse kui kunagi varem, et luua köitvaid veebisaite. Samuti parandab veebi juurdepääsetavuse standardite väljatöötamine puuetega inimeste kasutuskogemust.

Windows 10 ei lähe magama

Seetõttu on oluline järgida uusimaid HTML-i standardeid ja parimaid tavasid, kui soovite luua paremaid ja leidlikumaid veebisaite, mis vastavad praegustele ja tulevastele kasutajate vajadustele. See võimaldab teil ära tunda ja vältida levinud lõkse, mis teie tööd negatiivselt mõjutavad.