HTML 101/Lekce 4

4. Blokové a řádkové elementy

V předchozí lekci jsme se podívali na formátování textu a vysvětlili si¨, co je sémantika. V této "mini lekci" se vrátíme opět ke konceptům - probereme dělení elementů do blokových a řádkových, způsoby, kterým se tyto skupiny liší a důvody, proč je důležité je znát.

Blokové elementy

Demonstrace blokových elementů. Odstavec se nachází na novém řádku i přesto, že se v kódu nenachází žádný element <br>.

Blokové elementy se rozpínají přes celou šířku stránky nebo jejich rodičovského elementu, bez ohledu na to, kolik toho vlastně obsahují. Vždy začínají na novém řádku, takže jich není možné vedle sebe mít dva či více. Zatímco se mohou nacházet uvnitř dalších blokových elementů, to samé neplatí s těmi řádkovými.

<!-- Tohle je validní! -->
<body>
    <p>
        Blokový element uvnitř jiného blokového elementu...<br>
        Tohle je zase <mark>řádkový element</mark>, také potomek elementu <i>body</i>.
    </p>
</body>

<!-- Tohle je špatně! -->
<body>
    <strong>
        <p>
            Blokový element uvnitř řádkového elementu...<br>
            To je samozřejmě špatně.
        </p>
    </strong>
</body>

Mezi blokové elementy patří například odstavce <p>, seznamy, tabulky, elementy určené pro členění HTML dokumentů na sekce a nadpisy.

Řádkové elementy

Demonstrace řádkových elementů v HTML. Text jimi obklopený se automaticky nezobrazuje na nových řádcích.

Řádkové (anglicky inline) elementy zabírají pouze tolik místa, kolik potřebují - to znamená, že se jich vedle sebe může nacházet více. Mohou se nacházet nejen uvnitř blokových elementů, ale i uvnitř řádkových.

<!-- Tohle je validní! -->
<body>
    <p>
        <mark>Text uvnitř blokového elementu. <u>Tento je i uvnitř řádkového!</u></mark>
    </p>
</body>

<!-- Tohle je špatně! -->
<body>
    <strong>
        <p>
            Blokový element uvnitř řádkového elementu...<br>
            Přesně jako v příkladě u blokových elementů.
        </p>
    </strong>
</body>

Mezi řádkové se mimo jiné řadí valná většina elementů používaných k formátování textu (takže kromě nadpisů vše z minulé lekce), obrázky a odkazy.

K čemu to je?

Znalost těchto dvou skupin a jejich vlastností je užitečná zejména z hlediska rozložení HTML dokumentů a CSS stylování - víte tak, proč se některé elementy chovají a zobrazují jinak než jiné.

V CSS lze elementy "přeřadit" do jiné skupiny než té jejich původní s vlastností display. V tom jazyce se také pracuje s více než dvěma skupinami.^{[P 1]} To je ale zase téma na jindy.

Dělení dosud probraných elementů

V tabulce níže je rozdělení všech elementů, které jsme v této lekci zatím probrali.^{[P 2]}

Blokové	Řádkové
<body>	<b>
<h1>	<br>
<h2>	<del>
<h3>	<em>
<h4>	<i>
<h5>	<ins>
<h6>	<mark>
<html>	<s>
<p>	<sub>
	<sup>

Příští lekce

V následující lekci se podíváme na entity, které umožňují na stránky vkládat různé zvláštní znaky, a to včetně těch, které jsou vyhrazené pouze pro HTML. To zahrnuje například špičaté závorky <> či uvozovky "".

Poznámky

↑ Náležitost k jedné z těchto skupin specifikuje CSS vlastnost display. Zatímco u blokových elementů má hodnotu "block", u řádkových je to "inline". Dalšími možnými hodnotami je například "none", "inline-block", "flex", apod.
↑ To vlastně není úplně pravda, protože tabulka vynechává elementy <title> a <head>. Ty nepatří ani do blokových, ani do řádkových elementů - jejich CSS vlastnost display má hodnotu "none".

[1] Náležitost k jedné z těchto skupin specifikuje CSS vlastnost display. Zatímco u blokových elementů má hodnotu "block", u řádkových je to "inline". Dalšími možnými hodnotami je například "none", "inline-block", "flex", apod.

[2] To vlastně není úplně pravda, protože tabulka vynechává elementy <title> a <head>. Ty nepatří ani do blokových, ani do řádkových elementů - jejich CSS vlastnost display má hodnotu "none".

[P 1]

[P 2]