Struktura HTML dokumentu
Každý HTML dokument má pevnou strukturu: DOCTYPE deklaraci, element html s atributem jazyka, head sekci (metadata, title, propojení stylů) a body (viditelný obsah stránky). V body používáte sémantické elementy jako header, nav, main, article, section a footer, které říkají prohlížeči i vyhledávačům, jaký typ obsahu daná část obsahuje. Správná struktura je základ pro SEO i přístupnost.
Sémantické HTML a SEO
Sémantické HTML znamená používat správné tagy pro správný účel — h1 pro hlavní nadpis (jeden na stránce), h2-h6 pro podnadpisy, p pro odstavce, ul/ol pro seznamy, a pro odkazy. Vyhledávače jako Google analyzují HTML strukturu, aby pochopily obsah stránky. Web s čistým, sémantickým HTML má lepší šance na dobré pozice ve vyhledávání. Také screen readery pro nevidomé uživatele spoléhají na správnou sémantiku.
HTML5 a moderní web
HTML5 (aktuální verze) přineslo nativní podporu pro video a audio, canvas pro kreslení, geolokaci, local storage pro ukládání dat v prohlížeči a formulářové elementy jako datepicker nebo range slider. Dříve tyto funkce vyžadovaly Flash nebo složitý JavaScript. HTML5 také zavedlo sémantické elementy (article, section, nav, aside), které zlepšily strukturu dokumentu a usnadnily práci vyhledávačům.
HTML v moderním vývoji
V moderních frameworcích jako React nebo Next.js nepíšete HTML přímo, ale používáte JSX — syntaxi podobnou HTML, která se kompiluje do JavaScriptu a ten pak generuje HTML. Přesto je znalost HTML zásadní, protože JSX dodržuje stejná pravidla. V Appitect klademe velký důraz na kvalitu výstupního HTML — správná hierarchie nadpisů, alt texty u obrázků, ARIA atributy pro přístupnost a meta tagy pro SEO.
Praktický příklad
Představte si firemní web. HTML definuje: logo v headeru je obrázek (img) s alt textem, navigace je seznam odkazů v nav elementu, hlavní nadpis je h1, služby jsou article elementy v section, kontaktní formulář obsahuje label a input prvky. Bez HTML by prohlížeč neměl žádný obsah k zobrazení. CSS pak přidá barvy a rozložení, JavaScript interaktivitu — ale HTML je vždy základ.