Ako používať prvky HTML Span a Div

Použite rozpätie a div s CSS pre väčšiu kontrolu štýlu a rozloženia.

Mnohí ľudia, ktorí sú novými pri návrhu webových stránok a HTML / CSS, používajú prvky a

navzájom zameniteľné, keďže vytvárajú webové stránky. Realita však spočíva v tom, že každý z týchto prvkov HTML slúži rôznym účelom. Naučiť sa používať každý pre svoj určený účel vám pomôže vyvíjať čistejšie webové stránky, ktorých kód je ľahšie spravovať celkovo.

Použitie elementu

Element div definuje logické rozdiely na vašej webovej stránke.

Je to v podstate krabica, v ktorej môžete umiestniť ďalšie prvky HTML, ktoré logicky idú dohromady. Divízia môže mať v sebe viacero ďalších prvkov, ako napríklad odseky, nadpisy, zoznamy, odkazy, obrázky atď. Môže mať dokonca aj ďalšie rozdelenia, ktoré vám poskytnú dodatočnú štruktúru a organizáciu dokumentu HTML.

Ak chcete použiť prvok div, umiestnite otvorenú značku

pred oblasť vašej stránky, ktorú chcete vytvoriť ako samostatnú oblasť, a za ňou nasledujúca značka :

obsah div

Ak oblasť vašej stránky potrebuje nejaké ďalšie informácie, ktoré použijete na štýl s CSS neskôr, môžete pridať selektor id (napr.

id = "myDiv">) alebo výberu triedy (napr. trieda = "bigDiv">). Oba tieto atribúty je možné vybrať pomocou CSS alebo modifikovať pomocou jazyka JavaScript. Súčasné osvedčené postupy sa opierajú o použitie výberov triedy namiesto identifikátorov ID, čiastočne kvôli tomu, ako sú špecifické selektory ID. V pravde však môžete použiť jeden z nich a dokonca dať rozdelenie ako identifikátor, tak selektor triedy.

Kedy používať

Versus

Element div sa líši od elementu sekcie HTML5, pretože nedáva priloženému obsahu žiadny sémantický význam. Ak si nie ste istí, či by obsah bloku mal byť div alebo sekcia, premýšľajte nad tým, akým účelom prvku a obsahom máte pomôcť pri rozhodovaní o tom, ktoré použitie:

  • Ak potrebujete prvok jednoducho pridať štýly do tejto oblasti stránky, mali by ste použiť prvok div.
  • Ak obsah, ktorý má byť obsiahnutý, má zreteľné zameranie a mohol by byť sám osebe, možno by ste chceli použiť prvok sekcie.

Nakoniec sa obaja divízie a sekcie správajú veľmi podobne a môžete im dať buď hodnoty atribútov a ich štýl pomocou CSS, aby ste získali vzhľad vašich stránok, ktoré potrebujete. Obidva tieto sú prvky blokovej úrovne.

Použitie prvku

Prvok span je predvoleným elementom. To ho odlišuje od elementov div a sekcií. Prvok rozpätia sa často používa na zabalenie určitého obsahu, obyčajne textu, aby mu dal ďalší "hák", ktorý môže byť neskôr štylizovaný. Používa sa so službou CSS, ale môže zmeniť štýl textu, ktorý obklopuje. avšak bez atribútov štýlu samotný prvok rozpätia nemá žiadny vplyv na text vôbec.

Toto je hlavný rozdiel medzi prvkami span a div. Ako už bolo uvedené vyššie, prvok div obsahuje odsek, zatiaľ čo prvok span len informuje prehliadač, aby použil súvisiace pravidlá štýlu CSS na to, čo je priložené značkami :


Zvýraznený text a nezvýraznený text.

Pridajte triedu = "zvýraznenie" alebo inú triedu do elementu rozpätia, aby ste text napísali pomocou CSS (napr. Trieda = "zvýraznenie">).

Prvok span nemá žiadne požadované atribúty, ale tie tri, ktoré sú najužitočnejšie, sú rovnaké ako tri elementy div:

  • štýl
  • trieda
  • id

Použite rozpätie, ak chcete zmeniť štýl obsahu bez definovania tohto obsahu ako nového prvku na úrovni bloku v dokumente.

Napríklad, ak chcete, aby druhé slovo v záhlaví h3 bolo červené, môžete toto slovo obklopiť spanovým prvkom, ktorý by mal slovo ako červený text. Slovo stále zostáva súčasťou elementu h3, ale teraz sa zobrazuje aj červenou farbou:

Toto je môj úžasný nadpis

Upravený Jeremy Girard dňa 2/2/17