HTML Tagy a Atributy

Proč čisté HTML?

Na počátku byly webové stránky tvořeny pouze pomocí HTML—bez stylů a interaktivních prvků.
Silné základy v HTML vám umožní vytvářet dobře strukturované a přístupné stránky, které fungují i bez CSS a JavaScriptu. To je užitečné například při tvorbě jednoduchých webů, e-mailů bez podpory JS, pro optimalizaci webových stránek pro search enginy nebo také při vývoji stránek pro darknet.

Základní Rozložení HTML Dokumentu

Základní struktura HTML dokumentu může vypadat takto:

<!DOCTYPE html>
<html lang="cs">
  <head>
    <meta charset="UTF-8">
    <title>Moje První Stránka</title>
  </head>
  <body>
    <header>
      <h1>Nadpis Stránky</h1>
    </header>
    <main>
      <article>
        <h2>Úvodní Článek</h2>
        <p>Toto je ukázka článku na webové stránce.</p>
      </article>
      <aside>
        <h3>Vedlejší Informace</h3>
        <p>Zde mohou být odkazy nebo reklamy.</p>
      </aside>
    </main>
    <footer>
      <p>© 2024 Moje Stránka</p>
    </footer>
  </body>
</html>

Semantické Tagy

Semantické tagy dávají struktuře stránky jasný význam. Mezi nejdůležitější patří:

<header> – Záhlaví stránky nebo sekce.
<main> – Hlavní obsah stránky.
<footer> – Zápatí stránky nebo sekce.
<article> – Samostatný kus obsahu.
<aside> – Vedlejší obsah, např. postranní panel.
<nav> – Navigační odkazy.
<section> – Oddíl obsahu.

Formátovací Tagy

Pro úpravu a zvýraznění textu můžete použít tyto tagy:

<strong> – Zdůrazňuje důležitý text tučně.
<b> – Zobrazuje text tučně.
<br> – Vloží zalomení řádku.
<hr> – Vloží horizontální čáru pro oddělení obsahu.
<mark> – Zvýrazní text, např. pro upozornění.

Atributy HTML Tagů

Různé tagy mohou mít atributy, které jim přidávají funkčnost nebo další informace:

<html lang="cs"> – Informuje browser o jazyku stránky, browser potom například může zobrazit uživateli prompt o přeložení, pokud návštěvník tento jazyk nezná.
<img src="obrazek.jpg" alt="Popis"> – src určuje cestu odkud se obrázek stáhne/načte, alt poskytuje alternativní text, pro screen readery a také pokud se obrázek nenačte.
<video src="video.mp4" controls></video> – controls přidá ovládací prvky pro video.
<a href="https://example.com"> – href určuje cíl odkazu.

Další Užitečné Atributy

id – Unikátní identifikátor elementu, např. <div id="hlavni"> používá se pro propojení HTML s JS.
class – Třída elementu pro stylování, např. <p class="text"> vetšinou se používá jako CSS selector.
style – Inline stylování elementu, např. style="color: red;".
title – Dodatečná informace která se zobrazí při najetí myší nad element s tímto atributem.

Kde Se Dozvědět Více

Pro další studium HTML doporučujeme tyto zdroje: