krouzek:html [Kroužek Javascriptu]

Vygeneruj lekci věnující se HTML sémantice. Popiš základní vlastnosti, strukturu a atributy nadpisů, odstavců, seznamů, obrázků, tabulek.

(upraveno, rozšířeno)

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

(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 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?

Podobné „cestě k souboru“ (file path) v počítači
Absolutní s uvedením serveru
1. začíná specifikací protokolu, například http://
2. následuje doménové jméno adasek.cz označující server kde se daný zdroj (resource) nachází
3. cesta v rámci serveru /js/doku.php
4. a případně parametry ?id=krouzek:html&do=edit - za otazníkem, oddělené ampersanty, vždy dvojice klíč=hodnota
Absolutní na daném serveru
- začíná znakem /
- Kontext: URL na které se nacházíme - předpokládá se stejný server
- Například URL: /linux/ v kontextu stránky na adasek.cz vás vezme na adasek.cz/linux/
Relativní
- Kontext: URL na které se nacházíme - předpokládá se stejný server a stejný začátek cesty v rámci serveru
- Například URL: obrazek.jpg na stránce https://adasek.cz/js/doku.php?id=krouzek:html vás vezme na https://adasek.cz/js/obrazek.jpg
- Lze použít i při zobrazení html stránky bez serveru (protokolem file://) - bere soubor ve stejném adresáři
- Specialita: .. vás vezme o adresář výš, například https://adasek.cz/a/b/c/d/../../x se normalizuje na https://adasek.cz/a/b/x

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

Co říká ChatGPT

Co je HTML Sémantika?

Základní Sémantické Značky