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:
(Všechny patří do těla stránky = mezi tagy <body>
a </body>
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 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).
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">
http://
adasek.cz
označující server kde se daný zdroj (resource) nachází/js/doku.php
?id=krouzek:html&do=edit
- za otazníkem, oddělené ampersanty, vždy dvojice klíč=hodnota/
/linux/
v kontextu stránky na adasek.cz vás vezme na adasek.cz/linux/obrazek.jpg
na stránce https://adasek.cz/js/doku.php?id=krouzek:html
vás vezme na https://adasek.cz/js/obrazek.jpg
file://
) - bere soubor ve stejném adresáři..
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 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>
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í.