Ako používať prvky Span a Div HTML

Rôzne značky na rôzne účely

Hamza TArkkol/Getty Images

Dva a rozpätia nie sú zameniteľné pri vytváraní webovej stránky. Každá slúži na iné účely a vedieť, kedy ju použiť, vám pomôže vytvoriť čisté a ľahko spravovateľné webové stránky.

Použitie prvku Div

Dva definujte logické delenie na svojej webovej stránke. A div —skratka pre divíziu — je v podstate krabica, do ktorej môžete umiestniť ďalšie HTML prvky ktoré patria k sebe. Rozdelenie môže mať viacero ďalších prvkov, ako sú odseky, nadpisy, zoznamy, odkazy, obrázky atď. Môže mať dokonca aj ďalšie oddelenia, ktoré poskytujú dodatočnú štruktúru a organizáciu.

Ak chcete použiť div prvok, umiestnite otvor tag pred oblasťou stránky, ktorú chcete ako samostatné rozdelenie, a uzáver značka za ním:

|_+_|

Ak budete túto oblasť upravovať pomocou CSS, môžete pridať ID selektor na úvodnú značku div:

|_+_|

Alebo môžete pridať selektor triedy:

|_+_|

S týmito prvkami potom môžete pracovať v CSS alebo JavaScripte.

Súčasné osvedčené postupy sa prikláňajú k používaniu selektorov tried namiesto ID, čiastočne kvôli tomu, aké špecifické sú selektory ID. Každý z nich je však prijateľný a môžete dokonca dať a div ID aj selektor triedy.

Divs alebo sekcie?

The div prvok sa líši odHTML5 oddiele prvok, pretože nedáva priloženému obsahu žiadny sémantický význam. Ak si nie ste istí, či by blok obsahu mal byť a div alebo a oddiele , zamyslite sa nad účelom prvku a obsahu.

• Ak potrebujete prvok jednoducho pridať štýly do tejto oblasti stránky, mali by ste použiť div prvok.
• Ak má obsah zreteľné zameranie a mohol by stáť samostatne, zvážte použitie oddiele prvok namiesto toho.

V konečnom dôsledku oboje dva a oddielov správať sa podobne a ktorémukoľvek z nich môžete priradiť atribúty a upraviť ich pomocou CSS. Oba sú prvky na úrovni bloku.

Použitie rozpätia

Span je predvolene vložený prvok, na rozdiel od div a oddiele prvkov. The rozpätie element sa zvyčajne používa na zalomenie konkrétnej časti obsahu, napríklad textu, aby získal ďalší háčik, ktorý môžete použiť na pridávanie štýlov. Bez akýchkoľvek atribútov štýlu však rozpätie nemá žiadny vplyv na text.

Ďalší rozdiel medzi rozpätie a div prvky je, že div prvok obsahuje zalomenie odseku, zatiaľ čo prvok rozpätie element iba hovorí prehliadaču, aby aplikoval súvisiace pravidlá CSS štýlu na to, čo je uzavreté v značky:

|_+_|

Môžete pridať

|_+_|

alebo podobne ako rozpätie prvok na štýl textu pomocou CSS.

Prvok span nemá žiadne povinné atribúty, ale tri najužitočnejšie sú rovnaké ako prvky prvku div prvok:

štýl trieda ID

Použite rozpätie keď chcete zmeniť štýl obsahu bez toho, aby ste tento obsah definovali ako nový prvok na úrovni bloku v dokumente.

Napríklad, ak chcete druhé slovo z an h3 s nadpisom červený, môžete toto slovo obklopiť písmenom a rozpätie prvok, ktorý by toto slovo štylizoval ako červený text. Slovo stále zostáva súčasťou h3 prvok, ale zobrazí sa červenou farbou.