Jak používat prvky HTML Span a Div HTML

Použijte rozpětí a div s CSS pro větší styl a rozložení.

Mnoho lidí, kteří jsou novými v oblasti webového designu a HTML / CSS, používají prvky a

ve vzájemném záměně, když vytvářejí webové stránky. Realita však spočívá v tom, že každý z těchto prvků HTML slouží k různým účelům. Naučte se používat každý pro svůj určený účel vám pomůže vyvíjet čistší webové stránky, jejichž kód je jednodušší spravovat celkově.

Použití prvku

Prvek div definuje logické rozdělení na vaší webové stránce.

Jedná se v podstatě o krabici, ve které můžete umístit další prvky HTML, které se logicky spojují. Divize může mít v sobě mnoho dalších prvků, jako jsou odstavce, nadpisy, seznamy, odkazy, obrázky atd. Může mít dokonce i další rozdělení uvnitř toho, aby poskytlo další strukturu a organizaci vašeho dokumentu HTML.

Chcete-li použít prvek div, umístěte otevřenou značku

před oblast, kterou chcete požadovat jako samostatné dělení, a poté za něj zavřete značku :

obsah div

Pokud oblast vaší stránky potřebuje nějaké další informace, které budete používat ke stylu s CSS později, můžete přidat selektor id (např.

id = "myDiv">) nebo volič třídy (např. class = "bigDiv">). Oba tyto atributy pak mohou být vybrány pomocí CSS nebo upraveny pomocí jazyka JavaScript. Současné osvědčené postupy se opírají o použití selektorů třídy namísto identifikátorů ID, částečně kvůli tomu, jak jsou specifické selektory ID. Ve skutečnosti však můžete použít jednu z nich a dokonce můžete rozdělit jak ID, tak třídu.

Kdy použít

Versus

Element div se liší od prvku oddílu HTML5, protože neposkytuje přiložený obsah žádný sémantický význam. Pokud si nejste jisti, zda by obsah bloku měl být div nebo část, přemýšlejte o tom, jaký účel prvku a jeho obsah vám pomůže rozhodnout se, který způsob použití:

  • Pokud potřebujete prvek jednoduše přidat styly do této oblasti stránky, měli byste použít element div.
  • Pokud obsah, který má být obsažen, má zřetelné zaměření a může stát samostatně, můžete místo toho použít element sekce.

Nakonec se obě divize a sekce chovají podobně a můžete jim dát hodnoty atributů a stylovat je pomocí CSS, abyste získali vzhled vašeho webu, který potřebujete. Oba jsou prvky blokové úrovně.

Použití prvku

Element span je ve výchozím nastavení vložený element. To je odlišuje od div a elementů sekce. Prvek span se často používá k zabalení určitého obsahu, obvykle textu, aby mu dodal další "hák", který může být později navržen. Používá se s CSS, ale může změnit styl textu, který obklopuje; Nicméně, bez atributů stylů, samotný span element nemá žádný vliv na text vůbec.

To je hlavní rozdíl mezi prvky span a div. Jak již bylo uvedeno výše, element div obsahuje přerušení odstavce, zatímco element span pouze říká prohlížeč, aby použil přidružená pravidla stylu CSS na to, co je uzavřeno pomocí značek :


Zvýrazněný text a nezvýrazněný text.

Přidejte třídu = "zvýraznění" nebo jinou třídu do prvku span pro stylování textu pomocí CSS (např. Class = "highlight">).

Element span nemá žádné požadované atributy, ale tři, které jsou nejužitečnější, jsou stejné jako ty elementu div:

  • styl
  • třída
  • id

Pokud chcete změnit styl obsahu, použijte rozpětí, aniž byste definovali tento obsah jako nový prvek na úrovni bloku v dokumentu.

Například pokud chcete, aby druhé slovo záhlaví h3 bylo červené, můžete toto slovo obklopit pomocí prvku span, který by toto slovo styloval jako červený text. Slovo stále zůstává součástí elementu h3, ale nyní je také zobrazeno červeně:

Toto je můj nadějný nadpis

Upravil Jeremy Girard ze 2/2/17