Aktuality:
1.11.2009 - spuštěna nová verze webu.

Dnes je Přidat k oblíbeným

Neutrální tagy span a div

V počátcích vývoje jazyka html měl každý tag svůj vlastní význam (p- odstavec; a- odkaz) a vlastní formátování (p- odsazení, a- modré písmo+podtržení). Časem se však ukázalo, že by byl velmi potřebný tag, který by jen ohraničoval kus dokumentu nebo textu a neměl sám o sobě žádný význam ani formátování. Proto byly do jazyka HTML implementovány tagy <span>a <div>.

Rozdíl mezi <span>a <div>


 Mezi oběma tagy je jediný podstatný rozdíl- div je prvek blokový, zatímco span řádkový. V praxi to znamená, že, pokud v dokumentu použijete <div>, tak jeho obsah začne na novém řádku a za sebou řádek ukončí. Pokud v dokumentu použijete <span>, tak jeho obsah bude pokračovat pořád v jednom řádku. Rozdíl je potom i ve formátování pomocí CSS.

Pravidla použití neutrálních tagů

Prvním pravidlem je, že v řádkovém prvku nesmí být obsažen blokový prvek.
Špatně: <span>Texttexttexttexttexttexttext<div>Texttexttext</div></span>
Správně: <div>Texttexttexttexttexttexttext<div>Texttexttext</div></div>
Správně: <div>Texttexttexttexttexttexttext<span>Texttexttext</span></div>

Z příkladu tedy plyne, že blokový element může obsahovat nejen řádkové elementy, ale i další blokové elementy.

Výhody a použití neutrálních tagů

  • Span ani div okolo sebe nedělají žádné mazery, a proto se obsah zarovnává, jako by tyto tagy vůbec nebyly použity. Uvnitř nich je ale současně např. jinak formátovaný text než vně.

    • nova online

  • "Zabalení" kousků textu. Tuto možnost můžete využít např. pokud budete chtít mít text, nad nímž se po přejetí zobrazí nápověda.

    Text <span title="Nápověda nebo popisek"> Text s nápovědou nebo popiskem</span>
    Text Text s nápovědou nebo popiskem

  • Rozvržení stránky- používá se při pozicování pomocí CSS - asi nejmocnější zbraň těchto tagů. Více v textu o pozicování pomocí CSS


Design a kód Kookie © 2009 | Nahoru| O webu | Televize online | TV online
Základy jazyka HTML Strukturování textů Formátování textu Tvorba seznamů Tvorba odkazů Grafika stránek Barvy na webu Tvorba tabulek Tvorba rámců Tvorba formulářů Neutrální tagy Vývoj HTML- XHTML Úvod do CSS Zápis CSS a propojení s HTML Selektory Výstupní zařízení Dědičnost a kaskáda Typy prvků v CSS Kompletní přehled CSS vlastností Rozdílný vzhled v prohlížečích Délkové jednotky v CSS Ořezávání a posun Obtékání Absolutní pozicování v CSS Relativní pozicování v CSS Layout absolutním pozicováním Layout relativním pozicováním Pokročilý layout - tzv. Svatý grál Nechte své stránky vydělávat! Jak zvýšit návštěvnost Seznam katalogů PHP - dynamické stránky Javascript