Struktura HTML elementů
Created by Petr Voborník
Schéma HTML elementů s jejich vysvětlením a návazností zanořování do sebe
#html, #programování

<samp>
ukázkový výstup z PC programu
<code>
část kódu
<sup>
horní index
<s>
přeškrtnuté (text který již není platný)
<sub>
dolní index
<del>
přeskrtnuté (text při korekci určený pro smazání)
styl písma
<em>
kurzíva (dříve <i>)
<small>
menší písmo
<!DOCTYPE html>
<ins>
podtržení (text při korekci určený pro přidání)
<mark>
zvýrazněná část textu (defaultně podbarvená)
<strong>
tučné (dříve <b>)
<cite>
citace (její zdroj)
<abbr>
zkratka nebo akronym (lze skrytě doplnit její význam)
<source />
- odkaz na video
- může jich být více s různými formáty
<!- - -->
komentář
řez písma
<br />
zalomení řádku v odstavci
<q>
citace (její text)
<var>
označení proměnných v textu (např. u matematické úlohy)
<a>
- odkaz (hyperlink)
- nebo záložka pozice v dokumentu, na kterou se lze odkazovat
<video>
přehrávání vlastního video souboru
<track />
definice zvukové stopy videa, je-li jich více
<ruby>
- označení zápisu výslovnosti cizího slova
- obrázkové znaky (čínština, japonština...)
vložený obsah
<audio>
přehrávání audio souboru
Zdroje
<html>
informativní označení
<span>
- vyznačení části odstavce (např. slova)
- lze mu pak určit styl (např. barvu textu)
text
<dfn>
slovo, které bude vysvětleno ve slovníku, obsahu či rejstříku
<kbd>
klávesová zkratka
<cavas>
- kreslící plocha
- kreslení na ni zajišťuje JavaScript
<bdo>
umožňuje změnit pořadí (směr) textu
<img />
obrázek
<map>
- mapa oblastí (area) k obrázku
<iframe>
zobrazení obsahu jiné stránky zadané URL adresy
<object>
- objekt obsahu různého typu (obrázek, video, podstránka, zvuk...)
- obvykle lez definovat vlastním elementem
- určí se rozměry (width a height) a zdroj (data)
- chování určuje druh zdroje
<head>
- neviditelná část dokumentu
- obsahuje informace o stránce, jak se má zobrazit (např. kódování, autora, název stránky...)
- připojení dalších souborů (styly, skripty)
<body>
viditelná část stránky
<area />
vymezení oblasti v obrázku a odkazu, kam kliknutí na ni vede
<fieldset>
skupina formulářových prvků
<legend>
nadpis skupiny
<param />
umožňuje dodateční individuální nastavení parametrů zdroje
<label>
- popisek formulářového prvku
- kliknutím na něj funguje jako kliknutí na prvek
- prvek je buď zapsán pod label, nebo se label na něj odkazuje atributem for
<meta />
metainformace o stránce
<title>
název stránky
<link />
připojování dalších souborů (styly, JavaScript)
<style />
definice stylů zapsaná jako součást stránky
<script>
výkonný kód v JavaScriptu
<form>
<p>
odstavec textu (paragraf)
blokové prvky
<address>
poštovní adresa
<caption>
nadpis tabulky
<table>
<optgroup>
- skupina položek výběru
- pouze vizuální členění (sama vybrat nelze)
<input />
- základní formulářový prvek
- jeho druh určuje atribut type
Typy inputu:
- text
- password
- checkbox
- radio
- file
- date
- time
- datetime(-local)
- color
- number
- email
- search
- tel
- url
- month
- week
- range
<select>
- výběr z otevírací nabídky
- s atributem multiple je zobrazeno jako stále otevřený seznam položek a lze jich vybrat i více
<header>
- záhlaví stránky
- často se opakuje i na všech podstránkách
- banner, název, hlavní nadpis...
<thead>
záhlaví tabulky (obvykle první řádek)
<tbody>
tělo tabulky se samotnými daty
<tfoot>
zápatí tabulky (např. sumy sloupců)
<colorgroup>
umožňuje definovat styly (barvy) pro celé jednotlivé sloupce
<textarea>
dlouhý, víceřádkový text
<div>
základní blok v HTML
defaultně neviditelný
- spojení jeho podprvků dohromady
<pre>
- zobrazí tex jak je zapsán
- včetně zalomení řádků a mezer
- např. pro zobrazení kódu
<option>
položka výběru
<nav>
- navigace, menu s odkazy na další stránky
- opakuje se na všech stránkách
- zvýraznění aktuální stránky
<col />
definice stylu (atribut style) daného sloupce
<button>
- tlačítko
- obvykle spouští JS kód
Typy tlačítek
- submit - odešle formulář
- reset - vyprázdní formulář
- button - spustí JS
<tr>
řádek tabulky (table row)
struktura dokumentu
- sekce v dokumentu
- obvyklé a dodatečné (section)
- napomáhají správnému rozvržení dokumentu i jeho zpracování prohlížeči a vyhledávači
- některé se do sebe mohou zanořovat
seznamy
<main>
- hlavní část (sekce) dokumentu
- na každé stránce jiná
<th>
- buňka záhlaví tabulky (table head)
- jiné zvýraznění
- může být i mimo <thead> (např. v prvním sloupci)
<td>
- obsahová buňka tabulky (table data)
<section>
- další volitelné, ucelené sekce dokumentu
<ul>
bodový seznam
<ol>
číslovaný seznam
<dl>
seznam bodů s vysvětlivkami
<article>
- část dokumentu, která dává smysl sama o sobě
<li>
položka seznamu
<dt>
položka první úrovně
<dd>
položka vysvětlující <dt> nad ní
<h1> - <h6>
- nadpisy různých úrovní
- úrovně by se neměly přeskakovat (např. <h4> bude pod <h3> nikoli pod <h2>)
- základem pro obsah dokumentu
- <h1> na stránce max. 1x
- SEO
Speciální znaky
"
" (uvozovky)
<aside>
- postranní panel s dalšími dodatečnými informacemi či souvisejícími odkazy
pevná mezera
&
& (amprsand)
<
<
>
>
<footer>
- zápatí dokumentu
- odkazy na hlavní a "nezbytné" stránky
- kontakty, prohlášení o soukromí, GDPR, autor stránek...
- opakuje se na všech stránkách