Sémantika na webu

Na základě kladné odezvy čtenářů na příspěvek Typografie na webu vám Mraveniště předkládá přehled některých méně známých sémantických XHTML elementů se kterými se Vám bude tvořit webový obsah snadněji, správněji a sémantičtěji.

Nadpisy, zdůraznění, atd. ?

Snad netřeba znovu omílat, že nadpisy se mají vyznačovat <h1>, <h2>, mírně zdůrazněné pasáže jako <em>, silně zdůrazněné pak jako <strong>, atd…

Jak citovat jiné zdroje?

Citujete-li jinou osobu, publikujete ukázku z knihy, nebo zapisujte přímou řeč, nabízí vám (X)HTML dva elementy:

  • <blockquote> – je blokový element vhodný k citování celých odstavců. Př.: <blockquote><p>Text odstavce</p></blockquote>.
  • <q> – je řádkový element vhodný k citování krátkých úryvků, nebo k sémantickému vyznačení přímé řeči. Př.: A Pavel řekl: <q>Vrátím se brzy!</q>.

Vyvarujte se však psaní uvozovek. Prohlížeč by měl správně sám doplnit počáteční a koncové uvozovky typické pro jazyk dokumentu. Žel bohu tak nejpoužívanější IE nečiní. Je však vhodné pomocí CSS elementy patřičně nastylovat – nejčastěji se používá kurzíva, nebo jiný font.

Jak zapisovat zkratky?

Pro zkratky nám (X)HTML nabízí dva řádkové elementy:

  • <abbr> – pro vyznačení zkratky. Zkratka pak může být vysvětlena v atributu title. Př.: <abbr title="Česká republika">ČR</abbr>.
  • <acronym> – pro vyznačení akronymů, tedy zkratkovitých slov, nebo jinak zkratek čtoucích se jako jedno slovo. Patří sem slova typu NATO, STEM, která se na rozdíl od příkladně výše zmíněné ČR nehláskují, ale čtou jako jedno slovo.

Jak psát počítačové příručky

Psaní i jednoduché příručky na použití programu se pisatel neobejde bez ukázek, co má zmáčknout na klávesnici uživatel a co mu na to řekne program. K tomuto se výtečně hodí následující dva řádkové elementy:

  • <kbd> – pro vyznačení textu, který má zadat uživatel
  • <samp> – pro vyznačení textu, který vrátí program, resp. který se zobrazí na obrazovce

Jak psát ukázky počítačového kódu?

Pro zápis ukázek ze zdrojových kódů programů, HTML a CSS souborů, atd. je vyhrazen řádkový element <code>. Většinou se používá v kombinaci s blokovým elementem <pre>, jehož obsah by měl být důsledně zachován (co do počtu mezer, konců řádků, atd.) a vykresluje se povětšinou neproporcionálním fontem. Upozorňuji, že <pre> je blokový element, a <code> by měl být vždy jeho potomkem, tedy tím vnořenějším.

Jak přidávat a rušit text?

Častým úkonem bývají drobné změny, úpravy a zpřesnění ve stávajících stránkách. Jestliže na takové stránky někdo odjinud odkazuje, či dokonce komentuje část, kterou hodláte upravit, je třeba nemást čtenáře náhlou neoznačenou změnou. Právě tady pak výtečně poslouží elementy <ins> pro vložený text a <del> pro text smazaný.

Atribut datetime by měl obsahovat datum editace. Jelikož je však prachbídně využíván ze strany majoritního IE, je vhodné použít zároveň atribut title.

Oba elementy se chovají jako blokové nebo jako řádkové podle toho, jak jsou použity. Jestliže obsahují další blokové elementy, kupříkladu celý odstavec, i náš nadřazený se pak bude chovat jako blokový. Pokud je použijeme přímo v textu, chovají se jako řádkové.

Smazaný text se implicitně zobrazuje jako přeškrtnutý. Oba elementy je možné samozřejmě dodatečně naformátovat podle libovůle pomocí CSS.

Implementační chyby

Výše zmíněné elementy lze s přehledem naformátovat pomocí CSS. To je možné bez problému a čtenářovi tak usnadníme orientaci na stránkách.

Horší je to s již zmíněnými uvozovkami u citací, které majorita jménem IE nedoplňuje. Dále pak zkratka ABBR, kterou IE ignoruje úplně. Mezi světovými GURU na webdesign není ujednocený názor, jak problém řešit. Konkrétně u uvozovek, kde dobrá polovina expertů píše uvozovky přímo do HTML kódu a druhá polovina specialistů pak programuje klientské JavaScripty, které u IE uvozovky doplní automaticky. Sám se přikláním k JavaScriptovému řešení, které sice není ideální, ale lepší nikdo neznáme.

Zdroje k elementům:

Zdroje k řešení implementačních chyb:

Komentáře

Článek ještě nikdo nekomentoval.

Váš komentář

K článku nelze připojit komentář, Mraveniště bylo zakonzerováno.


Copyright © Jan Bien.
W3C XHTML 1.0  | W3C CSS 2  | UAW adaptive  | Geo URL  | RDF RSS