Lekce 18 - Zastaralé tagy v HTML
V minulé lekci, Ostatní tagy v HTML II. část, jsme si ukázali tagy
<dialog>, <address>,
<bdi>, <bdo>, <hr>,
<meter>, <progress> a komentář, které
se řadí mezi ty ostatní.
Následující tagy byly odebrány z HTML specifikace a neměli bychom je tedy používat. Naleznete zde jejich rejstřík a důvody, proč již nejsou součástí HTML. Některé tagy jsou z důvodu kompatibility se starými webovými stránkami prohlížeči stále podporovány. To že fungují ovšem vůbec neznamená, že jsou určené k tvorbě moderních webových stránek.
Stylovací tagy
Pro přehlednost a snazší hromadnou modifikovatelnost do HTML stránky
vkládáme pouze obsah, který nese nějaký význam. Úprava vzhledu elementů
(stylování) se vyčlenila do samostatného dokumentu CSS. Stylování tedy
již do HTML dokumentu nepatří, více v lekci Úvod
do CSS. Níže uvedené tagy budou vždy předvedeny v ukázce a poté
nahrazeny validní CSS alternativou. V ukázce budu CSS vkládat do atributu
style, např. pro výpis zelených hodin.
Ukázka
Špatně
Pro výpis zelených hodin jsme dříve psali tento kód:
<span style="color: green;">21:24</span>
To je však špatně. CSS patří do samostatného souboru. Špatně je i tato varianta:
<span class="zeleny">21:24</span>
Protože název třídy se nemá odvozovat od toho, jak se to má zobrazit, ale co se má zobrazit.
Správně
<span class="cas">21:24</span>
Do CSS dokumentu vložíme:
.cas { color: green; }
Popř. třídu nazveme text-green. Takový framework Bootstrap například využívá
třídy text-primary, text-secondary,
text-danger apod.
Výsledek
Zobrazí se nám tedy čas, který má zelenou barvu:
Zastaralé tagy
<big>
Tag vykreslil větší text než normální. Některé prohlížeče, kvůli
zpětně kompatibilitě tag <big> stále podporují. V HTML 5
řešíme zvětšení textu pomocí CSS a tagu <span>.
Ukázka
Špatně
<big>Větší text</big>
Správně
Správné zvětšení textu pomocí CSS:
<span class="dulezite">Větší text</span>
A v CSS souboru budeme mít toto:
.dulezite { font-size: 1.2em; }
Výsledek
Můžeme se přesvědčit, že náš text je větší:
<small>
Podobně jako tag <big> se v HTML vyskytoval i tag
<small>. Tento element byl ponechán a
slouží k označení textu s nízkým významem. Tag <big>
tedy používat nesmíme, tag <small> ano.
Ukázka
Využití zde nalezneme v případě, že máme použita velká písmena. Text tak z řádku tolik nevyčnívá:
<p>Tento text je normální, ale <small>TENTO TEXT UŽ JE MENŠÍ</small>.</p>
Výsledek
Text velkými písmeny z řádku opravdu nevyčnívá:
<strike>
Tag <strike> vykreslí text jako přeškrtnutý. Opět zde
platí, že kvůli zpětné kompatibilitě ho některé prohlížeče stále
podporují.
Alternativu zde můžeme najít pomocí tagu <s>
nebo <del>.
Ukázka
Špatně
<strike>Přeškrtnutý text.</strike>
Správně
Kód v HTML:
<span class="neplatny-vyrok">Přeškrtnutý text.</span>
Kód v CSS:
.neplatny-vyrok { text-decoration: line-through; }
Výsledek
Text máme opravdu přeškrtnutý:
<basefont>
Tag <basefont> se dříve používal jako nadřazený
element, který nastavil typ, velikost a barvu všem potomkům, tedy elementům,
které byly pod ním. Pomocí tagu <font> jsme mohli
jednotlivé elementy měnit. V HTML 5 se toto řeší jednoduše pomocí CSS a
to tak, že elementu <html> nebo <body>
přiřadíme námi zvolené písmo, velikost a barvu.
<font>
Umožňoval nastavit typ, velikost a barvu písma. Některými prohlížeči je stále podporován, nicméně bychom tento tag neměli dále používat.
Ukázka
Špatně
<font face="arial" color="green" size="2">Ostylovaný text.</font>
Správně
Opět dbáme na to, aby třída byla odvozena od toho co má zobrazovat:
<span class="uspech">Váš formulář byl úspěšně vyplněn.</span>
.uspech { font-family: arial; font-size: 1.2em; color: green; }
Pokud má font v názvu mezery (např. Times New Roman), v CSS ho zapíšeme do apostrofů či uvozovek.
Výsledek
Text nám signalizuje, že naše operace byla úspěšná:
<center>
Tag sloužil k centrování elementů do něj vložených. S příchodem HTML
5 již centrování řešíme pomocí CSS. Kvůli zpětné kompatibilitě je tag
<center> některými prohlížeči stále podporován.
Ukázka
Špatně
<center><img src="obrazek.png" alt="obrázek" /> <table> <tr> <td>tabulka</td> </tr> </table> </center>
Správně
V CSS již nemůžeme centrovat takovýmto způsobem, protože je jeho
stylování chápáno jinak. K centrování textu a dalších
řádkových elementů (např. obrázků) je jednoduše
všechny vložíme do tagu <div> s následujícími
parametry:
<div class="center"> <img src="obrazek.png" alt="obrázek" /> </div>
CSS:
.center { text-align: center; }
Tabulku takto ovšem nevycentrujeme, jelikož je blokovým
elementem. Pro blokové elementy, které si přejeme vycentrovat,
musíme nastavit horizontální margin na hodnotu auto
a nesmíme zapomenout nastavit jejich šířku:
<div class="center"> <img src="obrazek.png" alt="obrázek" /> <table> <tr> <td>Tabulka</td> </tr> </table> </div>
CSS:
.center { text-align: center; } table { margin: 0 auto; width: 640px; }
Výsledek
<applet>
Tag <applet> byl využíván pro vložení appletu
(plug-inu).
Alternativou pro tento zastaralý tag je párový tag <video>.
<acronym>
Tag <acronym> se využíval jako vysvětlivka zkratky.
Tento tag je zastaralý a nahradil ho tag <abbr>.
<command>
Tag <command> měl být původně využit pro vložení
příkazu do kontextového menu, kde mohl mít podobu radiobuttonu, checkboxu
nebo tlačítka. Měl se vkládat volně do stránky, kde by definoval
klávesovou zkratku. Nicméně byl z HTML 5 odstraněn a není tedy
prohlížeči podporován.
Rámce
Rámce se používaly k zobrazování podstránek a z HTML byly odebrány ze dvou důvodů. Prvním je, že s nimi měly problémy vyhledávače (např. Google). Druhý důvod je vlastně příčina těchto problémů - s rámci se totiž nemůžeme dostat na určitou stránku pomocí URL adresy, celý web má jedno URL a navigace probíhá pomocí rámců. Pozici na webu nelze nijak zaznamenat, vždy se musíme k dané podstránce znovu proklikat.
Rámce jsou určitě špatné, ale dle mého názoru je to dobrá cesta pro první web, kde začátečníci nemusí opisovat stále navigační menu do každé stránky nebo k tomu používat další jazyk. Jako jedinou alternativu rámců ve statickém HTML vidím tabulkový layout, kde rozdílné renderování tabulky řeší problém s výškou divu a výškou iframe.
<frameset>
Frameset obsahoval soubor rámů. Do HTML stránky se vkládal místo tagu
<body> a rámce tedy zaplňovaly celý obsah dokumentu. V
každém rámci se zobrazovala samostatná HTML stránka.
<frame>
Frame byl rámec, ve kterém se zobrazovala samostatná HTML stránka.
<noframes>
Do tagu <noframes> se vkládal obsah, který se zobrazil v
případě, že daný prohlížeč rámce nepodporoval. Tag se vkládal do
framesetu a obvykle obsahoval popis stránky a odkaz na alternativní navigaci.
Někdy je do <noframes> nesprávně vkládána hláška:
"Váš prohlížeč nepodporuje rámce". Tento text však indexují
vyhledávače místo titulní stránky a měl by tedy obsahovat zejména
klíčová slova a navigaci.
Ukázka
S příchodem HTML 5 nejsou tyto tagy validní, slouží pouze jako ukázka:
<frameset cols="200, *"> <frame name="menu" src="menu.html" /> <frame name="obsah" src="omne.html" /> <noframes>Web o rybičkách a akvarijních živočiších. Můžete ručně přejít do <a href="menu.html">Menu</a>.</noframes> </frameset>
Alternativou pro tyto tagy je párový tag <iframe>.
V následujícím kvízu, Kvíz - Ostatní tagy v HTML5, si vyzkoušíme nabyté zkušenosti z předchozích lekcí.
