HTML/Markup

Tag

Co je to tag?

Tag, neboli značka, je HTML element nebo označovací prvek, který strukturuje obsah webové stránky a říká prohlížeči, jak má jednotlivé části zobrazit. Každá webová stránka je postavena z HTML tagů – nadpisy, odstavce, obrázky, odkazy, formuláře, všechno jsou tagy. Představte si tag jako obálku nebo kontejner, který obaluje určitý obsah a dodává mu význam a vizuální podobu. Například tag <h1> říká: "Toto je hlavní nadpis stránky" a prohlížeč ho zobrazí velkým tučným písmem. Tag <p> znamená odstavec textu, tag <img> vloží obrázek, tag <a> vytvoří klikací odkaz. Tagy píšeme v lomených závorkách a většinou existují ve dvojicích – otevírací tag <p> a uzavírací tag </p> s lomítkem. Mezi nimi je obsah, který tag ovlivňuje. Bez HTML tagů by webová stránka byla jen dlouhým neformátovaným textem bez struktury. Právě tagy vytvářejí hierarchii, navigaci, formuláře a interaktivní prvky, které dělají web použitelným a přehledným. Pro majitele webu je důležité chápat základní tagy, protože ovlivňují nejen vzhled, ale i SEO – vyhledávače používají tagy pro pochopení struktury a významu obsahu.

Základní struktura HTML tagů

HTML dokument má jasně definovanou strukturu složenou z několika povinných tagů, které tvoří kostru každé webové stránky.

  • Tag <html>

    • Tag <html> je kořenový element, který obaluje celý HTML dokument. Říká prohlížeči: "Zde začíná HTML kód." Všechno ostatní je vnořené uvnitř tohoto tagu. Obsahuje atribut lang="cs" pro češtinu, který pomáhá prohlížečům a vyhledávačům pochopit jazyk stránky.

  • Tag <head>

    • Tag <head> obsahuje metadata – informace o stránce, které se přímo nezobrazují návštevníkům. Patří sem titulek stránky (<title>), popis pro vyhledávače (<meta name="description">), odkazy na styly CSS, fonty, ikony, strukturovaná data a další technické informace. Obsah <head> je kritický pro vyhledávače, sdílení na sociálních sítích a správné zobrazení stránky.

  • Tag <body>

    • Tag <body> obsahuje veškerý viditelný obsah stránky – nadpisy, texty, obrázky, videa, tlačítka, formuláře. Vše, co návštevník vidí a s čím interaguje, je uvnitř <body>. Zde probíhá strukturování obsahu pomocí dalších tagů.

Sémantické HTML tagy

Sémantické tagy přidávají obsahu význam a pomáhají prohlížečům, vyhledávačům a asistenčním technologiím lépe pochopit strukturu stránky.

  • Tag <header> a <footer>

    • Tag <header> označuje hlavičku stránky nebo sekce – obvykle obsahuje logo, navigaci a úvodní prvky. Tag <footer> označuje patičku s kontakty, copyrightem, odkazy na sociální sítě a doplňkovými informacemi. Tyto tagy nezpůsobují žádné speciální vizuální zobrazení, ale přidávají sémantický význam, který je užitečný pro SEO a přístupnost.

  • Tag <nav>

    • Tag <nav> označuje navigační sekci webu – menu s odkazy na hlavní stránky. Říká vyhledávačům a screen readerům: "Toto je navigace." Pomáhá uživatelům s handicapem rychle najít menu a přejít na jinou část webu.

  • Tag <main>, <section>, <article>, <aside>

    • Tag <main> obaluje hlavní obsah stránky – unikátní informace, které se liší stránku od stránky. <section> rozděluje obsah na logické sekce (například "O nás", "Služby", "Reference"). <article> označuje samostatný, uzavřený obsah, který dává smysl sám o sobě – blog článek, produktová karta, komentář. <aside> označuje doplňkový obsah – sidebar, reklamy, související články. Správné použití sémantických tagů zlepšuje SEO a přístupnost.

Tagy pro formátování textu

Text na webu strukturujeme a formátujeme pomocí specifických tagů, které ovlivňují vzhled i význam.

  • Nadpisy <h1> až <h6>

    • Nadpisové tagy <h1> až <h6> vytvářejí hierarchii nadpisů – <h1> je hlavní nadpis stránky (měl by být na každé stránce právě jeden), <h2> jsou kapitoly, <h3> podkapitoly atd. Správná hierarchie nadpisů je kritická pro SEO – vyhledávače používají nadpisy k pochopení struktury a tématu obsahu. Nikdy nepřeskakujte úrovně (z <h2> rovnou na <h4>), zachovávejte logickou strukturu.

  • Odstavce <p> a řádkové zlomy <br>

    • Tag <p> vytváří odstavec textu – základní blok textového obsahu. Prohlížeč automaticky přidává mezeru před a za odstavcem. Tag <br> vloží jednoduchý řádkový zlom uvnitř textu bez vytvoření nového odstavce (používejte opatrně, často je lepší strukturovat text pomocí odstavců).

  • Zvýraznění <strong>, <em>, <b>, <i>

    • Tag <strong> označuje důležitý text (obvykle se zobrazí tučně) a má sémantický význam – říká: "Tento text je důležitý." Tag <em> zdůrazňuje text kurzívou s významem zvýraznění. Tagy <b> (tučně) a <i> (kurzíva) mění jen vizuální podobu bez sémantického významu. Pro SEO a přístupnost preferujte <strong> a <em>.

  • Seznamy <ul>, <ol>, <li>

    • Tag <ul> vytváří nečíslovaný seznam (odrážky), <ol> číslovaný seznam, <li> označuje položku v seznamu. Seznamy strukturují informace a zlepšují čitelnost – použijte je pro výčty, návody krok za krokem nebo výhody služby.

Tagy pro multimediální obsah

Moderní weby kombinují text s obrázky, videi a interaktivními prvky.

  • Tag <img>

    • Tag <img> vkládá obrázek do stránky. Vyžaduje atribut src="cesta/k/obrazku.jpg" s cestou k souboru a alt="Popisek obrázku" s textovým popisem pro screen readery a situace, kdy se obrázek nenačte. Atribut alt je kritický pro přístupnost a vyhledávače – Google používá alt text k pochopení obsahu obrázku. Moderní praktika zahrnuje také atributy width a height pro rezervaci místa a loading="lazy" pro odložené načítání.

  • Tag <video> a <audio>

    • Tagy <video> a <audio> vkládají video a audio přímo do stránky bez nutnosti externích přehrávačů. Podporují atributy jako controls (zobrazí ovládací prvky), autoplay (automatické přehrávání, používejte opatrně) a loop (opakování).

  • Tag <iframe>

    • Tag <iframe> vkládá do stránky obsah z jiného zdroje – YouTube video, Google mapy, vložený kalendář. Vytváří samostatný embedded dokument uvnitř vaší stránky. Používejte opatrně, iframe může ovlivnit rychlost načítání a bezpečnost.

Tagy pro odkazy a navigaci

Odkazy jsou DNA internetu – spojují stránky a umožňují navigaci.

  • Tag <a> (anchor)

    • Tag <a> vytváří hypertextový odkaz – klikací prvek, který přesměruje na jinou stránku nebo část stránky. Vyžaduje atribut href="URL" s cílovou adresou. Například <a href="kontakt.php">Kontakt</a> vytvoří link na stránku kontakt.php. Atribut target="_blank" otevře odkaz v novém okně (používejte spolu s rel="noopener noreferrer" pro bezpečnost). Atribut rel="nofollow" říká vyhledávačům, aby odkaz nesledovaly (používá se pro placené odkazy nebo nedůvěryhodný obsah).

Tagy pro formuláře

Formuláře umožňují návštevníkům interagovat s webem – odesílat dotazy, registrovat se, vyhledávat.

  • Tag <form>

    • Tag <form> obaluje celý formulář a definuje, kam se data odešlou (atribut action="send-form.php") a jakou metodou (method="POST" nebo GET). Uvnitř formuláře jsou jednotlivá vstupní pole.

  • Tag <input>

    • Tag <input> vytváří vstupní pole různých typů – type="text" pro textový input, type="email" pro emailovou adresu s validací, type="password" pro heslo (zobrazí hvězdičky), type="checkbox" pro zaškrtávací pole, type="radio" pro výběr jedné možnosti z více. Každý input by měl mít atribut name pro identifikaci na serveru a id pro propojení s labelem.

  • Tag <label>

    • Tag <label> vytváří popisek pro vstupní pole. Propojení pomocí atributu for="id-inputu" zlepšuje přístupnost – kliknutím na label se aktivuje příslušné vstupní pole. Pro screen readery je label klíčový pro pochopení, co má uživatel vyplnit.

  • Tag <textarea> a <button>

    • Tag <textarea> vytváří víceřádkové textové pole (například pro zprávu v kontaktním formuláři). Tag <button> vytváří klikací tlačítko – obvykle s type="submit" pro odeslání formuláře.

Tagy pro metadata a SEO

Některé tagy jsou neviditelné pro návštevníky, ale kritické pro vyhledávače a sociální sítě.

  • Tag <title>

    • Tag <title> v sekci <head> definuje titulek stránky, který se zobrazuje v záložce prohlížeče a ve výsledcích vyhledávání Google. Je to jeden z nejdůležitějších SEO faktorů – měl by být unikátní pro každou stránku, obsahovat klíčová slova a být lákavý (50–60 znaků je optimální délka).

  • Meta tag <meta name="description">

    • Meta description tag poskytuje krátký popis stránky (150–160 znaků), který se zobrazuje pod titulkem ve výsledcích vyhledávání. Není přímý ranking faktor, ale ovlivňuje míru prokliků (CTR) – kvalitní popis přiměje lidi kliknout právě na váš výsledek.

  • Open Graph a Twitter Card meta tagy

    • Open Graph meta tagy (<meta property="og:title">, og:description, og:image) říkají Facebooku a LinkedIn, jak zobrazit náhled při sdílení odkazu. Twitter Card meta tagy (<meta name="twitter:card">) dělají totéž pro Twitter. Správně nastavené OG tagy zajistí, že při sdílení článku se zobrazí atraktivní obrázek, titulek a popis místo prázdného odkazu.

Atributy tagů

Tagy často obsahují atributy, které dále specifikují jejich chování nebo vlastnosti.

  • Globální atributy (id, class, style)

    • Atribut id="unikatni-identifikator" přiřazuje prvku unikátní identifikátor použitelný pro CSS stylování, JavaScript manipulaci nebo kotevní odkazy. Atribut class="nazev-tridy" přiřazuje CSS třídu pro aplikaci stylů na více prvků. Atribut style="color: red;" umožňuje inline CSS (raději používejte externí styly).

  • Atributy pro přístupnost (aria-*, role)

    • ARIA atributy (aria-label, aria-describedby, aria-hidden) zlepšují přístupnost pro uživatele screen readerů. Atribut role definuje účel prvku (například role="navigation", role="button"). Správné použití přístupnostních atributů činí web použitelný pro lidi s handicapem.

Časté chyby při používání tagů

Nesprávné použití HTML tagů může způsobit problémy s zobrazením, SEO a přístupností.

  • Neopravené nebo nepárované tagy

    • Každý otevírací tag musí mít uzavírací tag (s výjimkou self-closing tagů jako <img> nebo <br>). Zapomenutý uzavírací tag může rozhodit celé rozložení stránky. Moderní prohlížeče se snaží chyby opravit automaticky, ale výsledek může být nepředvídatelný.

  • Nesprávná hierarchie nadpisů

    • Přeskočení úrovně nadpisu (z <h1> rovnou na <h3>) nebo více <h1> na jedné stránce je chyba. Každá stránka by měla mít právě jeden <h1> hlavní nadpis a logickou hierarchii podnadpisů.

  • Chybějící alt atributy u obrázků

    • Obrázek bez alt atributu je nepřístupný pro screen readery a ztrácí SEO hodnotu. Vždy vyplňujte alt s výstižným popisem (vyjma dekorativních obrázků, kde použijte alt="").

Tagy a SEO

Správné použití HTML tagů má přímý dopad na výkon webu ve vyhledávačích.

  • Sémantické značkování a ranking

    • Google a další vyhledávače používají HTML tagy k pochopení struktury a významu obsahu. Správné použití sémantických tagů (<article>, <nav>, nadpisů <h1>-<h6>) pomáhá vyhledávačům lépe indexovat obsah a hodnotit relevanci pro konkrétní dotazy.

  • Rich snippets a strukturované tagy

    • Použití strukturovaných dat tagů (JSON-LD) umožňuje Google zobrazit bohaté výsledky (hvězdičky recenzí, FAQ rozbalení, breadcrumbs, recepty s časem a hodnocením). Rich snippets zvyšují viditelnost a míru prokliků (CTR) ve vyhledávání.

Nejčastější otázky o HTML tagu

Co je to HTML tag a k čemu slouží? Rozbalit

HTML tag je základní stavební kámen webových stránek – značka, která definuje, jak se má obsah zobrazit a jaký má význam. Tag se píše v lomených závorkách, například <p> pro odstavec nebo <h1> pro hlavní nadpis. Většina tagů je párová – skládají se z otevírací značky <p> a uzavírací značky </p> (s lomítkem). Mezi nimi je obsah: <p>Toto je odstavec textu.</p>. Tagy sdělují prohlížeči, jak má stránku vykreslit – kde jsou nadpisy, odstavce, odkazy, obrázky nebo tlačítka. Kromě vizuálního zobrazení mají tagy důležitý sémantický význam – říkají vyhledávačům a asistenčním technologiím, o jaký typ obsahu jde. Správné používání HTML tagů je základem přístupnosti, SEO optimalizace a čistého kódu. Bez tagů by web byl jen holý text bez struktury a formátování.

Jaký je rozdíl mezi tagem a HTML elementem? Rozbalit

Tag a element jsou úzce spojené pojmy, ale technicky se liší. Tag je samotná značka v lomených závorkách (<p> nebo </p>), zatímco element je kompletní struktura včetně otevíracího tagu, obsahu a uzavíracího tagu. Například: <p> je otevírací tag, </p> je uzavírací tag, ale <p>Tento text je obsah.</p> je kompletní HTML element. Element tedy tvoří tag + obsah + uzavírací tag. V běžné konverzaci se ale tyto pojmy často zaměňují a používají jako synonyma – když někdo řekne "tag p", myslí tím obvykle celý element <p>...</p>. Důležitější než terminologie je porozumění, že každý element má svůj účel: <h1> pro hlavní nadpis, <p> pro odstavec, <a> pro odkaz atd.

Jaké jsou nejdůležitější HTML tagy pro začátečníky? Rozbalit

Pro tvorbu základního webu potřebujete znát několik klíčových tagů. Nadpisy: <h1> až <h6> strukturují obsah (h1 je hlavní nadpis stránky, h2-h6 podnadpisy). Odstavec: <p> pro text. Odkaz: <a href="url">text odkazu</a> pro propojení stránek. Obrázek: <img src="obrazek.jpg" alt="popis"> pro vložení fotky. Kontejnery: <div> pro blokové sekce a <span> pro inline části textu. Seznamy: <ul> (nečíslovaný) a <ol> (číslovaný) s položkami <li>. Zvýraznění: <strong> pro tučný text (s důležitostí) a <em> pro kurzívu. Formulářové elementy: <form>, <input>, <button>. Sémantické HTML5 tagy: <header>, <nav>, <main>, <article>, <section>, <footer> pro lepší strukturu. Tyto tagy pokrývají 90 % běžných potřeb a jsou základem každého webu.

Jak HTML tagy ovlivňují SEO? Rozbalit

HTML tagy mají přímý vliv na SEO, protože vyhledávače jako Google je používají k pochopení struktury a významu obsahu. Nadpisové tagy (H1-H6) jsou kritické – <h1> by měl obsahovat hlavní klíčové slovo stránky a každá stránka by měla mít právě jeden H1. Podnadpisy H2-H6 strukturují obsah a pomáhají Googlu pochopit téma. Tag <title> (v hlavičce stránky) je nejdůležitější SEO prvek – zobrazuje se ve výsledcích vyhledávání. Meta tag <meta name="description"> poskytuje popis stránky pro vyhledávače. Anchor tag <a> s dobrým anchor textem pomáhá s interním linkováním. Sémantické tagy jako <article>, <nav> nebo <aside> zlepšují pochopení struktury. Alt atribut u <img> tagů popisuje obrázky pro vyhledávače i nevidomé uživatele. Správné používání tagů = lepší SEO, přístupnost a uživatelská zkušenost.

Související pojmy

HTML Element Link Formulář Meta tag