HTML sa dá ľahko naučiť a prehliadače sú vo všeobecnosti zhovievavé k chybám. Stále by ste sa však mali snažiť odstraňovať chyby a poskytovať efektívne webové stránky.
Základom každej webovej stránky je HTML – je to primárny jazyk pre štruktúrovanie a prezentáciu obsahu na webových stránkach.
Avšak aj ostrieľaní HTML kóderi sa môžu dopustiť jednoduchých chýb, ktoré vedú k zle optimalizovaným webovým stránkam. A chyby ako táto môžu spôsobiť problémy s výkonom, použiteľnosťou a dostupnosťou.
Ak sa im chcete vyhnúť, skúste si preštudovať nasledujúce bežné chyby HTML a objavte tipy, ako im predchádzať.
1. Používanie zastaraných prvkov HTML
HTML sa časom zmenilo, takže niektoré prvky a atribúty sú teraz nadbytočné. Moderné prehliadače nepodporujú zastarané prvky a atribúty a ich používanie môže negatívne ovplyvniť rýchlosť vášho webu.
The značka na centrovanie textu, tag na formátovanie textu a značky pre prečiarknutý text sú niektoré z najčastejšie používaných zastaraných prvkov HTML. Pre tieto komponenty by ste mali používať moderné ekvivalenty.
Napríklad môžete použite CSS na vycentrovanie obsahu, skôr než tag. Okrem toho môžete nastaviť štýly písma pomocou CSS, nie pomocou tag.
2. Bez alternatívneho textu pre obrázky
Zatiaľ čo obrázky sú dôležitou súčasťou online dizajnu, diváci so zrakovým postihnutím ich nemôžu vidieť. Ako taký by ste mali pridať popisný alternatívny text k fotografiám, aby boli prístupnejšie.
Alternatívny text umožňuje nástrojom na prevod textu na reč prečítať používateľom popis obrázka. Nie je to však len pre čitateľov obrazovky; alt text môže prospieť optimalizácii pre vyhľadávače. Väčšina prehliadačov zobrazí aj alternatívny text, ak sa obrázok nepodarí načítať.
3. Nesprávne vkladanie prvkov HTML
Aby sa zaručil prijateľný kód a správne fungovanie webovej stránky, prvky HTML by sa mali správne vnoriť. Neadekvátne vnorenie môže mať neočakávané účinky, vrátane nefunkčných rozložení, chýbajúceho obsahu a nefunkčných odkazov.
Napríklad by ste mali zatvoriť každú značku div pred otvorením novej. Podobne by ste nikdy nemali tag mimo zoradeného alebo neusporiadaného zoznamu.
Značka „div“ je flexibilný prvok HTML, ktorý sa používa na zoskupovanie a úpravu obsahu. Nadmerné používanie tejto značky však môže viesť k zle organizovanej webovej lokalite a sťažiť údržbu kódu.
Mali by ste použiť sémantické prvky HTML, ktoré dávajú obsahu význam, a nie značky div pre všetko. Môžete použiť namiesto značky div. Podobne by ste mali použiť značka pre navigačný panel namiesto značky tag.
5. Nepoužívanie sémantického HTML
Bez použitia sémantických prvkov ako
Vaša webová stránka môže mať tiež nižšie hodnotenie stránky s výsledkami vyhľadávacieho nástroja (SERPs) ak majú vyhľadávače problémy s indexovaním obsahu.
6. Používanie vložených štýlov namiesto CSS
Vložené štýly CSS môžete použiť priamo na prvok HTML pomocou atribútu style. Aj keď sú tieto štýly užitočné pri vykonávaní rýchlych zmien, ich nadmerné používanie môže sťažiť údržbu kódu a poškodiť efektivitu webovej lokality.
V dôsledku toho by ste mali používať externé súbory CSS, ktoré aplikujú štýly na webovú lokalitu globálne, a nie vložené štýly. Zvyšujú výkon webových stránok znížením počtu kódu odosielaného do prehliadača a zjednodušujú aj údržbu webových stránok.
7. Nepoužívanie responzívnych dizajnov
Responzívny dizajn je stratégia webového dizajnu, ktorá umožňuje webovým stránkam prispôsobiť sa rôznym veľkostiam obrazovky a zariadeniam. Tento prístup je nevyhnutný pre zlepšenie dostupnosti webových stránok a používateľskú skúsenosť vzhľadom na rastúce používanie mobilných zariadení.
Na aplikovanie rôznych štýlov na základe veľkosti obrazovky zariadenia by ste mali používať dopyty médií CSS. To zlepšuje používateľskú skúsenosť, pretože webovú stránku sprístupňuje na rôznych zariadeniach.
8. Nepodarilo sa overiť kód HTML
Vývoj webu musí začať validáciou HTML, aby sa zabezpečilo, že kód je bezchybný a je v súlade s webovými štandardmi. Neplatný kód HTML môže spôsobiť nefunkčné rozloženie, chýbajúci obsah, nefunkčné odkazy a mnoho ďalších problémov.
Na nájdenie a opravu chýb v kóde by ste mali používať validátory HTML. Okrem správnosti validácia zlepšuje aj výkon, dostupnosť a optimalizáciu pre vyhľadávače.
Používanie moderného HTML a CSS
S novými funkciami na obzore poskytujú HTML5 a CSS3 vývojárom viac zdrojov ako kedykoľvek predtým na vytváranie pútavých webových stránok. Vývoj štandardov prístupnosti webu tiež zlepší používateľskú skúsenosť pre osoby so zdravotným postihnutím.
Preto je dôležité držať krok s najnovšími štandardmi a osvedčenými postupmi HTML, ak chcete vytvárať lepšie a vynaliezavejšie webové stránky, ktoré uspokoja súčasné a budúce potreby používateľov. To vám umožní rozpoznať a vyhnúť sa bežným nástrahám, ktoré by negatívne ovplyvnili vašu prácu.
