- Používejte správně doctype, html, head a body, abyste prohlížečům a vyhledávačům poskytli předvídatelnou kostru splňující standardy.
- Strukturujte viditelný obsah pomocí sémantických prvků (záhlaví, navigace, hlavní stránka, sekce, článek, vedlejší stránka, zápatí) a přehledné hierarchie nadpisů h1–h6.
- Posilte přístupnost a SEO deklarováním jazyka, používáním orientačních bodů, psaním smysluplného alternativního textu a ověřováním HTML kódu.
- Naplánujte si strukturu stránek a webu předem, aby každý dokument působil konzistentně, byl snadno ovladatelný a snadno se udržoval v průběhu času.
Naučit se strukturovat obsah v HTML je rozdíl mezi stránkou, která jednoduše „zobrazuje něco na obrazovce“, a stránkou, která se snadno ovládá, je přístupná a optimalizovaná pro vyhledávače. Když je váš HTML uspořádán s jasnou hierarchií, prohlížeče, vyhledávače a asistenční technologie okamžitě chápou, co každá sekce znamená a jak to všechno do sebe zapadá.
Místo toho, abyste HTML vnímali jen jako způsob, jak na stránku přidat tagy, je lepší ho vnímat jako plán vašeho dokumentu. Díky pevné struktuře definujete, kde se nachází hlavní obsah, jak spolu souvisí nadpisy, co je navigace, co jsou sekundární informace a které části popisují samotný dokument v záhlaví. V této příručce se hlouběji podíváme na strukturu obsahu v HTML: od globální kostry stránky přes nadpisy, sémantiku, přístupnost až po některé konkrétní vzory rozvržení pro reálné stránky.
1. Globální kostra HTML dokumentu
Každý HTML dokument začíná stejnou strukturou na vysoké úrovni: doctype, html, head a body. Může to vypadat jako šablonovitý text, ale každá část hraje klíčovou roli v tom, jak prohlížeč analyzuje a vykresluje váš obsah a jak vyhledávače interpretují vaši stránku.
Úplně první řádek je deklarace doctype, zapsaná jako <!DOCTYPE html> v HTML5. Tato instrukce neprodukuje viditelný výstup; říká prohlížeči, aby použil standardní režim namísto režimu quirks, čímž se zabrání starším způsobům vykreslování, které mohou zcela narušit vaše rozvržení nebo CSS.
Hned za doctype následuje kořenový element <html>, který obaluje celý dokument. Téměř vše – metadata dokumentu i viditelná stránka – se nachází uvnitř <html>…</html>. Zde také deklarujete lidský jazyk dokumentu pomocí atributu lang, například <html lang=”en”> pro angličtinu nebo <html lang=”es-ES”> pro španělštinu ze Španělska.
Deklarace jazyka pomocí parametru lang je nezbytná pro přístupnost, SEO a překladatelské nástroje. Čtečky obrazovky jej používají k výběru správných pravidel výslovnosti, vyhledávače a automatické překladače jej používají k pochopení primárního jazyka a CSS může dokonce cílit na styling specifický pro daný jazyk pomocí selektorů jako [lang|=”fr”] nebo :lang(en).
Uvnitř kořenového html elementu máte vždy dva přímé potomky: <head> a <body>. Element head obsahuje všechna metadata a zdroje potřebné k interpretaci a prezentaci stránky (kódování, název, CSS, ikony, kanonické URL atd.), zatímco element body obsahuje obsah, který uživatelé skutečně vidí a s nímž interagují v okně prohlížeče.
2. Co patří do (a proč na tom záleží)
Sekce head je pro vidící návštěvníky neviditelná, ale je naprosto zásadní pro to, jak se váš web chová, jak funguje a jak se umisťuje ve výsledcích vyhledávání. Informace, které zde uvedete, pomohou vyhledávačům, sociálním platformám, prohlížečům a zařízením, jak s vaší stránkou zacházet a jak ji prezentovat.
Jednou z prvních věcí v <head> by měla být deklarace kódování znaků pomocí <meta charset=”utf-8″ />. UTF-8 je standard pro HTML5, podporuje prakticky všechny znaky a emoji a zajišťuje, že vaše titulky, text, CSS a JavaScript budou interpretovány správně bez ohledu na použitý jazyk nebo symboly.
Každá stránka musí také definovat jedinečný a popisný prvek <title>. Obsah uvnitř <title>…</title> se zobrazuje na kartě prohlížeče, v záložkách, historii prohlížeče a především jako primární klikatelný nadpis ve výsledcích vyhledávání, pokud není přepsán specifickými meta tagy. Z hlediska SEO je to jeden z nejhodnotnějších textových prvků ve vašem dokumentu.
Dalším téměř povinným meta elementem v moderních rozvrženích je deklarace viewportu. Pomocí <meta name=”viewport” content=”width=device-width, initial-scale=1″ /> sdělíte mobilním prohlížečům, aby přizpůsobily velikost rozvržení šířce zařízení, místo aby zmenšily design pro stolní počítače na malou obrazovku, což je zásadní pro responzivní design a pro absolvování základních auditů mobilních zařízení a přístupnosti.
Kromě znakové sady, názvu a zobrazovací oblasti je záhlaví místem, kde definujete většinu metadat, stylů a klíčových odkazů. Patří sem SEO orientované meta popisy, soubory CSS, ikony webů, alternativní jazykové verze, kanonické URL adresy, webové manifesty, předběžná propojení a mnoho dalšího. Všechny tyto prvky nepřímo přispívají k tomu, jak je struktura vašeho obsahu chápána a jaký je váš web použitelný.
Základní metadata a strukturální zdroje
CSS je obvykle připojeno uvnitř <head> pomocí <link rel=”stylesheet” href=”styles.css”>. Externí styly oddělují prezentaci od struktury, lze je ukládat do mezipaměti napříč stránkami pro lepší výkon a pomáhají udržovat jeden zdroj pravdivých informací pro váš designový systém.
CSS můžete také zahrnout do bloku <style> v rámci <head> nebo odtud dokonce importovat další styly. Vývojáři například někdy používají @import uvnitř tagu style k umístění stylu do určité kaskádové vrstvy nebo deklarují vlastní vlastnosti CSS (proměnné) na úrovni :root, než se na ně odkazují v celém webu.
Element <link> slouží k více účelům než jen ke stylovým šablonám. Změnou atributu rel můžete odkazovat na favicon pomocí rel=”icon”, definovat alternativní jazykové verze pomocí rel=”alternate” a hreflang, zadat kanonickou URL pomocí rel=”canonical” nebo odkazovat na manifesty aplikací a další vztahy, o kterých by prohlížeče a roboty měly vědět.
Definování ikon pomocí <link rel=”icon” …> zajistí, že vaše značka bude rozpoznatelná na kartě a v záložkách prohlížeče. Můžete zadat různé velikosti nebo typy (například PNG nebo SVG) a dokonce poskytnout speciální ikony pro platformy jako iOS pomocí rel=”apple-touch-icon” nebo maskovat ikony pro připnuté karty v Safari.
Alternativní odkazy jsou klíčové pro vícejazyčná nastavení nebo nastavení syndikace obsahu. Když například použijete <link rel=”alternate” href=”…” hreflang=”fr-FR” />, sdělíte vyhledávačům, že existuje francouzská verze stejné stránky a na jakou kombinaci jazyka/regionu cílí. Podobně mohou alternativní odkazy odkazovat na RSS kanály nebo varianty PDF, pokud zadáte vhodný typ.
Kanonické URL adresy, skripty a zřídka používané
Kanonické odkazy s parametrem rel=”canonical” pomáhají řešit situace s duplicitním obsahem tím, že označují, která URL je autoritativním zdrojem. Pokud stejný článek existuje na více cestách nebo je publikován na jiných doménách, kanonická URL konsoliduje signály o hodnocení a zabrání vyhledávači hádat, kterou verzi má indexovat.
JavaScript se připojuje pomocí elementu <script>, který může buď vkládat inline kód, nebo odkazovat na externí soubor pomocí atributu src. Protože JavaScript ve výchozím nastavení blokuje vykreslování, mnoho vývojářů umisťuje tagy skriptů na konec těla kódu nebo používá atributy defer či async, aby se obsah HTML mohl vykreslit před spuštěním skriptů.
Atribut defer říká prohlížeči, aby stáhl skript bez blokování vykreslování a spustil jej po úplném zpracování HTML. Naproti tomu async se také vyhne blokování během stahování, ale spustí skript, jakmile je připraven, což může potenciálně přerušit tok analýzy, což může být problém, pokud skript závisí na prvcích DOM definovaných později v dokumentu.
Prvek <base>, který se zobrazuje pouze v záhlaví, definuje základní URL a výchozí cíl pro všechny relativní odkazy. Nastavením <base href=”https://example.com” target=”_top” /> v podstatě sdělíte prohlížeči, že každá relativní URL na stránce by měla být vyhodnocena z daného kořenového adresáře a volitelně otevřena v určitém kontextu prohlížení, například v novém okně nebo v rámci nejvyšší úrovně.
Ačkoli může být prvek <base> mocný, má vedlejší účinky, zejména pro kotvy na stránce a relativní cesty k prostředkům. V jednom dokumentu je povolen pouze jeden základní prvek, musí se nacházet před všemi relativními URL adresami a transformuje jednoduché kotvy, jako je <a href=”#section”>, na požadavky na plné URL adresy s fragmenty připojenými k základnímu prvku href.
3. Vrstva viditelného obsahu: a sémantické rozvržení
Všechno, co uživatelé skutečně vidí a s čím interagují, se nachází uvnitř elementu <body>. Zde strukturujete svůj obsah pomocí sémantických elementů, které popisují roli jednotlivých částí stránky: navigace, hlavní obsah, články, postranní panely, zápatí a další.
HTML5 zavedlo sadu sémantických prvků rozvržení, které v mnoha situacích nahradily generické kontejnery <div>. Prvky jako <header>, <nav>, <main>, <section>, <article>, <aside> a <footer> popisují význam, nikoli pouhý vzhled, což pomáhá asistenčním technologiím a vyhledávačům vytvořit si mentální mapu vaší stránky.
Prvek <header> obvykle obsahuje úvodní obsah nebo navigaci pro stránku nebo pro konkrétní sekci. Může se jednat o logo, název webu, hlavní nabídku nebo nadpis. Záhlaví na úrovni stránky můžete mít v horní části textu a další záhlaví uvnitř sekcí nebo článků, pokud potřebujete dílčí úvody.
Prvek <nav> je určen pro navigační bloky a obvykle se používá pro hlavní nabídky nebo skupiny důležitých odkazů. Hlavní navigaci můžete umístit do záhlaví, ale prvek <nav> se může zobrazit i jinde, například v postranním panelu nebo zápatí, pokud je určen pro navigaci a ne pro generické soubory nesouvisejících odkazů.
<main> označuje jedinečný, centrální obsah stránky a měl by se v každém dokumentu objevit pouze jednou. V rámci <main> obvykle organizujete obsah pomocí <section> pro tematické bloky, <article> pro nezávislé části, jako jsou příspěvky na blogu nebo novinky, a <aside> pro související, ale sekundární informace, jako jsou poznámky k příspěvku, reklamy nebo doplňková navigace.
Sekce, články, odstavce a zápatí
<section> představuje tematicky odlišný blok obsahu, obvykle s vlastním nadpisem. Může se jednat o kapitolu v dlouhém článku, blok „Funkce“ na stránce produktu nebo část vaší domovské stránky, například „Reference“ nebo „Ceník“. Sekce pomáhají rozdělit složité dokumenty do logických bloků.
Etiketa <article> se používá pro samostatný obsah, který může existovat samostatně mimo okolní kontext. Mezi příklady patří příspěvky na blogu, dokumentace, komentáře uživatelů, novinky nebo zprávy na fóru. Článek často obsahuje vlastní záhlaví (s názvem, autorem a datem) a zápatí (s tagy, odkazy na sdílení nebo metadaty).
<aside> je vyhrazen pro obsah, který se s hlavním tokom jen okrajově vztahuje, jako jsou postranní panely, citace, související odkazy nebo reklamní bloky. Protože má doplňkový účel, čtečky obrazovky a další nástroje s ním mohou zacházet odpovídajícím způsobem a uživatelé tak mohou snáze rozlišit hlavní narativ od vedlejšího obsahu.
Prvek <footer> se zobrazuje na konci sekce nebo ve spodní části celé stránky. Patička na úrovni stránky obvykle obsahuje upozornění na autorská práva, kontaktní informace, sekundární navigaci, právní odkazy nebo informace o zdrojích, zatímco patička na úrovni článku může obsahovat životopisy autorů, kategorie, data aktualizací nebo související příspěvky.
Flexibilita těchto prvků znamená, že je můžete kombinovat a vnořovat tak, aby odpovídaly vašemu designu, ale dodržování jejich zamýšleného významu udrží váš HTML přenositelný a srozumitelný. Například můžete legitimně umístit nav do záhlaví nebo jinam v těle stránky, ale neměli byste používat nav pro náhodné sady odkazů, které nejsou součástí navigace, ani používat main vícekrát na stránce.
4. Hierarchie nadpisů a textová struktura
Nadpisy jsou páteří struktury vašeho obsahu a definují hierarchii témat a podtémat v celém dokumentu. HTML nabízí šest úrovní nadpisů, od <h1> (nejdůležitější) až po <h6> (nejméně důležité), a způsob, jakým je uspořádáte, ovlivňuje jak lidské čtenáře, tak vyhledávače.
Obvykle existuje jeden <h1>, který vyjadřuje hlavní téma stránky, následovaný <h2> pro primární sekce a <h3>-<h6> pro hlubší podsekce. Pokud dva nadpisy sdílejí stejnou úroveň, představují sourozenecké sekce, zatímco nadpis nižší úrovně zavádí vnořenou podsekci v rámci předchozí podsekce vyšší úrovně.
Odstavce a další obsah, které následují za nadpisem, patří do sekce definované tímto nadpisem. Když se objeví nový nadpis stejné úrovně, předchozí sekce se považuje za uzavřenou a začíná nová. Tuto implicitní strukturu používají asistenční technologie k vytvoření osnovy, kterou mohou uživatelé rychle procházet.
Svévolné přeskakování úrovní – například skok přímo z h1 na h4 – může zmást automatizované nástroje i čtenáře. Obecným doporučením je postupovat v hierarchii krok za krokem: z h1 na h2 pro podsekce, poté volitelně na h3 atd., přičemž při hloubějším vnořování obsahu sestupujte pouze o jednu úroveň dolů.
Prohlížeče obvykle používají pro nadpisy výchozí styly: větší písmo, tučné písmo a větší svislé řádkování. Tyto vestavěné styly již vizuálně zřetelně zdůrazňují strukturu, ale prezentaci můžete vylepšit pomocí CSS a zároveň zachovat základní sémantickou hierarchii.
Odstavce, seznamy a inline sémantika
Normální textový obsah se umisťuje do elementů <p>, z nichž každý představuje samostatný odstavec. Zachování jedné hlavní myšlenky na odstavec zlepšuje čitelnost a je v souladu s tím, jak asistenční technologie umožňují uživatelům procházet bloky textu.
Seřazené seznamy (<ol>) a neuspořádané seznamy (<ul>) s položkami <li> jsou ideální pro seskupené informace, jako jsou kroky, funkce nebo často kladené otázky. Seřazené seznamy vyjadřují pořadí nebo prioritu, zatímco neuspořádané seznamy jednoduše seskupují související položky bez nutnosti naznačovat pořadí; oba jsou mimořádně užitečné pro strukturování složitých vysvětlení.
Vložené prvky jako <strong>, <em>, <a>, <span> a další obohacují obsah, aniž by narušovaly plynulost odstavce. <strong> vyjadřuje důležitost (a obvykle se zobrazuje tučně), <em> zdůrazňuje text (často kurzívou) a <a href=”…”> vytváří hypertextové odkazy, které propojují dokumenty napříč vaším webem nebo s externími zdroji.
Obrázky s tagem <img> jsou považovány za nahrazené prvky a neobalují obsah, ale stále se podílejí na sémantické struktuře prostřednictvím atributů, jako je alt. Atribut alt je obzvláště důležitý pro přístupnost a SEO, protože popisuje obrázek uživatelům, kteří jej nevidí, a vyhledávačům, které analyzují pouze text.
Promyšlená kombinace blokových a inline elementů umožňuje vyjádřit hierarchii, vztahy a důraz čistě pomocí HTML a ponechat vizuální detaily, jako jsou barvy, fonty a mezery, na CSS. Toto oddělení odpovědností udržuje vaše kódování čisté a usnadňuje pozdější změny designu.
5. Přístupnost a jazyk ve struktuře obsahu
Dobře strukturovaný HTML dokument není jen o úhledném vzhledu; je nezbytným předpokladem pro přístupnost. Lidé, kteří se spoléhají na čtečky obrazovky, navigaci pomocí klávesnice nebo jiné asistenční technologie, se spoléhají na sémantiku HTML, aby pochopili obsah a efektivně se v něm pohybovali.
Deklarace jazyka dokumentu pomocí langu v elementu <html> je jedním z prvních kroků k zajištění přístupnosti. Pokud je jazyk explicitně zadán, čtečky obrazovky vyberou správnou výslovnost a slovníky a automatické překladové nástroje zpracují váš obsah přesněji napříč regiony a dialekty.
Změny jazyka můžete také označit uvnitř těla kódu pomocí parametru lang u prvků jako <span> nebo <p>. Když se fragment přepne do jiného jazyka, nastavení parametru lang=”fr-CA” nebo lang=”pt-BR” u daného úryvku signalizuje pomocným nástrojům, že by se pravidla výslovnosti a čtení měla změnit pouze pro danou část.
Kromě jazyka tvoří jádro přístupné struktury nadpisy, orientační body a alternativní text. Jasná hierarchie nadpisů, správné použití atributů main, nav, header, footer, section a aside a smysluplné atributy alt u obrázků umožňují asistenčním technologiím vytvářet osnovu a poskytovat navigaci pomocí orientačních bodů, jako je „přejít na hlavní obsah“ nebo „přejít na navigaci“.
Pouhé barvy a vizuální styly by nikdy neměly být jediným způsobem, jak sdělit důležité informace. Vysoký kontrast, čitelné velikosti písma, aktivní stavy interaktivních prvků a popisné texty odkazů, například „Přečtěte si více o požární ochraně“ namísto pouhého „Klikněte zde“, to vše je součástí toho, aby byl váš strukturovaný obsah použitelný pro co nejvíce lidí.
Ověřování HTML kódu a provádění kontrol přístupnosti pomocí automatizovaných nástrojů a manuálních testů pomáhá včas odhalit strukturální problémy. Nástroje dokáží detekovat chybějící atributy alt, neplatné vnoření, poškozené sekvence nadpisů nebo nesprávné použití orientačních bodů, což vše lze opravit přímo ve vašem kódu, než se projeví u skutečných uživatelů.
6. Plánování obsahové struktury webových stránek
Než napíšete jediný tag, vyplatí se naplánovat logickou strukturu vašeho webu a stránek. Přemýšlení o sekcích, informačních prioritách a navigačních tocích vede k HTML, které se snáze udržuje, rozšiřuje a optimalizuje pro vyhledávače.
Běžným výchozím bodem je načrtnutí mapy webu nebo strukturálního diagramu webu. Ten obvykle zahrnuje stránky nejvyšší úrovně, jako je Domů, O webu, Služby, Blog, Kontakt, a poté jakékoli podstránky nebo kategorie, které se od nich odvíjejí a ukazují, jak se mezi nimi uživatelé budou pohybovat.
V rámci jedné stránky si můžete naplánovat budoucí strukturu HTML jako sérii sémantických bloků. Můžete například definovat záhlaví s logem a navigací, hlavní oblast s několika sekcemi (hlavní stránka, funkce, reference, ceny), odstavec pro sekundární obsah a zápatí s kontaktními informacemi a odkazy na právní záležitosti.
Přiřazení nadpisů těmto blokům v rané fázi udržuje hierarchii h1-h6 soudržnou. Předem se rozhodnete, jaký bude jeden h1, které sekce si zaslouží nadpisy h2 a kde jsou nutné hlubší podnadpisy, jako například h3 nebo h4, k vysvětlení složitých témat, aniž by to čtenáře zahltilo.
Z hlediska SEO a UX je chytré umístit klíčový obsah a důležité sekce dříve v DOMu. Vyhledávače obecně věnují větší pozornost obsahu v horní části dokumentu a uživatelé oceňují rychlé nalezení primárních informací, než aby museli procházet dlouhými úvody nebo dekorativními prvky.
Nejlepší postupy pro udržovatelné HTML struktury
V případě potřeby používejte k označení strukturálních prvků popisné názvy tříd a ID, ale vyhněte se nadměrnému vnořování prvků div. Třídy jako .main-nav, .site-header nebo .sidebar vám na první pohled sdělí, co komponenta dělá, takže HTML a CSS se budou i po měsících mnohem lépe číst.
Udržujte HTML kód co nejplošší a zároveň vyjadřujte skutečnou hierarchii. Hluboce vnořené kontejnery, které existují pouze pro styling, lze často nahradit promyšlenějším CSS, což vede k čistšímu a lehčímu kódování, se kterým se všem snáze pracuje.
Související obsah seskupujte do sémantických prvků, místo abyste ho rozptýlili po stránce. Například blogový příspěvek by měl být umístěn uvnitř článku, s názvem, datem, autorem a obsahem pohromadě, zatímco související příspěvky nebo životopis autora mohou být umístěny v odstavci nebo v zápatí článku, jasně oddělené od hlavního vyprávění.
Při rozšiřování stránky nebo přepracování sekce se vraťte ke své struktuře. V dokumentech HTML se v průběhu času snadno hromadí jednorázové obalovací prvky a ad-hoc prvky, takže jejich pravidelné refaktorování zpět do uceleného sémantického tvaru se vyplatí z hlediska udržovatelnosti, výkonu a přístupnosti.
Dokumentace strukturálních vzorců – například způsobu tvorby záhlaví, sekcí, článků a zápatí – pomáhá udržovat konzistenci ve velkých týmech. Malý interní pokyn, který vysvětluje, jaké prvky používat pro navigaci, jak organizovat nadpisy a jak označovat opakované komponenty, může zabránit tomu, aby se vaše kódová základna proměnila ve strukturální mozaiku.
7. Praktické strukturální vzory pro běžné typy stránek
Různé typy stránek obvykle sdílejí strukturální vzorce, které můžete znovu použít a přizpůsobit napříč projekty. Rozpoznání těchto vzorů vám pomůže navrhnout struktury obsahu, které budou pro uživatele přirozené a snadno se implementují v HTML.
Typická domovská stránka může začínat globálním prvkem <header> obsahujícím logo a primární prvek <nav>. Často následuje prvek <main> s několika bloky <section>: hlavní sekce s tečkou h1 a výzvou k akci, sekce s funkcemi, případně sekce s referencemi a poslední sekce, která vyzývá uživatele, aby se s námi spojili nebo se zaregistrovali.
Pod hlavním obsahem se obvykle nachází <footer>, který poskytuje globální informace a doplňkovou navigaci. Zde se nacházejí odkazy na zásady ochrany osobních údajů, podmínky služby, možnosti kontaktu, sociální sítě a sekundární nabídky, takže je snadno najdete, aniž by odváděly pozornost od primárního obsahu výše.
Stránka blogového příspěvku je perfektním kandidátem pro prvek <article>. Článek by obvykle obsahoval vlastní hlavičku s názvem příspěvku (často h1 stránky), datem publikace a údaji o autorovi, následovanou tělem příspěvku, rozděleným do sekcí s nadpisy h2/h3, a nakonec patičkou článku obsahující tagy, tlačítka pro sdílení nebo odkazy na související obsah.
Postranní panely neboli sekundární panely jsou přirozeně reprezentovány prvky <aside>. Mohou obsahovat seznamy nedávných příspěvků, filtry kategorií, formuláře pro registraci k odběru newsletteru nebo kontextovou nápovědu. Protože je element <aside> sémanticky označen jako doplňkový obsah, mohou jej asistenční technologie uživatelům jako takový prezentovat.
Stránky s kontakty a stránky se službami používají stejné stavební bloky, ale kladou důraz na srozumitelnost a snadnou interakci. Jasné nadpisy, stručné odstavce, správně označené ovládací prvky formuláře a logické pořadí čtení zajišťují, že uživatelé bez dohadů najdou, jak vás kontaktovat nebo porozumět vaší nabídce.
8. HTML elementy, atributy a jejich role ve struktuře
Pod všemi těmito vzory se vše v HTML scvrkává na elementy, tagy a atributy. Pochopení toho, jak spolupracují, vám dává přesnou kontrolu nad strukturou obsahu, prezentačními hooky a chováním.
HTML element se skládá z úvodní značky, volitelných atributů, určitého obsahu a ve většině případů z uzavírací značky. Například <p>Toto je odstavec.</p> obsahuje počáteční značku <p>, textový uzel a koncovou značku </p>, které dohromady představují element odstavce.
Atributy se zobrazují uvnitř úvodní značky a poskytují další informace o elementu. Existují jako páry name=”value”, například class=”highlight”, id=”intro” nebo href=”/contact”. Některé atributy jsou globální a mohou se objevit u libovolného elementu (například class, id, lang), zatímco jiné jsou specifické pro určité značky (například src pro img nebo type pro input).
Třídy jsou obzvláště důležité pro strukturování a stylování větších dokumentů. Přiřazením stejné třídy více prvkům – například class=”important” – můžete použít běžná pravidla CSS nebo je cílit v JavaScriptu, čímž si zachováte flexibilitu a zároveň snadnou správu struktury.
Ne všechny elementy potřebují uzavírací tagy; některé jsou prázdné (void) elementy, které nemají obsah. Elementy jako <img>, <meta>, <link> a <br> spadají do této kategorie. Stále se podílejí na vaší struktuře, ale pouze prostřednictvím svých atributů, protože neobalují žádný vnitřní text ani podřízené elementy.
Konsorcium World Wide Web (W3C) udržuje specifikaci, která definuje, jak všechny tyto prvky a atributy spolupracují. Dodržování těchto standardů zajišťuje interoperabilitu vašich stránek napříč prohlížeči a zařízeními a zajišťuje, že pečlivě navržená struktura obsahu se chová předvídatelně pro každého návštěvníka.
Uvedení všech těchto bodů do praxe znamená zacházet s HTML jako se sémantickou páteří vašeho webu: jasná osnova dokumentu, přesné použití nadpisů, promyšlené rozvržení s hlavní částí, sekcí, článkem, stranou a patičkou, přístupná metadata v záhlaví a smysluplné atributy u každého prvku společně usnadňují čtení, navigaci a dobré umístění vašeho obsahu ve vyhledávačích.
