Prvky HTML: prvky na úrovni bloku verzus vložené prvky
Degui Adil / EyeEm / Getty Images
HTML sa skladá z rôznych prvkov, ktoré fungujú ako stavebné kamene webových stránok. Každý z týchto prvkov patrí do jednej z dvoch kategórií: prvky na úrovni bloku alebo vložený prvok. Pochopenie rozdielu medzi týmito dvoma typmi prvkov je dôležitým krokom pri vytváraní webových stránok.
Prvky na úrovni bloku
Čo je teda prvok na úrovni bloku? Prvok na úrovni bloku je prvok HTML, ktorý začína nový riadok na webovej stránke a rozširuje celú šírku dostupného horizontálneho priestoru svojho nadradeného prvku. Vytvára veľké bloky obsahu, ako sú odseky alebo delenia strán. V skutočnosti väčšina prvkov HTML sú prvky na úrovni bloku.
Prvky na úrovni bloku sa používajú v tele dokumentu HTML. Môžu obsahovať vložené prvky, ako aj iné prvky na úrovni bloku.
Vložené prvky
Na rozdiel od prvku na úrovni bloku, vložený prvok:
- Môže začať v rámci riadku.
- Nezačína nový riadok.
- Jeho šírka siaha len tak ďaleko, ako je definovaná jeho tagmi.
Príkladom vloženého prvku je , čo vytvára písmo textového obsahu obsiahnutého v tučnom písme. Vnorený prvok vo všeobecnosti obsahuje iba iné vložené prvky alebo nemôže obsahovať vôbec nič, ako napr
break tag.
V HTML existuje aj tretí typ prvkov: tie, ktoré sa vôbec nezobrazujú. Tieto prvky poskytujú informácie o stránke, ale pri vykresľovaní vo webovom prehliadači sa nezobrazujú.
Napríklad:
- definuje štýly a šablóny so štýlmi.
- definuje metaúdaje.
- je prvok dokumentu HTML, ktorý obsahuje tieto prvky.
Prepínanie medzi riadkovými a blokovými typmi prvkov
Pomocou jednej z týchto vlastností CSS môžete zmeniť typ prvku z vloženého na blokový alebo naopak:
- |_+_|
- |_+_|
- |_+_|
The CSS vlastnosť display vám umožňuje zmeniť vnorenú vlastnosť na blok alebo blok na vnorenú alebo nezobrazovať vôbec.
Kedy zmeniť vlastnosť zobrazenia
Vo všeobecnosti ponechajte vlastnosť zobrazenia na pokoji, existujú však prípady, kedy môže byť zámena vlastností zobrazenia v riadku a bloku užitočná.
- |_+_| a |_+_|
- |_+_| a |_+_|
- |_+_| a |_+_|
Bežné chyby formátovania vložených prvkov
Jednou z najčastejších chýb, ktorú nováčik vo webdizajne robí, je pokus o nastavenie šírky na riadkovom prvku. Toto nefunguje, pretože šírky vložených prvkov nie sú definované rámcom kontajnera.
Vložené prvky ignorujú niekoľko vlastností:
Microsoft Internet Explorer (nahradený Microsoft Edge) v minulosti nesprávne aplikoval niektoré z týchto vlastností aj na inline boxy. Toto nie je v súlade s normami. To nemusí byť prípad novších verzií webového prehliadača od Microsoftu.
Ak potrebujete definovať šírku alebo výšku, ktorú by mal prvok zaberať, budete to chcieť použiť na prvok na úrovni bloku, ktorý obsahuje váš vložený text.