Zastaralé HTML tagy a alternativy - Český HTML 5 manuál

Následující tagy byly odebrány z HTML specifikace a neměli byste je tedy používat. Naleznete zde jejich rejstřík a důvody, proč již nejsou součástí HTML. 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 dalšímu používání.

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 článku Ú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:

<span style="color: green;">21:24</span>

Na vašich stránkách potom budete mít:

<span class="hodiny">21:24</span>

Do CSS dokumentu vložíte:

.hodiny {color: green;}

Špatně je 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.

Přejděme k zastaralým tagům:

<big>

Tag vykreslil větší text než normální.

Ukázka:

<big>větší text</big>

Správné zvětšení textu pomocí CSS

<span style="font-size: 1.2em;">větší text</span>

<small>

Podobně jako big se v HTML vyskytovalo i small. Tento element byl ponechán a slouží k označení textu s nízkým významem. Big tedy používat nesmíme, small ano.

<strike>

Vykreslil text jako přeškrtnutý.

Ukázka:

<strike>přeškrtnutý text</strike>

Správné přeškrtnutí textu pomocí CSS

<span style="text-decoration: line-through;">přeškrtnutý text</span>

<font>

Umožňoval nastavit typ, velikost a barvu písma.

Ukázka:

<font face="arial" color="green" size="2">ostylovaný text</font>

Správné nastavení písma pomocí CSS

<span style="font-family: arial; font-size: 9pt; color: green;">ostylovaný text</span>

Pozn. Pokud má font v názvu mezery (např Times new roman), v CSS ho zapíšeme do apostrofů či uvozovek.

<center>

Tag sloužil k centrování elementů do něj vložených.

Ukázka:

<center>Text <img src="obrazek.png" alt="obrázek" /> <table><tr><td>tabulka</td></tr></table></center>

Centrování v CSS

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 style="text-align: center;">Text <img src="obrazek.png" alt="obrázek" /></div>

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 style="text-align: center;">Text <img src="obrazek.png" alt="obrázek" /><table style="margin: 0 auto; width: 640px;"><tr><td>tabulka</td></tr></table></div>

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 to 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.

Příklad HTML stránky s rámci:

<html>
<head>
    <title>Stránka s rámci</title>
</head>

<frameset cols="150, *">
    <frame name="menu" src="menu.html" />
    <frame name="obsah" src="omne.html" />
    <noframes>Web o rybičkách a akvarijních živočích. Můžete ručně přejít do <a href="menu.html">Menu</a>.</noframes>
</frameset>

Nezaměňujte rámce s inline rámcem iframe, který je validní.