HTML je snadné se naučit a prohlížeče jsou obecně shovívavé k chybám. Přesto byste se měli snažit odstranit chyby a poskytovat efektivní webové stránky.
Základem každého webu je HTML – je to primární jazyk pro strukturování a prezentaci obsahu na webových stránkách.
I ostřílení HTML kodéři se však mohou dopustit jednoduchých chyb, jejichž výsledkem jsou špatně optimalizované webové stránky. A chyby jako tato mohou způsobit problémy s výkonem, použitelností a přístupností.
Chcete-li se jim vyhnout, zkuste si prostudovat následující běžné chyby HTML a objevte tipy, jak jim předcházet.
1. Používání zastaralých prvků HTML
HTML se postupem času měnilo, takže některé prvky a atributy jsou nyní nadbytečné. Moderní prohlížeče nepodporují zastaralé prvky a atributy a jejich používání může negativně ovlivnit rychlost vašeho webu.
The značka pro centrování textu, tag pro formátování textu a tagy pro přeškrtnutý text jsou některé z nejčastěji používaných zastaralých prvků HTML. Pro tyto komponenty byste měli používat moderní ekvivalenty.
Například můžete použijte CSS k vycentrování obsahu, spíše než štítek. Navíc můžete nastavit styly písem pomocí CSS, nikoli pomocí štítek.
2. Nezahrnuje alternativní text pro obrázky
Obrázky jsou sice důležitou součástí online designu, ale diváci se zrakovým postižením je nevidí. Jako takový byste měli přidat popisný alternativní text k fotografiím, aby byly dostupnější.
Alternativní text umožňuje strojům pro převod textu na řeč přečíst popis obrázku uživatelům. Není to však jen pro čtenáře obrazovky; alt text může být přínosem pro optimalizaci pro vyhledávače. Většina prohlížečů také zobrazí alternativní text, pokud se nepodaří načíst obrázek.
3. Nesprávné vnoření prvků HTML
Aby byl zaručen přijatelný kód a správné fungování webu, měly by se prvky HTML správně vnořit. Neadekvátní vnoření může mít neočekávané účinky, včetně nefunkčních rozvržení, chybějícího obsahu a nefunkčních odkazů.
Před otevřením nového byste například měli zavřít každý tag div. Stejně tak byste nikdy neměli tag mimo uspořádaný nebo neuspořádaný seznam.
Značka „div“ je flexibilní prvek HTML používaný pro seskupování a stylování obsahu. Nadměrné používání této značky však může mít za následek špatně organizovaný web a ztížit údržbu kódu.
Měli byste používat sémantické prvky HTML, které dávají obsahu význam, spíše než značky div pro všechno. Můžete použít tag pro záhlaví spíše než tag div. Stejně tak byste měli použít tag pro navigační panel na místě štítek.
5. Bez použití sémantického HTML
Bez použití sémantických prvků jako
Vaše webové stránky mohou mít také nižší hodnocení stránky s výsledky vyhledávače (SERP) pokud mají vyhledávače problémy s indexováním obsahu.
6. Použití inline stylů místo CSS
Vložené styly CSS můžete použít přímo na prvek HTML pomocí atributu style. I když jsou tyto styly užitečné pro rychlé změny, jejich nadměrné používání může ztížit údržbu kódu a snížit efektivitu webu.
V důsledku toho byste měli používat externí soubory CSS, které aplikují styly na web globálně, spíše než vložené styly. Zvyšují výkon webových stránek tím, že snižují kód odeslaný do prohlížeče a také zjednodušují údržbu webových stránek.
7. Bez použití responzivních návrhů
Responzivní design je strategie webdesignu, která umožňuje webům přizpůsobit se různým velikostem obrazovky a zařízení. Tento přístup je nezbytný pro zlepšení dostupnosti webových stránek a uživatelskou zkušenost vzhledem k rostoucímu používání mobilních zařízení.
K aplikaci různých stylů na základě velikosti obrazovky zařízení byste měli používat dotazy na média CSS. To zlepšuje uživatelský dojem, protože zpřístupňuje web na různých zařízeních.
8. Ověření HTML se nezdařilo
Vývoj webu musí začít ověřením HTML, aby bylo zajištěno, že kód je bez chyb a je v souladu s webovými standardy. Neplatný kód HTML může způsobit nefunkční rozvržení, chybějící obsah, nefunkční odkazy a mnoho dalších problémů.
K nalezení a opravě chyb v kódu byste měli používat validátory HTML. Validace kromě správnosti také zlepšuje výkon, dostupnost a optimalizaci pro vyhledávače.
Použití moderního HTML a CSS
S novými funkcemi na obzoru dávají HTML5 a CSS3 vývojářům více zdrojů než kdy jindy k vytváření poutavých webových stránek. Také vývoj standardů přístupnosti webu zlepší uživatelskou zkušenost pro osoby se zdravotním postižením.
Proto je důležité držet krok s nejnovějšími standardy HTML a osvědčenými postupy, pokud chcete vytvářet lepší a vynalézavější webové stránky, které uspokojí současné i budoucí potřeby uživatelů. To vám umožní rozpoznat a vyhnout se běžným nástrahám, které by negativně ovlivnily vaši práci.
