Struktura stránky, sémantické tagy v HTML5, typografie na webu

Formát zkoušky: 30 minut příprava praktické úlohy, 15 minut obhajoba + náhodná teorie. Tady je teorie hutně, ale ne tryhardně, a celá praktická úloha s řešením.

Část 1: Teorie

Co je sémantické HTML

Sémantické HTML znamená používat elementy podle významu obsahu, ne podle vizuálního efektu. Element popisuje, co je jeho obsah, ne jak vypadá. Styling je práce CSS.

Nesémanticky Sémanticky Rozdíl
<div class="header"> <header> Prohlížeč, čtečka i vývojář ví, co to je
<div class="nav"> <nav> Navigace je jasně označená
<b>důležité</b> <strong>důležité</strong> Sděluje důležitost, ne jen tučnost
<i>název</i> <em>název</em> Sděluje důraz, ne jen kurzívu

Proč na tom záleží

Základní struktura HTML5 stránky

<!DOCTYPE html>
<html lang="cs">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Popis stránky pro SEO">
    <title>Název stránky</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <h1>Název webu</h1>
        <nav>
            <ul>
                <li><a href="/">Domů</a></li>
                <li><a href="/o-nas">O nás</a></li>
                <li><a href="/kontakt">Kontakt</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <article>
            <header>
                <h2>Název článku</h2>
                <time datetime="2026-05-13">13. května 2026</time>
            </header>
            <section>
                <h3>První část</h3>
                <p>Obsah...</p>
            </section>
        </article>

        <aside>
            <h2>Související články</h2>
            <ul><li><a href="#">Článek 67</a></li></ul>
        </aside>
    </main>

    <footer>
        <p>&copy; 2026 Název webu</p>
        <address>
            Kontakt: <a href="mailto:[email protected]">[email protected]</a>
        </address>
    </footer>
</body>
</html>

Povinné části <head>

Element Účel
<!DOCTYPE html> Říká prohlížeči "jde o HTML5", bez něj quirks mode
<meta charset="UTF-8"> Kódování znaků, bez toho nefunguje diakritika
<meta name="viewport"...> Responzivita, správné zobrazení na mobilu
<title> Text v záložce + nadpis v Google výsledcích

<meta name="viewport">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

width=device-width: šířka stránky se přizpůsobí šířce zařízení. initial-scale=1.0: výchozí zoom 100 %.