HTML5 od A do Z - Online kurz

Tyto lekce navazují na úvodní kurz zaměřený na jazyky HTML a CSS. Základní znalost značkovacího jazyka HTML rozšiřuje porozumění o tom, jak funguje jeho nejmodernější varianta HTML5, jaké jsou její standardy a jakým způsobem v HTML5 psát web, aby odpovídal soudobým požadavkům. Hlavní požadavek to je zejména sémantický web, tedy taková stránka, kterou pozitivně ohodnotí roboti vyhledávacích služeb.

18 lekcí

6 vědomostních testů

Proč se zajímat o HTML5?

Jazyk HTML se pro vytváření layoutu a základního obsahu internetových stránek používá už mnoho let a má za sebou dlouhý vývoj. Kvůli proměnám tohoto jazyka, zejména z důvodu měnících se potřeb stále většího, dynamičtějšího a na konkurenci bohatšího internetu, se dnes rozhodně už stránky nepíšou takovým způsobem, jako tomu bylo třeba v 90. letech.

Nejdůležitějším požadavkem na moderně napsaný HTML5 kód je přitom jeho správnost. Důvodem je důraz na zvyšování kvality SEO (Search Engine Optimalization), tedy toho, jaký rating budou stránky dostávat od různých automatických programů vyhledávačů (zejména Googlu). Aby tito roboti vyhodnotili stránku co nejlépe, musí jí v první řadě porozumět. Proto musí jednotlivé prvky na ní být pochopitelné z hlediska jejich textové nebo metatextové funkce a nestačí, když jsou jen nějak naformátovány. Jednodušeji řečeno: když je část textu tučně a velkým písmem, není to pro vyhledávací algoritmus zdaleka tak lákavé, jako když se jedná o nadpis článku.

V praxi tento požadavek sémantičnosti (správnosti) znamená, že některé dříve hojně používané HTML tagy (např. tagy <b> nebo <small>) není vhodné používat, protože pouze říkají, jak něco má vypadat, ale ne, jakou to má funkci. Jiné tagy, pro některé příslušníky starších generací třeba překvapivé, je dnes naopak potřebou opravdu používat (třeba tagy <article> nebo <main>). A právě zejména na užívání těchto moderních sémantických tagů je tento kurz zaměřen. Zároveň slouží i jako jejich pohodlný přehled, obsahující rovněž vysvětlující pasáže a jednoduché příklady. Kdo chce tedy psát HTML živým a správným způsobem, nejjednodušší cestou je začít právě lekcemi zde.

Co tě tento kurz naučí?

Úvodní lekce se zabývají především základním rozložením HTML5 stránky, tedy např. tagy <header>, <main>, <aside>, <section>, <article> a další. Následně se srozumitelným způsobem řeší, jak dělat pokročilejší číslované i nečíslované seznamy (<ul> a <ol>). Poté jsou probírány tabulky (<table>), jejichž reputace je poněkud pošramocena od doby, kdy se v nich (jakožto v nesémantických) přestal dělat layout stránky. Pro přehledy dat jsou však stále důležité, kurz se tedy věnuje i jim.

Pokračuje se na přehledný výklad, jenž je zaměřen na textové tagy, a to od těch zcela stěžejních, až po okrajové a doplňkové. Patří sem třeba odstavce (<p>), nadpisy (<h1>, <h2>,...), citace (<q> a <cite>), zaznačení opravy v textu (<ins> a <del>) a celá řada dalších. Dále se dočteš o práci s multimédii v HTML5 (např. tagy <img>, <map>, <area>, <canvas> či <embed>). Následují podrobné lekce zaměřené na tvorbu moderních formulářů.

V závěru kurzu jsou zmíněny doplňující a méně frekventované tagy, jedna lekce je pak též orientována na zastaralé tagy, jejichž případné užívání by měl každý, kdo chce tvořit moderně fungující web, zvážit. Pokud má zastaralý tag nějakou alternativu, určitě ji zmíníme. Po dokončení tohoto kurzu můžeš pokračovat např. na kurz o responzivním webdesignu, o CSS3 či na lekce věnované SEO jako takovému (optimalizaci pro vyhledávače).