Obsah

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

(upraveno, rozšířeno)

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:

  1. Lepší dostupnost: Pomáhá lidem s handicapem nebo asistenčním technologiím, aby lépe chápali obsah.
  2. Lepší SEO: Vyhledávače mohou snáze interpretovat strukturu a význam obsahu.
  3. Lepší čitelnost kódu: Kód bude pro lidi snáze čitelný a udržovatelný.

Základní Sémantické Značky

(Všechny patří do těla stránky = mezi tagy <body> a </body>

Nadpisy

Nadpisy (header) slouží k definování nadpisů a titulků stránky. HTML nabízí značky <h1>, <h2>, <h3>, <h4>, <h5>, a <h6>. Jsou párové - ke každému otevíracímu tagu patří i zavírací s lomítkem.

<h1>Největší nadpis</h1>
<h2>Podnadpis</h2>

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. Jsou párové.

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Maecenas libero. Nullam rhoncus aliquam metus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Curabitur bibendum justo non orci. Vestibulum fermentum tortor id mi. Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>

Takovémuhle výplňkovému (dummy) textu se říká Lorem Ipsum a lze jej snadno vygenerovat na stránce lipsum.com.

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

<ul>
  <li>První položka</li>
  <li>Druhá položka</li>
</ul>

Číslovaný seznam

<ol>
  <li>První položka</li>
  <li>Druhá položka</li>
</ol>

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 přístupnost).

<img src="obrazek.jpg" alt="Krásný obrázek">
Co je URL?

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