Blok HTML a vložené prvky
Každý prvek HTML má výchozí hodnotu zobrazení v závislosti na typu prvku.
K dispozici jsou dvě zobrazené hodnoty: bloková a vložená.
Prvky na úrovni bloku
Prvek na úrovni bloku vždy začíná na novém řádku.
Prvek na úrovni bloku vždy zabírá celou dostupnou šířku (roztahuje se doleva a doprava, jak nejvíce to jde).
Prvek na úrovni bloku má horní a spodní okraj, zatímco vložený prvek nikoli.
Příklad
<div>Hello World</div>
Zde jsou prvky na úrovni bloku v HTML:
Vložené prvky
Vložený prvek nezačíná na novém řádku.
Vložený prvek zabírá pouze nezbytně nutnou šířku.
Toto je prvek <span> uvnitř odstavce.
Příklad
<span>Hello World</span>
Zde jsou vložené prvky v HTML:
Poznámka: Vložený prvek nemůže obsahovat prvek na úrovni bloku!
Prvek <div>
Prvek <div>se často používá jako kontejner pro další prvky HTML.
Prvek <div>nemá žádné povinné atributy, ale style, classa idjsou běžné.
Při použití společně s CSS lze <div>prvek použít ke stylování bloků obsahu:
Příklad
<div style="background-color:black;color:white;padding:20px;">
<h2>London</h2>
<p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
</div>
Prvek <span>
Prvek <span>je vložený kontejner používaný k označení části textu nebo části dokumentu.
Prvek <span>nemá žádné povinné atributy, ale style, classa idjsou běžné.
Při použití spolu s CSS lze <span>prvek použít ke stylování částí textu:
Příklad
<p>My mother has <span style="color:blue;font-weight:bold">blue</span> eyes
and my father has <span style="color:darkolivegreen;font-weight:bold">dark
green</span> eyes.</p>
Shrnutí kapitoly
- K dispozici jsou dvě zobrazené hodnoty: bloková a vložená
- Prvek na úrovni bloku vždy začíná na novém řádku a zabírá celou dostupnou šířku
- Vložený prvek nezačíná na novém řádku a zabírá pouze nezbytně nutnou šířku
- Prvek
<div>je na úrovni bloku a často se používá jako kontejner pro další prvky HTML - Prvek
<span>je vložený kontejner používaný k označení části textu nebo části dokumentu
HTML tagy
| Tag | Description |
|---|---|
| <div> | Defines a section in a document (block-level) |
| <span> | Defines a section in a document (inline) |
Úplný seznam všech dostupných značek HTML naleznete v naší Referenční příručce značek HTML .