Obecné atributy

Existují atributy, které může mít každý HTML tag. Já je nazývám obecnými atributy a pro úsporu místa je uvádím najednou.

Přehled obecných atributů
Atribut Význam Platnost pro
class třída pro CSS selekci všechny elementy
id identifikátor pro CSS a skripty všechny elementy
style zápis CSS stylu zobrazované elementy
title titulek elementu, doplňující info v bublině všechny elementy
lang jazyk elementu všechny elementy
name jméno pro spolupráci s dalšími prvky různá použitelnost
accesskey funkční klávesa aktivní elementy
tabindex pořadí aktivizace tabulátorem aktivní elementy
language jazyk skriptu všechny elementy
dir směr textu zejména <bdo>
contenteditable uživatel může upravovat obsah asi všechno
translate instrukce pro jazykové překladače asi všechno
události uživatelské události spouštějící skripty zobrazované elementy

class

Třída elementu používaná pro CSS. Umožňuje jednoduché označení elementu, který má mít jiný vzhled. V zápisu stylu se jménu třídy předřazuje tečka. Příklad:

<style>
.cervene {color: red}
</style>
...
<p class="cervene">Odstavec červeným písmem</p>

id

Identifikátor, který by měl být jednoznačný. Používá se pro CSS a skripty. V zápisu CSS se jménu identifikátoru předřazuje křížek #. Příklad:

<style>
#mrnavej {font-size: 5px}
</style>
...
<p id="mrnavej">Odstavec děsně mrňavým písmem.</p>

style

Zápis stylu v jazyce CSS. Takovému zápisu stylu se říká in-line zápis. Příklad:

<p style="line-height: 200%">Odstavec s dvojitou výškou řádku</p>

title

Titulek elementu, doplňková informace. V dnešních prohlížečích se zobrazuje ve žluté bublině při přejíždění elementu myší. Říká se tomu tooltip. Funguje to na libovolném tagu. Užitečné jsou tooltipy zvláště u odkazů a formulářových polí.

<a href="http://www.jakpsatweb.cz/" title="o tvorbě, údržbě a zlepšování internetových stránek">Jak psát web</a>

Je-li třeba v title (tedy hlavně v tom textu žluté bubliny) zalomit řádek na určitém místě, dělá se to pro Internet Explorer entitou &#10;, v ostatních prohlížečích to neumím. Internet Explorer a Opera text bubliny zalomí samy. Mozilla (a tedy i Firefox) zobrazí z bubliny pouze jeden řáde v délce asi pouze 80 znaků (zbytek nahradí třemi tečkami).

Uvádí se, že si hodnoty atributu title všímají vyhledávače. Osobně se domnívám, že je v tomto ohledu význam atributu title přeceňován.

Kdysi dávno šla žlutá bublina při přejetí myši udělat jenom atributem alt u obrázků.

lang

Jazyk elementu. V současnosti nepříliš užitečná věc. V budoucnu se s ní počítá pro lepší zobrazování dokumentu v národním prostředí. Standardní hodnotou pro češtinu je "cs" (nikoli cz), pro slovenčinu "sk". Angličtina má verze, např "en-us" pro americkou nebo "en-uk" pro britskou.

V současnosti má atribut lang význam například pro wysiwyg editor FrontPage, který podle něj vybírá slovník pro kontrolu pravopisu.

Pomocí lang se dá i nepříliš spolehlivě odlišovat podpora CSS v Mozille a Opeře.

name

Jméno. Není to až tak obecný atribut, dá se užitečně použít pouze u některých tagů, zejména formulářových. Vždy má ale tentýž účel: jednoznačně pojmenovat (identifikovat) element pro spolupráci prvků. Ve skriptech a záložkách jeho funkci převzal atribut id, takže name už je skoro na odpis.

accesskey

Funkční klávesa. Tento atribut dovoluje ke každému elementu přiřadit klávesu, po jejímž stisknutí (na Windowsech navíc s Altem) se bude element aktivovat. Dá se použít pouze u elementů, které mohou být aktivovány, to znamená u odkazů a prvků formuláře.

Příklad odkazu s funkční klávesou:

<a href="www.alt-f4.cz" accesskey="w">Máte rádi <b>W</b>indows?</a>

Další informace o accesskey.

tabindex

Pořadí prvku pro funkci tabelátoru. V prohlížečích tabulátor slouží pro přecházení po aktivních prvcích (odkazy a prvky formuláře). Atribut tabindex dovoluje pozměnit výchozí pořadí prvků, takže se mohou aktivovat v jiném pořadí, než jak jsou uvedeny v HTML kódu. Hodnotou atributu tabindex je přirozené číslo. Nastaví-li se něčemu nula, pak tento objekt nelze tabulátorem aktivovat.

hidden

Atribut hidden způsobí skrytí prvku v prohlížeči. Skrytí je tak dokonalé, že na stránce ani nezabírá místo. Efekt je téměř přesně stejný jako v případě použití CSS stylu display: none; (viz vlastnost display). Liší se pouze ve způsobu, jak skriptem toto skrytí zrušit. Užitečnost atributu hidden je podle mě pouze právě ve vazbě na skripty. Jinak přece nedává smysl dávat do stránky něco, co nikdo neuvidí.

Novinka v HTML 5, ale už funguje v prohlížečích.

language

Jazyk skriptu. Používá se velmi zřídka, většinou se totiž skriptuje v JavaScriptu a ten není potřeba takto nastavovat. Ale programátoři v VBScriptu potřebují atribut language pro zápis in-line skriptů. Pozor, nepleťte si atribut language s atributem lang (jazyk dokumentu).

dir

Směr textu. Hodnoty jsou dir="ltr" a dir="rtl". Rtl je zprava doleva (right to left), hodí se pro hebrejštinu, arabštinu a jiné jazyky psané zprava doleva. Je částečně podporován i pro jiné jazyky, ale nemám s ním dobré zkušenosti, chová se poněkud zmateně.

Moderní prohlížeče (Mozilla, IE6) už atribut dir="rtl" částečně podporují u blokových tagů -- zarovnají je doprava. Dá se tak třeba i přesunout rolovací lišta na levou stranu okna, ale jsou to všechno jenom takové nedůležité hrátky, v českém prostřední nepoužitelné.

Aby se kromě zarovnání obrátil i text písmenko po písmenku, je nutno atribut dir použít v tagu <bdo> (kterýžto tag jinak pro jeho zbytečnost nikde nezmiňuji).

contenteditable="true"

Uživatel může upravovat text prvku. Typicky se používá pro tag div, čímž vznikne taková jako bohatší textarea. Na rozdíl od textarea může obsahovat (a uživatel může vkládat) libovolný HTML obsah (pokud to umí). V praxi uživatel obsah prvku mění hlavně psaním z klávesnice.

Atribut contenteditable stojí v pozadí valné většiny wysiwyg editorů v redakčních systémech.  Contenteditable vůbec neřeší, jak se se změněným textem bude dále pracovat, situace je tedy stejná jako v případě tagu textarea -- aby se text někam zapsal nebo uložil, je stránku potřeba zpracovat nějakým serverovým skriptem. To je relativně obtížné. Obvykle se na to odeslání používá javascriptová vlastnost innerHTML a na to zpracování třeba PHPko.

Atribut contenteditable je nestandardním rozšířením HTML, ale v roce 2009 je bez problému podporován ve všech hlavních prohlížečích. Asi proto byl zahrnut do standardu HTML5.

<div contenteditable="true">Tohle může uživatel přepsat. Samozřejmě se to neuloží, pokud se to neoskriptuje.</div>

translate

Webové překladače, například translate.google.com, umějí překládat stránky. Občas ale překládají i slova, která by měla zůstat v originále. Překladači se může pomoci tím, že se příslušný prvek, který nemá být překládán, obalí tagem, kterému se nastaví hodnota atributu translate="no".  Potom takový prvek překladač nechá v originálu. Výchozí hodnota, kterou není třeba zadávat, je translate="true". Ta znamená, že překladač má prvek překládat.

Příklad ukazuje text, který by přeložením jmen pozbyl smyslu. Jména jsou označena, aby se nepřekládala:

<p>V průběhu ranného středověku se původní český název města Prahy změnil z <span translate="no">Praga</span> na <span translate="no">Praha</span>.

události

V dynamickém HTML se do každého tagu může přidat atribut události, který zařídí spuštění nějakého skriptu. Událostí je asi dvacet, klasickým příkladem je onmouseover -- přejetí prvku myší nebo onclick -- kliknutí na element. Výpis všech možných událostí už nepatří do HTML, ale do popisu skriptovacích jazyků. V angličtině se událostem říká "events". Příklad:

<p onclick="alert('Trefa')">Klikatelný odstavec</p>

 

Reklama

www.webhosting-c4.cz, webhosting s doménou v ceně. 20GB

o tvorbě, údržbě a zlepšování internetových stránek

Návody HTML CSS JavaScript Články Ostatní

HTML tagy Abecedně Příklady HTML tahák

Jak psát web píše Yuhů, Dušan Janovský. Kontakt.