HTML příručka

Popis HTML tagů a jejich atributů, jak jsou podporovány hlavními prohlížeči Internet Explorer, Chrome, Firefox aj. v roce 2021 (průběžně aktualizováno od 2001). Manuál nepíšu podle html reference nebo specifikace, ale ze zkušeností (odpovídá to podporované kombinaci HTML 4.01 a HTML 5).

Jste úplní začátečníci? Napřed si přečtěte, jak si udělat stránky a jak stránky dostat na server. Příklady najdete v HTML taháku, nebo mrkněte na nejužitečnější tagy.

Přehled HTML značek (tagů)

Jednotlivé tagy popisuji v těchto kapitolách:

Struktura - Text - Bloky - Seznamy - Odkazy - Obrázky - Klikací mapy - Tabulky - Rámy - Objekty - Formuláře - Hlavička - Skripty a styly - Rozšíření - Strukturní tagy z HTML 5

Jazyk HTML

Syntaxe - co se jak v HTML píše, uvozovky, mezery, tagy

Terminologie - čemu se jak v HTML říká

URL - zápis webových adres, příklad, rozbor

Barvy - základní zápis barev v HTML

Délky - HTML zná pouze pixely, procenta a stupně písma

Znakové entity - značky, které mají v HTML speciální význam, nebo speciální znaky se píšou &entitami;

Nejdůležitější tagy - vhodné pro začátečníky, kteří nepotřebují umět všechno

Obecné atributy - bublinové nápovědy, označení jazyka apod.

XHTML - rozdíly syntaxe HTML a XHTML

Verze HTML - nedůležité historické povídání

Rejstřík tagů - abecedně řazená tabulka HTML tagů

HTML tahák - příklad nejčastějších zápisů

Podmíněné komentáře - zvláštní poznámky pro Internet Explorer

HTML 5 - co už se dá z HTML 5 pomalu používat

zobrazit vysvětlení

Níže následuje podrobný rozpis HTML tagů spíše pro pokročilé:

Struktura dokumentu

Každý HTML soubor by měl obsahovat několik základních tagů hlavičky a těla. Tím se zaručí, že všichni klienti (zejm. prohlížeče) pochopí, o co v dokumentu vlastně jde.

tag Význam Párový Výskyt
html začátek HTML dokumentu ano na začátku souboru
head hlavička stránky ano na začátku souboru
body tělo stránky + definice pozadí ano za <head>
<!-- --> poznámka ano kdekoliv 
!doctype specifikace DTD ne úplně na začátku souboru

Úprava textu

Zastaralý způsob úpravy HTML textu se orientuje podle vzhledu, tomu říkám fyzické formátování. Fyzické formátování říká například textu, že bude tučný, namísto aby řekl, že je to důležitý text. Vyznačení smyslu HTML textu je naopak formátování logické.

Fyzické formátování

tag Význam Párový Používat?
b tučné písmo ano ano
i kurzíva ano ano
u podtržení textu ano ne
sub dolní index ano ano
sup horní index ano ano
small zmenšení textu ano  
big zvětšení písma ano  
s přeškrtnutý text ano  ne
strike přeškrtnutý text ano  
font písmo ano ne
basefont základní font ne ne
blink blikání písma ano ne
mark vyznačení v citaci ano ?
ruby anotace nad textem ano ?
nobr nezalamovat obsah ano  
wbr volitelné rozdělení ne klidně

Logické formátování

tag Význam Párový Obvyklý vzhled
span úsek textu ano normální
strong zvýraznění (tučně) ano tučné
em zvýraznění (kurzíva) ano kurzíva
cite citace ano kurzíva
code výpis kódu ano strojopis
dfn nově použitý termín ano kurzíva
kbd vstup z klávesnice ano strojopis
samp ukázka ano strojopis
tt teletype ano strojopis
var formátování proměnné ano kurzíva
abbr ustálený výraz ano normální
acronym zkratka ano normální
del smazaný obsah ano přeškrtnuto
ins přidaný text ano podtrženo
q citace ano normální

Bloky

Do přehledu bloků jsem kromě blokových prvků zahrnul všechny HTML tagy, které způsobí zalomení řádky (kromě tabulek a seznamů). Tato skupina tagů je tím pádem poněkud umělá, ale HTML tagy <br> a <hr> se mi prostě jinam nevešly.

tag Význam Párový
p odstavec nepovinně
br řádkový zlom ne
div oddíl ano
center vycentrování ano
h1 nadpis 1. úrovně ano
h2 nadpis 2 úrovně ano
h3 nadpis 3. úrovně ano
h4 nadpis 4. úrovně ano
h5 nadpis 5. úrovně ano
h6 nadpis 6. úrovně ano
blockquote citace, odsazení ano
address adresa ano
pre předformátovaný text ano
hr vodorovná čára ne

Další blokové tagy přineslo HTML 5.

tag Význam Párový
header záhlaví stránky ve smyslu viditelné hlavičky ano
footer patička stránky ano
main hlavní obsah stránky ano
article jeden článek, zejména pro situaci, kdy je na stránce článků víc ano
aside vedlejší obsah ano
section obsahová sekce, například kapitoly článku ano
nav navigace stránky ano
figure obalení obrázku nebo jiného obsahu s jeho souvisejícím obsahem ano
figcaption nadpis tagu figure ano

Seznamy

Říká se tomu také odrážky a číslování. HTML zná také definiční výčty, které se používají velmi málo.

tag Význam Párový Výskyt
li položka seznamu nepovinně <ul>,<ol> <menu> nebo <dir>
ol číslovaný seznam ano  
ul odrážkový seznam ano  
dir zvláštní druh seznamu ano  
menu typ seznamu ano  
dl seznam definic ano  
dt definovaný termín ano <dl>
dd definice termínu ano <dl>

Rozklikávací položky

Rozklikávání a sbalování funguje i bez javascriptu.

tag Význam Párový Výskyt
details sbalený a rozbalitelný obsah ano  
summary zobrazený nadpis sbaleného obsahu ano uvnitř <details>

Odkazy

Odkaz se v HTML dělá tagem <a>. Mohly by sem patřit také HTML značky <map> a <area>, které uvádím u klikacích map.

tag Význam Párový Výskyt
a odkaz, hyperlink, kotva ano kdekoliv kromě <a>

Příklad: <a href="http://www.seznam.cz">Seznam</a>

Obrázky

tag Význam Párový
img obrázek ne
picture kontejner pro obrázek ano

Klikací mapy

Dnes už skoro zapomenutá možnost proměnit různé části obrázku v aktivní oblasti, které se chovají jako odkaz.

tag Význam Párový Výskyt
map klikací mapa ano  
area oblast v klikací mapě ne <map>

Tabulky

Tabulky jsou v HTML na strukturované zobrazování dat, používají se ale i na celkové rozvržení stránky (což je zastaralé). Podstatné jsou pouze tagy <table>, <tr> a <td>.

tag Význam Párový Výskyt
table tabulka ano  
tr řádek tabulky nepovinně <table>, <tbody>, <thead>, <tfoot>
td buňka tabulky nepovinně <tr>
th hlavičková buňka tabulky nepovinně <tr>
caption hlavička tabulky ano <table>
col ovlivnění sloupce tabulky ne <table>
colgroup skupina sloupců tabulky ne <table>
tbody tělo tabulky ano <table>
thead hlavička tabulky ano <table>
tfoot patička tabulky ano <table>

Multimedia

V HTML5 se konečně urodily tagy, kterými se dá do stránek dobře vkládat audio a video.

Tag Význam Párový
video obálka navzájem alternativních video souborů ano
audio obálka navzájem alternativních audio souborů ano
source možný zdroj audia, videa nebo obrázku ne
track další stopy, typicky titulky ne

Rámy

Rámy dokážou rozdělit okno prohlížeče na několik obdélníkových částí (rámů) a v každém z nich zobrazit jinou html stránku.

tag Význam Párový Výskyt
frameset skupina rámů ano za <head>
frame rám ne <frameset>
noframes alternativa rámů ano <frameset>
iframe vložený rám ano  

Objekty

Vkládání videí, animací, her, zvuků, reklam a podobných blbostí.

tag Význam Párový Výskyt
applet Java aplet ano  
object objekt ano  
param parametry objektu ne <object>, <applet>
embed objekt s plužinou asi  
noembed alternativa k embed ano <embed>

Formuláře

HTML dokáže na stránce vykreslit formuláře. Na zpracování vyplněných dat ale HTML žádný nástroj nemá, musejí se použít serverové skripty.

tag Význam Párový Výskyt
form formulář ano  
input vstupní pole ne <form>
select výběrové pole ano <form>
option volba ne <select>, <datalist>
textarea velké vstupní pole ano <form>
label popis pole ano <form>
fieldset skupina polí ano <form>
optgroup skupina voleb ano <select>
legend popis pole ano <fieldset>
button tlačítko ano <form>
datalist data našeptávače ano  

Hlavička

HTML hlavička (tag <head>) obsahuje tagy, jejichž obsah se na stránce nezobrazí, ale jsou důležité.

tag Význam Párový Výskyt
title titulek stránky ano <head>
base základ odkazů ne <head>
link nezobrazovaný odkaz ano <head>
meta informace o dokumentu ne <head>

Skripty a styly

Skripty myslím zejm. javascript, který umožňuje ve stránkách provádět jednoduché programy. Styly jsou CSS styly, klíčový jazyk pro ovlivnění vzhledu HTML dokumentů.

tag Význam Párový Výskyt
script skript, program ano kdekoliv
noscript alternativa ke skriptu ano vně skriptu
style zápis CSS stylu ano <head>
template poznámka, která se parsuje ano kdekoli

Rozšíření

Sem dávám tagy, které jsou velmi staré nebo velmi nové, takže mají neúplnou podporu.

tag Význam Párový Podpora
bgsound zvuk na pozadí ano Internet Explorer
marquee běžící text ano Internet Explorer
canvas kreslení javascriptem ano všude
svg vektorová grafika ano všude
details a summary skrývatelná oblast ano zatím jen Webkit

Obecné atributy

Atributy použitelné u skoro každého HTML tagu.

Atribut Význam Platnost pro
class třída pro CSS selekci všechny HTML prvky
id identifikátor pro CSS a skripty všechny HTML prvky
style zápis CSS stylu zobrazované prvky
title titulek prvku, doplňující info v bublině všechny HTML prvky
lang jazyk prvku všechny HTML prvky
name jméno pro spolupráci s dalšími prvky různá použitelnost
accesskey funkční klávesa odkazy a formulářová pole
tabindex pořadí aktivizace tabulátorem odkazy a formulářová pole
události uživatelské události spouštějící skripty zobrazované prvky

O HTML

HTML znamená Hypertext Markup Language, tedy hypertextový značkovací jazyk. Hypertext markup language se vyvinul ze SGML a stal se používaným jazykem pro tvorbu webových stránek. V historii se nejvíce používaly verze HTML 2.0, HTML 3.2, HTML 4.01 a HTML 5. Z HTML se vyvinulo také XHTML (extended hypertext markup language) jako aplikace XML. XHTML osobně považuji za slepou větev (vývoj mi dal za pravdu). V roce 2010 se začalo mluvit o používání HTML 5 a větší část jeho novinek už se v roce 2021 používá.

Normálnímu člověku i pokročilému programátorovi stačí k životu používat nějakou směs oblíbených HTML tagů, které jsou všemi moderními prohlížeči podporovány, bez ohledu na to, do které verze patří.

Prosím o odkaz

Přidejte, prosím, na své stránky odkaz

<a href="https://www.jakpsatweb.cz/html/">HTML příručka</a>

nebo ikonku:

HTML příručka<a href="https://www.jakpsatweb.cz/html/"><img src="https://www.jakpsatweb.cz/images/jpw_html.gif" border="0" alt="ikona HTML příručky"></a>

Další ikonky. Díky!

Tak to bychom měli. Možná budou někde chyby, dělal jsem to narychlo. I tak jsem na tom nechal šest dnů. Dokončeno 1. června 2001. Stále průběžně aktualizováno, takže těch dnů už byly desítky.

 

Reklama

www.webhosting-c4.cz, extra rychlý SSD webhosting s doménou v ceně
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.