Span and div - Span and div

Pro použití rozpětí na Wikipedii viz Wikipedia: Span tags
HTML
Srovnání

v HTML, rozpětí a div značky jsou prvky používané k definování částí a dokument, takže jsou identifikovatelné, když je nutná jedinečná klasifikace. Kde jsou jiné prvky HTML, jako je str (odstavec), em (důraz) atd., přesně představují sémantika obsahu, další použití rozpětí a div značky vedou k lepšímu přístupnost pro čtenáře a jednodušší udržitelnost pro autory. Pokud není použitelný žádný existující prvek HTML, rozpětí a div může cenně představovat části dokumentu, takže Atributy HTML jako třída, id, jazyknebo dir lze použít.[1][2]

rozpětí představuje v souladu část dokumentu, například slova ve větě. div představuje a na úrovni bloku část dokumentu, například několik odstavců, nebo obrázek s jeho titulkem. Ani jeden prvek nemá sám o sobě žádný význam, ale umožňuje sémantické atributy (např. lang = "en-US"), CSS styl (např. barva a typografie), nebo skriptování na straně klienta (např. animace, skrytí a zvětšení).[1][2]

Například pokud byste chtěli udělat určitou část textu uvnitř odstavce červenou, použili byste rozpětí

<span style="color: red;">I am red!</span>

To by vrátilo nějaký text, který je červený.

Dějiny

The rozpětí prvek byl představen HTML ve druhém návrhu pracovní skupiny pro internacionalizaci html-i18n v roce 1995. Avšak až v HTML 4.01 se stala součástí jazyka HTML a objevila se v pracovním návrhu HTML 4 W3C v roce 1997.[3]

V roce 1995 rozpětí bylo zavedeno k označení jakéhokoli vloženého rozsahu textu, protože „k přenosu atributů LANG a BIDI je zapotřebí obecný kontejner v případech, kdy není vhodný žádný jiný prvek.“ Stále slouží tomuto obecnému účelu, ačkoli od té doby byla definována mnohem bohatší škála sémantických prvků a existuje také mnohem více atributů, které bude možná třeba použít.

div definuje „rozdělení“ dokumentu, položku na úrovni bloku, která je více odlišná od prvků nad a pod ní než rozsah vloženého materiálu.[4]

Rozdíly a výchozí chování

Existuje několik rozdílů mezi nimi div a rozpětí. Nejpozoruhodnějším rozdílem je způsob zobrazení prvků. Ve standardním HTML, a div je prvek na úrovni bloku zatímco a rozpětí je vložený prvek. The div blok vizuálně izoluje část dokumentu na stránce a může obsahovat další komponenty na úrovni bloku. The rozpětí prvek obsahuje inline informace s okolním obsahem a může obsahovat pouze další komponenty na úrovni řádku. V praxi lze výchozí zobrazení prvků změnit pomocí Kaskádové styly (CSS), ačkoli povolený obsah každého prvku nelze změnit. Například bez ohledu na CSS, a rozpětí prvek nemusí obsahovat podřízené objekty na úrovni bloku.[5]

Praktické využití

rozpětí a div prvky se používají čistě k implikaci logického seskupení uzavřených prvků.

Existují tři hlavní důvody pro použití rozpětí a div značky s třída nebo id atributy:

Styling s CSS

Viz také: Kaskádové styly a Oddělení prezentace a obsahu

Je to běžné pro <span> a <div> prvky k přepravě třída nebo id atributy ve spojení s CSS pro použití rozložení, typografických, barevných a dalších atributů prezentace na části obsahu. CSS se nevztahuje pouze na vizuální styl: když je nahlas vyslovuje a hlasový prohlížeč, Styl CSS může ovlivnit rychlost řeči, stres, bohatost a dokonce i polohu v rámci a stereofonní obraz.

Z těchto důvodů a na podporu sémantičtějšího webu by měly atributy připojené k prvkům v HTML popisovat jejich sémantický účel, nikoli pouze jejich zamýšlené vlastnosti zobrazení na jednom konkrétním médiu. Například HTML v <span class="red-bold">password too short</span> je sémanticky slabý, zatímco <em class="warning">password too short</em> používá em prvek označující zvýraznění (zobrazený jako text kurzívou) a zavádí vhodnější název třídy. Při správném použití CSS mohou být taková „varování“ vykreslena červeným a tučným písmem na obrazovce, ale při tisku mohou být vynechána, protože v té době je příliš pozdě s nimi něco dělat. Možná by jim měl být kladen zvláštní důraz a malé snížení rychlosti řeči. Druhým příkladem je sémanticky bohatší značení, než jen prezentační.

Sémantická jasnost

Tento druh seskupování a označování částí obsahu stránky lze zavést čistě proto, aby byla stránka obecně sémanticky smysluplnější. Nelze říci, jak Celosvětová Síť se bude vyvíjet v následujících letech a desetiletích. webové stránky navržené dnes se mohou stále používat, když informační systémy, které si dosud neumíme představit, loví, zpracovávají a klasifikují web. I dnešní vyhledávače jako např Google a další používají značně složité vlastní algoritmy zpracování informací.

Po několik let World Wide Web Consortium (W3C) je spuštěn major Sémantický web projekt navržený tak, aby byl celý web stále užitečnější a smysluplnější pro dnešní i budoucí informační systémy.

The mikroformáty pohyb je pokus o vybudování myšlenky sémantiky třídy. Například software podporující mikroformáty může automaticky najít prvek jako <span class="tel">123-456-7890</span> a umožnit automatické vytáčení telefonního čísla.

Přístup z kódu

Jakmile je značka HTML nebo XHTML doručena do klientského prohlížeče návštěvníka stránky, existuje šance, že kód na straně klienta bude muset procházet vnitřní strukturou (nebo Model objektu dokumentu ) webové stránky. Nejběžnějším důvodem je to, že stránka je dodávána s JavaScript na straně klienta které po vykreslení stránky způsobí průběžné dynamické chování. Například pokud přejetím myší nad odkazem „Koupit nyní“ se má zdůraznit cena na jiném místě stránky, může to udělat JavaScriptový kód, ale JavaScript musí identifikovat cenový prvek, ať už je ve značce kdekoli . Postačuje následující označení: <div class="price">$45.99</div>. Dalším příkladem je Ajax programovací technika, kde například klepnutí na hypertextový odkaz může způsobit, že kód JavaScriptu načte text nové cenové nabídky, který se zobrazí na stránce aktuální na stránce, aniž by bylo nutné znovu načíst celou stránku. Když nový text dorazí zpět ze serveru, JavaScript musí identifikovat přesnou oblast na stránce, aby ji mohl nahradit novými informacemi.

K testování značek na webových stránkách může být nutné použít také nástroje pro automatické testování rozpětí a div elementy' třída nebo id atributy. v dynamicky generovaný HTML, to může zahrnovat použití nástrojů pro testování stránek, jako je HttpUnit, člen xUnit rodiny a nástroje pro zátěžové nebo zátěžové testování, jako je Apache JMeter při aplikaci na řízený formou webové stránky.

Nadužívání

Uvážlivé používání div a rozpětí je důležitou součástí značek HTML a XHTML. Někdy jsou však nadužívány.

Rozličný seznam struktury dostupné v HTML mohou být výhodnější než domácí směs div a rozpětí elementy.[6]

Například toto:

<ul třída="Jídelní lístek">  <li>Hlavní strana</li>  <li>Obsah</li>  <li>Pomoc</li></ul>

... je obvykle lepší než toto:

<div třída="Jídelní lístek">  <rozpětí>Hlavní strana</rozpětí>  <rozpětí>Obsah</rozpětí>  <rozpětí>Pomoc</rozpětí></div>

Další příklady sémantického použití HTML spíše než div a rozpětí prvky zahrnují použití sada polí prvky k rozdělení webového formuláře, použití legenda prvky k identifikaci těchto rozdělení a použití označení identifikovat formu vstup prvky spíše než div, rozpětí nebo stůl prvky používané pro tyto účely.[7]

HTML5 představil několik nových prvků; několik příkladů zahrnuje záhlaví, zápatí, nav a postava elementy. Použití sémanticky vhodných prvků poskytuje dokumentům HTML lepší strukturu než rozpětí nebo div.[8]

Viz také

Reference

  1. ^ A b „HTML5: Slovník a související API pro HTML a XHTML“. 4.4 Obsah seskupení: W3C. Citováno 16. září 2014.CS1 maint: umístění (odkaz)
  2. ^ A b „HTML5: Slovník a související API pro HTML a XHTML“. 4.5 Sémantika na úrovni textu: W3C. Archivovány od originál dne 1. srpna 2015. Citováno 16. září 2014.CS1 maint: umístění (odkaz)
  3. ^ „HTML / Elements / span - Web Education Community Group“. 2013-06-13. Citováno 2013-11-14.
  4. ^ „HTML
    tag“. W3Schools. Citováno 22. března 2018.
  5. ^ „HTML 5.1: 4. The elements of HTML“. W3.org. Citováno 3. srpna 2017.
  6. ^ Harold, Elliotte Rusty (2008). Refaktorování HTML. Addison Wesley. p. 184. ISBN  0-321-50363-5. Neexistuje jednoduchý způsob, jak najít všechny neidentifikované seznamy na webu. [...] Mohou být označeny desítkami různých způsobů: jako odstavce, divs, tabulky atd. Jakmile najdete seznam, označení jednotlivých položek je snadné. Stačí použít ul, olnebo dl místo aktuálního prvku obálky. [...] Například k odstranění odrážek přidejte toto pravidlo do šablony stylů CSS stránky: [...]
  7. ^ Raggett, Dave; Arnaud Le Hors; Ian Jacobs (1999). "Přidání struktury do formulářů: prvky FIELDSET a LEGEND". Specifikace HTML 4.01. W3C. Citováno 12. července 2010. The FIELDSET prvek umožňuje autorům seskupit tematicky související ovládací prvky a štítky. Seskupování ovládacích prvků usnadňuje uživatelům pochopit jejich účel a současně usnadňuje navigaci pomocí karet pro vizuální uživatelské agenty a navigaci řeči pro uživatelské agenty zaměřené na řeč. Správné použití tohoto prvku zpřístupní dokumenty.
  8. ^ van Kesteren, Anne (2010). „Rozdíly HTML5 oproti HTML4“. W3C. Citováno 30. června 2010.

externí odkazy