Kostra HTML dokumentu

Každý HTML dokument je složen z prvků, tzv. tagů. Dokument má předepsanou základní strukturu, pro kterou se ustálilo označení kostra. 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title> </title>
    </head>
    <body>
                
    </body>
</html>

<!DOCTYPE html>: deklarace dokumentu. Informace pro prohlížeč, že dokument je webovou stránkou. Nejedná se o tag, i když tak vypadá!

<html>: párový tag, který vymezuje celý HTML dokument. 

<head>: hlavička stránky; obsahuje data o webové stránce, např. CSS pravidla, JS skripty, metadata, knihovny, aj. 

<title>: titulek stránky; text zobrazující se v záložce prohlížeče.

<meta charset="UTF-8">: metadata (data o datech) určující znakovou sadu dokumentu.

<body>: tělo stránky; obsahuje veškerý viditelný obsah dokumentu.

Univerzální div

Struktura HTML dokumentu se vyvíjela s vývojem jazyka HTML. Ze začátku byly stránky velice jednoduché, viz první webovou stránku.  Později se pro tvorbu základní struktury využívaly i tabulky. S vývojem kaskádových stylů se dostal do popředí párový tag <div>. Právě tento prvek s kombinací CSS pravidel umožňoval vytvořit složitější vzhled stránek - s patičkou, hlavičkou a sloupci.  

HTML5 strukturální prvky

Nahradily univerzální tag <div>, které velice často měl vlastnost (tj. atribut) id či class s odpovídající hodnotou (např. header, footer, main aj.) Tyto nové HTML5 prvky mají přiřazen určitý význam, tj. mají určitou sémantiku pro zajištění lepší čitelnosti a přehlednosti stránky, např. pro hlasové čtečky.  

Jejich přehled i s podrobným popisem naleznete zde.   

Blokové vs. řádkové tagy

Veškeré HTML zobrazitelné tagy lze rozdělit do dvou kategorií podle toho, jak jsou na stránce zobrazeny. 

  • Blokové prvky po svém ukončení způsobí konec řádku a lze jim nastavit šířku a výšku. 
  • Řádkové prvky nezpůsobují odřádkování a současně jim nelze nastavit velikost pomocí CSS. 

Pozor! Jestli je prvek blokový či řádkový lze změnit pomocí CSS pravidla display, viz kapitola CSS3.

Naposledy změněno: pátek, 5. února 2021, 17.09