Rozdiely medzi blokovými a vloženými prvkami

HTML je zložený z rôznych prvkov, ktoré slúžia ako stavebné prvky webových stránok. Každý z týchto prvkov spadá 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 úrovne bloku

Čo je to teda prvok na úrovni bloku? Prvok na úrovni bloku je prvok HTML, ktorý začína novým riadkom na webovej stránke a rozširuje celú šírku dostupného vodorovného priestoru nadradeného prvku. Vytvára veľké bloky obsahu, ako sú odseky alebo divízie stránok. Väčšina prvkov HTML je v skutočnosti prvkami na úrovni blokov.

V tele dokumentu HTML sa používajú prvky na úrovni blokov. Môžu obsahovať vložené prvky, ako aj ďalšie prvky na úrovni blokov.

Vložené prvky

Na rozdiel od prvku na úrovni bloku je vložený prvok:

Môže sa to začať v riadku.
Nezačína nový riadok.
Jeho šírka siaha iba dovtedy, kým je definovaná jej značkami.

Príkladom vloženého prvku je , ktoré robí písmo textového obsahu obsiahnuté tučným písmom. Vložený prvok vo všeobecnosti obsahuje iba ďalšie vložené prvky alebo nemôže obsahovať vôbec nič, napríklad

instagram viewer

zlomiť značku.

V jazyku HTML existuje aj tretí typ prvku: tie, ktoré sa vôbec nezobrazia. Tieto prvky poskytujú informácie o stránke, ale pri vykreslení vo webovom prehľadávači sa nezobrazia.

Napríklad:

definuje meta dáta.
je prvok dokumentu HTML, ktorý tieto prvky obsahuje.

Prepínanie vložených a blokovaných typov prvkov

Typ prvku môžete zmeniť z vloženého na blokovaný alebo naopak pomocou jednej z týchto vlastností CSS:

```
displej: blok; 
```
```
zobrazenie: vložené; 
```
```
displej: žiadny;
```

The CSS vlastnosť display vám umožňuje zmeniť vloženú vlastnosť na blokovanie alebo blok na vloženú vlastnosť, alebo nezobrazovať vôbec.

Kedy zmeniť vlastnosť zobrazenia

Vo všeobecnosti nechajte vlastnosť zobrazenia osamote, existujú však prípady, keď môže byť užitočné zameniť vložené a zablokovať vlastnosti zobrazenia.

Horizontálne ponuky zoznamu: Zoznamy sú prvky na úrovni blokov, ale ak chcete, aby sa vaša ponuka zobrazovala vodorovne, musíte zoznam previesť na vložený prvok, aby sa každá položka ponuky nezačala na novom riadku.
Hlavičky v texte: Niekedy možno budete chcieť, aby hlavička zostala v texte, ale zachovajte hodnoty hlavičky HTML. Zmena hodnôt h1 až h6 na vložené umožní, aby text, ktorý nasleduje po koncovej značke, pokračoval v toku vedľa neho na rovnakom riadku namiesto toho, aby začínal na novom riadku.
Odstránenie prvku: Ak chcete úplne odstrániť prvok z dokumentu normálny tok, môžete nastaviť displej na
```
žiadny
```
Jedna poznámka, pri používaní displeja buďte opatrní: žiadny. Aj keď tento štýl skutočne urobí prvok neviditeľným, nikdy ho nebudete chcieť použiť na skrytie textu, ktorý ste pridali z dôvodov SEO, ale nechcete ho zobrazovať návštevníkom. To je bezpečný spôsob, ako pokutovať vaše stránky za prístup čierneho klobúka k SEO.

Bežné chyby formátovania vložených prvkov

Jednou z najčastejších chýb nováčika vo webdizajne je pokus o nastavenie šírky vloženého prvku. To nefunguje, pretože šírka vložených prvkov nie je definovaná boxom s kontajnerom.

Vložené prvky ignorujú niekoľko vlastností:

```
šírka
```
a
```
výška
```
```
max-šírka
```
a
```
maximálna výška
```
```
min. šírka
```
a
```
min. výška
```

Microsoft Internet Explorer (nahradený Microsoft Edge) v minulosti nesprávne aplikoval niektoré z týchto vlastností dokonca aj na vložené polia. Nie je to v súlade s normami. To nemusí platiť v prípade novších verzií webového prehľadávača Microsoft.

Ak potrebujete definovať šírku alebo výšku, ktorú by mal prvok zaberať, mali by ste ich použiť na prvok na úrovni bloku obsahujúci váš vložený text.