Bloky

Pre určenie druhu rozmiestnenia na stránke môžeme použiť niekoľko značiek.

div

slúži vyslovene na združovanie niekoľkých značiek pod jeden celistvý blok. Používa sa pre uľahčenie dizajnovania.

<div>
    <h1>Nadpis 1. bloku</h1>
    <p>Text 1. bloku</p>
    <p>Text 1. bloku</p>
</div>

<div>
    <h1>Nadpis 2. bloku</h1>
    <p>Text 2. bloku</p>
    <p>Text 2. bloku</p>
</div>

section

podobne ako div, slúži na definovanie konkrétnej sekcie pre sémantickosť web stránky.

article

používa sa na zaobalenie článku. Či už na krátku ukážku článku, alebo na článok celý.

header

označuje hlavičku, či už stránky ako takej, alebo napríklad článku.

  • Pokiaľ sa použije ako hlavička stránky, vkladáme do nej podstatné veci ako logo, menu, vyhľadávanie, odkazy na sociálne siete a pod. Vkladá sa na vždy rovnaké miesto každej podstránky a mení sa iba obsahová časť podstránky.
  • Pokiaľ sa použije ako hlavička článku, vkladáme doň nadpisy <h1> a pod.

footer

definuje pätičku stránky alebo článku.

  • Ako pätička stránky môže obsahovať kontaktné informácie, copyright, logo, odkazy na sociálne siete, social feeds a mnoho ďalšieho. Tak ako hlavička, tak aj pätička ostáva na tom istom mieste.
  • Ako pätička článku môže obsahovať informácie ako odkaz na celý článok, informácie o autorovi, odkazy pre zdieľanie, dátum vydania a iné.

nav

označuje sa pre navigáciu po stránke. V jednoduchosti, označuje menu stránky.

<!DOCTYPE html>
<html>
    <head>
        <title>Názov stránky</title>
    </head>
    <body>
        <header>
            <a href="./">Názov stránky</a>
            <nav>
                <ul>
                    <li><a href="./">Domov</a></li>
                    <li><a href="./rozvrh.html">Rozvrh</a></li>
                    <li><a href="./kontakt.html">Kontakt</a></li>
                </ul>
            </nav>
        </header>

        <section>
            <article>
                <header>Nadpis 1. článku</header>
                <div>
                    <p>Odsek 1. článku</p>
                    <p>Odsek 1. článku</p>
                </div>
                <footer>Autor: Janko Hraško</footer>
            </article>

            <article>
                <header>Nadpis 2. článku</header>
                <div>
                    <p>Odsek 2. článku</p>
                    <p>Odsek 2. článku</p>
                </div>
                <footer>Autor: Janko Hraško</footer>
            </article>
        </section>

        <footer>
            copyright 2018 Janko Hraško 
        </footer>
    </body>
</html>

Testové otázky

  • Načo slúži div?
  • Načo slúži header?
  • Načo slúži footer?
  • Načo slúži nav?