Rozdíly mezi prvky na úrovni bloku a vloženými prvky

HTML se skládá z různých prvků, které fungují jako stavební kameny webových stránek. Každý z těchto prvků spadá do jedné ze dvou kategorií: prvky na úrovni bloku nebo vložený prvek. Pochopení rozdílu mezi těmito dvěma typy prvků je důležitým krokem při vytváření webových stránek.

Blokovat prvky na úrovni

Co je tedy prvek na úrovni bloku? Prvek na úrovni bloku je prvek HTML, který začíná novým řádkem na webové stránce a rozšiřuje celou šířku dostupného vodorovného prostoru nadřazeného prvku. Vytváří velké bloky obsahu, jako jsou odstavce nebo divize stránek. Ve skutečnosti většina prvků HTML jsou prvky na úrovni bloku.

Prvky na úrovni bloku se používají v těle dokumentu HTML. Mohou obsahovat vložené prvky i další prvky na úrovni bloku.

Vložené prvky

Na rozdíl od prvku na úrovni bloku je vložený prvek:

• Může to začít v řadě.
• Nezačíná nový řádek.
• Jeho šířka se rozšiřuje, pouze pokud je definována jeho značkami.

Příkladem vloženého prvku je , což činí písmo textového obsahu obsaženého tučným písmem. Vložený prvek obecně obsahuje pouze další vložené prvky nebo může obsahovat vůbec nic, například

zlomit značku.

V HTML je také třetí typ prvku: ty, které se vůbec nezobrazují. Tyto prvky poskytují informace o stránce, ale nezobrazují se při vykreslení ve webovém prohlížeči.

Například:

•  definuje metadata.
•  je prvek dokumentu HTML, který tyto prvky obsahuje.

Přepínání typů vložených a blokových prvků

Typ prvku můžete změnit z vloženého na blokovaný nebo naopak pomocí jedné z těchto vlastností CSS:

• displej: blok; 

• display: inline; 

• displej: žádný;

The CSS vlastnost zobrazení umožňuje změnit vloženou vlastnost na blokovanou nebo blokovanou na vloženou nebo nezobrazovat vůbec.

Kdy změnit vlastnost zobrazení

Obecně nechte vlastnost zobrazení na pokoji, ale existují případy, kdy může být užitečné vyměnit vložené a blokovat vlastnosti zobrazení.

• Nabídky vodorovného seznamu: Seznamy jsou prvky na úrovni bloku, ale pokud chcete, aby se vaše nabídka zobrazovala vodorovně, musíte seznam převést na vložený prvek, aby každá položka nabídky nezačínala na novém řádku.
• Záhlaví v textu: Někdy můžete chtít, aby záhlaví zůstalo v textu, ale udržujte hodnoty záhlaví HTML. Změnou hodnot h1 až h6 na vložené umožníte, aby text, který přijde za jeho uzavírací značkou, i nadále proudil vedle ní na stejném řádku, místo aby začínal na novém řádku.
• Odstranění prvku: Pokud chcete úplně odebrat prvek z dokumentu normální tok, můžete nastavit displej na

  žádný

  Jedna poznámka, při používání displeje buďte opatrní: žádný. I když tento styl skutečně učiní prvek neviditelným, nikdy jej nebudete chtít použít ke skrytí textu, který jste přidali z důvodů SEO, ale nechcete jej zobrazovat návštěvníkům. To je spolehlivý způsob, jak nechat svůj web potrestat za přístup černého klobouku k SEO.

Běžné chyby formátování vložených prvků

Jednou z nejčastějších chyb, které nováček ve Web designu dělá, je pokus o nastavení šířky na vloženém prvku. To nefunguje, protože šířky vložených prvků nejsou definovány boxem kontejneru.

Vložené prvky ignorují několik vlastností:

• šířka

  a

  výška

• maximální šířka

  a

  Maximální výška

• min. šířka

  a

  minimální výška

Pokud potřebujete definovat šířku nebo výšku, kterou by měl prvek zabírat, budete jej chtít použít na prvek na úrovni bloku obsahující váš vložený text.