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.
| 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 |
| autofocus | prvek po načtení stránky automaticky dostane focus | 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 |
| enterkeyhing | definuje chování klávesy Enter | upravitelné elementy |
| 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 , 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 formulářové pole nejen na stránce, ale hlavně při odesílání formuláře nějaké aplikaci. Aplikace musí být udělaná tak, aby podle hodnot name identifikovala vstupy z formuláře. Viz např. zpracování formulářů v PHP.
Ve skriptech a kotvách funkci atributu name převzal atribut id, takže name se významně používá už jen ve formulářích.
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="https://www.seznam.cz/" accesskey="s">Máte rádi <b>S</b>eznam?</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.
autofocus
Prvek dostane focus hned po načtení stránky.
Focus je typicky kurzor, to znamená, že do fokusovaného prvku jde buďto psát (<input type="text">) nebo ho zaškrtnout mezerníkem (<input type="checkbox">), případně hned provádět klávesové akce jiných prvků.
Dříve se na to používal javascript focus().
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. Zavržený atribut. Používal se velmi zřídka, většinou se totiž skriptuje v JavaScriptu a ten není potřeba nějak nastavovat. Důvodem pro existenci tohoto atributu byla v minulosti představa, že se stránky budou skriptovat různými jazyky, ne pouze javascriptem.
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é a v případě prvků upravovaných přes contenteditable ještě obtížnější. Obvykle se na to odeslání používá javascriptová vlastnost innerHTML a na to zpracování třeba PHPko.
Atribut contenteditable se objevil kolem roku 2004 a býval nestandardním rozšířením HTML. V roce 2009 byl bez problému podporován ve všech hlavních prohlížečích. Také byl zahrnut do standardu HTML5 a v roce 2020 funguje spolehlivě i bez hodnoty true.
<div contenteditable="true">Tohle může uživatel přepsat. Samozřejmě se to neuloží, pokud se to neoskriptuje.</div>
enterkeyhint
Atribut enterkeyhint řeší, jak se má chovat klávesa Enter. Zjednodušeně řečeno může buďto odesílat formulář (jako to dělá ve formulářích, které mají <input type="submit">), může dělat nový řádek (jako v <textarea>) nebo se může chovat ještě jinak. Smysl tento atribut má pouze u upravovatlených prvků. To jsou jednak formulářové prvky, jednak prvky s nastaveným contenteditable.
Hodnoty atributu jsou pouze tyto: enter, done, go, next, prefious, search a send. Enter dělá nový řádek, ostatní jsem netestoval a nepotřeboval. Jestli jsem to správně pochopil, jsou užitečné hlavně na mobilech.
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
