Toto je starší verze dokumentu!
Vygeneruj lekci věnující se HTML sémantice. Popiš základní vlastnosti, strukturu a atributy nadpisů, odstavců, seznamů, obrázků, tabulek.
Co říká ChatGPT
HTML Sémantika
Co je HTML Sémantika?
HTML sémantika je způsob, jakým v HTML označujeme různé části našeho dokumentu tak, aby bylo jasné, co daný obsah znamená. Správné používání sémantických značek má několik výhod:
- Lepší dostupnost: Pomáhá lidem s handicapem nebo asistenčním technologiím, aby lépe chápali obsah.
- Lepší SEO: Vyhledávače mohou snáze interpretovat strukturu a význam obsahu.
- Lepší čitelnost kódu: Kód bude pro lidi snáze čitelný a udržovatelný.
Základní Sémantické Značky
Nadpisy
Nadpisy (header) slouží k definování nadpisů a titulků stránky. HTML nabízí značky `<h1>`, `<h2>`, `<h3>`, `<h4>`, `<h5>`, a `<h6>`.
Odstavce
Odstavce se definují pomocí značky `<p>`. Používáme je k formátování textu a oddělení různých bloků textu.
Seznamy
Seznamy mohou být buď nečíslované (označené bullety) nebo číslované. Pro nečíslované seznamy použijeme `<ul>` (unordered list), pro číslované seznamy `<ol>` (ordered list). Každá položka seznamu se definuje značkou `<li>` (list item).
Nečíslovaný seznam
Číslovaný seznam
Obrázky
Obrázky se vkládají pomocí značky `<img>`. Důležité je nastavit atributy `src` (URL obrázku) a `alt` (alternativní text pro obrázek, pro dostupnost).
<img src="obrazek.jpg" alt="Krásný obrázek">
Tabulky
Tabulky jsou strukturovaným způsobem zobrazení dat. Používáme značku `<table>` pro vytvoření tabulky. Tabulka obsahuje řádky (`<tr>`) a buňky (`<td>` pro běžné buňky nebo `<th>` pro hlavičky tabulky).
<table> <tr> <th>Jméno</th> <th>Věk</th> </tr> <tr> <td>Jan</td> <td>25</td> </tr> </table>
Závěr
HTML sémantika hraje klíčovou roli ve vytváření kvalitního a správně strukturovaného webu. Správné používání sémantických značek umožňuje lepší dostupnost, čitelnost a SEO vašich stránek. Je důležité seznámit se s těmito základními značkami a používat je v souladu s významem, který mají.