{"id":11969,"date":"2026-10-28T20:04:26","date_gmt":"2026-10-28T17:04:26","guid":{"rendered":"https:\/\/webmister.pro\/html-5-2\/"},"modified":"2026-10-28T20:34:13","modified_gmt":"2026-10-28T17:34:13","slug":"html-5","status":"publish","type":"post","link":"https:\/\/webmister.pro\/cz\/html-5\/","title":{"rendered":"Tagy HTML5: p\u0159\u00edru\u010dka s p\u0159\u00edklady"},"content":{"rendered":"<p>HTML tagy nejsou seznam k memorov\u00e1n\u00ed, ale n\u00e1stroj pro ozna\u010den\u00ed v\u00fdznamu. Prohl\u00ed\u017ee\u010d, vyhled\u00e1vac\u00ed robot i \u010dte\u010dka obrazovky \u010dtou tut\u00e9\u017e str\u00e1nku jinak a jedin\u00e9, o co se v\u0161ichni op\u00edraj\u00ed, jsou zvolen\u00e9 tagy. N\u00ed\u017ee najdete v\u0161echny aktu\u00e1ln\u00ed tagy HTML5: co ka\u017ed\u00fd znamen\u00e1, kdy se hod\u00ed, kter\u00fd tag nahradil zastaral\u00fd a jak\u00e9 chyby se v k\u00f3du objevuj\u00ed nej\u010dast\u011bji.<\/p>\n<nav class=\"wppub-toc\" aria-label=\"Table of contents\">\n<p class=\"wppub-toc__title\">Table of contents<\/p>\n<ul class=\"wppub-toc__list\">\n<li class=\"wppub-toc__item\"><a class=\"wppub-toc__link\" href=\"#jak-je-html-dokument-postaveny\">Jak je HTML dokument postaven\u00fd<\/a>\n<ul class=\"wppub-toc__list wppub-toc__list--sub\">\n<li class=\"wppub-toc__item wppub-toc__item--sub\"><a class=\"wppub-toc__link\" href=\"#blokove-a-radkove-prvky\">Blokov\u00e9 a \u0159\u00e1dkov\u00e9 prvky<\/a><\/li>\n<\/ul>\n<\/li>\n<li class=\"wppub-toc__item\"><a class=\"wppub-toc__link\" href=\"#semanticka-struktura-stranky\">S\u00e9mantick\u00e1 struktura str\u00e1nky<\/a><\/li>\n<li class=\"wppub-toc__item\"><a class=\"wppub-toc__link\" href=\"#text-nadpisy-odstavce-a-zvyrazneni\">Text: nadpisy, odstavce a zv\u00fdrazn\u011bn\u00ed<\/a><\/li>\n<li class=\"wppub-toc__item\"><a class=\"wppub-toc__link\" href=\"#seznamy\">Seznamy<\/a><\/li>\n<li class=\"wppub-toc__item\"><a class=\"wppub-toc__link\" href=\"#odkazy-a-navigace\">Odkazy a navigace<\/a><\/li>\n<li class=\"wppub-toc__item\"><a class=\"wppub-toc__link\" href=\"#obrazky-video-a-zvuk\">Obr\u00e1zky, video a zvuk<\/a><\/li>\n<li class=\"wppub-toc__item\"><a class=\"wppub-toc__link\" href=\"#tabulky\">Tabulky<\/a><\/li>\n<li class=\"wppub-toc__item\"><a class=\"wppub-toc__link\" href=\"#formulare-a-vstupni-pole\">Formul\u00e1\u0159e a vstupn\u00ed pole<\/a><\/li>\n<li class=\"wppub-toc__item\"><a class=\"wppub-toc__link\" href=\"#interaktivni-prvky-bez-javascriptu\">Interaktivn\u00ed prvky bez JavaScriptu<\/a><\/li>\n<li class=\"wppub-toc__item\"><a class=\"wppub-toc__link\" href=\"#servisni-tagy-v\">Servisn\u00ed tagy v &lt;head&gt;<\/a><\/li>\n<li class=\"wppub-toc__item\"><a class=\"wppub-toc__link\" href=\"#zastarale-tagy-a-cim-je-nahradit\">Zastaral\u00e9 tagy a \u010d\u00edm je nahradit<\/a><\/li>\n<li class=\"wppub-toc__item\"><a class=\"wppub-toc__link\" href=\"#caste-chyby-v-kodu\">\u010cast\u00e9 chyby v k\u00f3du<\/a><\/li>\n<li class=\"wppub-toc__item\"><a class=\"wppub-toc__link\" href=\"#jak-kod-zkontrolovat\">Jak k\u00f3d zkontrolovat<\/a><\/li>\n<li class=\"wppub-toc__item\"><a class=\"wppub-toc__link\" href=\"#strucne-to-hlavni\">Stru\u010dn\u011b to hlavn\u00ed<\/a><\/li>\n<\/ul>\n<\/nav>\n<h2 id=\"jak-je-html-dokument-postaveny\">Jak je HTML dokument postaven\u00fd<\/h2>\n<p>Ka\u017ed\u00e1 str\u00e1nka je strom. Strom m\u00e1 jeden ko\u0159en <code>&lt;html&gt;<\/code> a dv\u011b v\u011btve: <code>&lt;head&gt;<\/code> se servisn\u00edmi \u00fadaji a <code>&lt;body&gt;<\/code> s t\u00edm, co vid\u00ed n\u00e1v\u0161t\u011bvn\u00edk. V\u0161echno ostatn\u00ed se vno\u0159uje do t\u011bchto dvou v\u011btv\u00ed a pr\u00e1v\u011b vno\u0159en\u00ed ur\u010duje, jak prohl\u00ed\u017ee\u010d postav\u00ed DOM a na co CSS pou\u017eije styly.<\/p>\n<p>Minim\u00e1ln\u00ed korektn\u00ed dokument HTML5 vypad\u00e1 takto:<\/p>\n<pre><code>&lt;!DOCTYPE html&gt;\n&lt;html lang=\"cs\"&gt;\n&lt;head&gt;\n    &lt;meta charset=\"UTF-8\"&gt;\n    &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1\"&gt;\n    &lt;title&gt;N\u00e1zev str\u00e1nky&lt;\/title&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n    &lt;h1&gt;Ahoj&lt;\/h1&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n<p>\u010cty\u0159i \u0159\u00e1dky z toho je t\u0159eba pochopit. <code>&lt;!DOCTYPE html&gt;<\/code> p\u0159ep\u00edn\u00e1 prohl\u00ed\u017ee\u010d do standardn\u00edho re\u017eimu \u2014 bez n\u011bj se zapne re\u017eim kompatibility s dvacet let star\u00fdmi dokumenty a v\u00fdpo\u010det rozm\u011br\u016f blok\u016f se zm\u011bn\u00ed. Atribut <code>lang<\/code> sd\u011bluje vyhled\u00e1va\u010di a hlasov\u00e9 synt\u00e9ze jazyk textu. <code>&lt;meta charset=\"UTF-8\"&gt;<\/code> mus\u00ed b\u00fdt v prvn\u00edch 1024 bajtech dokumentu, jinak se diakritika zm\u011bn\u00ed v otazn\u00edky. <code>&lt;meta name=\"viewport\"&gt;<\/code> zaji\u0161\u0165uje, \u017ee se na telefonu str\u00e1nka nezobraz\u00ed jako \u201ecel\u00e1 \u0161\u00ed\u0159ka desktopu drobn\u00fdm p\u00edsmem\u201c.<\/p>\n<figure><svg viewbox=\"0 0 900 446\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" role=\"img\" aria-label=\"\u0414\u0435\u0440\u0435\u0432\u043e HTML-\u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430: \u043a\u043e\u0440\u0435\u043d\u044c html, \u0432\u0435\u0442\u0432\u0438 head \u0438 body \u0441 \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u043c\u0438 \u0442\u0435\u0433\u0430\u043c\u0438\" style=\"width:100%;height:auto;max-width:900px;display:block;margin:0 auto 20px\"><rect fill=\"#1B2B33\" stroke=\"#30738E\" stroke-width=\"1.5\" x=\"350\" y=\"14\" width=\"200\" height=\"46\" rx=\"2\"><\/rect><text fill=\"#EEEEEE\" font-weight=\"300\" font-size=\"17px\" font-family=\"Roboto, Arial, sans-serif\" x=\"450\" y=\"36\" text-anchor=\"middle\">&lt;html lang=\"ru\"&gt;<\/text><text fill=\"#848484\" font-weight=\"300\" font-size=\"13px\" font-family=\"Roboto, Arial, sans-serif\" x=\"450\" y=\"52\" text-anchor=\"middle\">ko\u0159en dokumentu<\/text><path stroke=\"#4A4A4A\" stroke-width=\"1.5\" fill=\"none\" d=\"M450 60 L450 86 M230 86 L670 86 M230 86 L230 110 M670 86 L670 110\"><\/path><rect fill=\"#15202A\" stroke=\"#30738E\" stroke-width=\"1\" x=\"130\" y=\"110\" width=\"200\" height=\"44\" rx=\"2\"><\/rect><text fill=\"#EEEEEE\" font-weight=\"300\" font-size=\"17px\" font-family=\"Roboto, Arial, sans-serif\" x=\"230\" y=\"131\" text-anchor=\"middle\">&lt;head&gt;<\/text><text fill=\"#848484\" font-weight=\"300\" font-size=\"13px\" font-family=\"Roboto, Arial, sans-serif\" x=\"230\" y=\"147\" text-anchor=\"middle\">servisn\u00ed \u00fadaje<\/text><rect fill=\"#15202A\" stroke=\"#30738E\" stroke-width=\"1\" x=\"570\" y=\"110\" width=\"200\" height=\"44\" rx=\"2\"><\/rect><text fill=\"#EEEEEE\" font-weight=\"300\" font-size=\"17px\" font-family=\"Roboto, Arial, sans-serif\" x=\"670\" y=\"131\" text-anchor=\"middle\">&lt;body&gt;<\/text><text fill=\"#848484\" font-weight=\"300\" font-size=\"13px\" font-family=\"Roboto, Arial, sans-serif\" x=\"670\" y=\"147\" text-anchor=\"middle\">viditeln\u00fd obsah<\/text><path stroke=\"#4A4A4A\" stroke-width=\"1.5\" fill=\"none\" d=\"M160 154 L160 384 M160 182 L200 182 M160 232 L200 232 M160 282 L200 282 M160 332 L200 332 M160 382 L200 382\"><\/path><rect fill=\"#16181B\" stroke=\"#3B3B3B\" stroke-width=\"1\" x=\"200\" y=\"164\" width=\"180\" height=\"36\" rx=\"2\"><\/rect><text fill=\"#EEEEEE\" font-weight=\"300\" font-size=\"17px\" font-family=\"Roboto, Arial, sans-serif\" x=\"214\" y=\"187\">&lt;meta charset&gt;<\/text><rect fill=\"#16181B\" stroke=\"#3B3B3B\" stroke-width=\"1\" x=\"200\" y=\"214\" width=\"180\" height=\"36\" rx=\"2\"><\/rect><text fill=\"#EEEEEE\" font-weight=\"300\" font-size=\"17px\" font-family=\"Roboto, Arial, sans-serif\" x=\"214\" y=\"237\">&lt;meta viewport&gt;<\/text><rect fill=\"#16181B\" stroke=\"#3B3B3B\" stroke-width=\"1\" x=\"200\" y=\"264\" width=\"180\" height=\"36\" rx=\"2\"><\/rect><text fill=\"#EEEEEE\" font-weight=\"300\" font-size=\"17px\" font-family=\"Roboto, Arial, sans-serif\" x=\"214\" y=\"287\">&lt;title&gt;<\/text><rect fill=\"#16181B\" stroke=\"#3B3B3B\" stroke-width=\"1\" x=\"200\" y=\"314\" width=\"180\" height=\"36\" rx=\"2\"><\/rect><text fill=\"#EEEEEE\" font-weight=\"300\" font-size=\"17px\" font-family=\"Roboto, Arial, sans-serif\" x=\"214\" y=\"337\">&lt;link rel&gt;<\/text><rect fill=\"#16181B\" stroke=\"#3B3B3B\" stroke-width=\"1\" x=\"200\" y=\"364\" width=\"180\" height=\"36\" rx=\"2\"><\/rect><text fill=\"#EEEEEE\" font-weight=\"300\" font-size=\"17px\" font-family=\"Roboto, Arial, sans-serif\" x=\"214\" y=\"387\">&lt;script&gt;<\/text><path stroke=\"#4A4A4A\" stroke-width=\"1.5\" fill=\"none\" d=\"M600 154 L600 334 M600 182 L640 182 M600 232 L640 232 M600 282 L640 282 M600 332 L640 332\"><\/path><rect fill=\"#16181B\" stroke=\"#3B3B3B\" stroke-width=\"1\" x=\"640\" y=\"164\" width=\"180\" height=\"36\" rx=\"2\"><\/rect><text fill=\"#EEEEEE\" font-weight=\"300\" font-size=\"17px\" font-family=\"Roboto, Arial, sans-serif\" x=\"654\" y=\"187\">&lt;header&gt;<\/text><rect fill=\"#16181B\" stroke=\"#3B3B3B\" stroke-width=\"1\" x=\"640\" y=\"214\" width=\"180\" height=\"36\" rx=\"2\"><\/rect><text fill=\"#EEEEEE\" font-weight=\"300\" font-size=\"17px\" font-family=\"Roboto, Arial, sans-serif\" x=\"654\" y=\"237\">&lt;main&gt;<\/text><rect fill=\"#16181B\" stroke=\"#3B3B3B\" stroke-width=\"1\" x=\"640\" y=\"264\" width=\"180\" height=\"36\" rx=\"2\"><\/rect><text fill=\"#EEEEEE\" font-weight=\"300\" font-size=\"17px\" font-family=\"Roboto, Arial, sans-serif\" x=\"654\" y=\"287\">&lt;aside&gt;<\/text><rect fill=\"#16181B\" stroke=\"#3B3B3B\" stroke-width=\"1\" x=\"640\" y=\"314\" width=\"180\" height=\"36\" rx=\"2\"><\/rect><text fill=\"#EEEEEE\" font-weight=\"300\" font-size=\"17px\" font-family=\"Roboto, Arial, sans-serif\" x=\"654\" y=\"337\">&lt;footer&gt;<\/text><text fill=\"#848484\" font-weight=\"300\" font-size=\"13px\" font-family=\"Roboto, Arial, sans-serif\" x=\"450\" y=\"430\" text-anchor=\"middle\">Vno\u0159en\u00ed tag\u016f je struktura DOM: prohl\u00ed\u017ee\u010d stav\u00ed strom p\u0159esn\u011b podle n\u00ed<\/text><\/svg><figcaption>Strom HTML dokumentu: jeden ko\u0159en a dv\u011b v\u011btve \u2014 servisn\u00ed a viditeln\u00e1<\/figcaption><\/figure>\n<h3 id=\"blokove-a-radkove-prvky\">Blokov\u00e9 a \u0159\u00e1dkov\u00e9 prvky<\/h3>\n<p>Historicky se tagy d\u011blily na blokov\u00e9 (<code>div<\/code>, <code>p<\/code>, <code>section<\/code>) a \u0159\u00e1dkov\u00e9 (<code>span<\/code>, <code>a<\/code>, <code>strong<\/code>). Specifikace HTML5 toto d\u011blen\u00ed nahradila kategoriemi obsahu, v praxi v\u0161ak rozd\u00edl z\u016fstal: blokov\u00fd prvek zab\u00edr\u00e1 celou dostupnou \u0161\u00ed\u0159ku a za\u010d\u00edn\u00e1 na nov\u00e9m \u0159\u00e1dku, \u0159\u00e1dkov\u00fd plyne uvnit\u0159 textu. Plat\u00ed pravidlo vno\u0159en\u00ed: \u0159\u00e1dkov\u00fd prvek nesm\u00ed obsahovat blokov\u00fd. Jedinou v\u00fdjimkou je <code>&lt;a&gt;<\/code>, kter\u00e9mu HTML5 dovolilo obalit cel\u00e9 bloky \u2014 hod\u00ed se, kdy\u017e m\u00e1 b\u00fdt odkazem cel\u00e1 karta produktu.<\/p>\n<h2 id=\"semanticka-struktura-stranky\">S\u00e9mantick\u00e1 struktura str\u00e1nky<\/h2>\n<p>P\u0159ed HTML5 se typick\u00e1 str\u00e1nka skl\u00e1dala z do sebe vno\u0159en\u00fdch <code>&lt;div&gt;<\/code> s t\u0159\u00eddami <code>header<\/code>, <code>menu<\/code>, <code>content<\/code>, <code>sidebar<\/code>. Stroj nev\u011bd\u011bl, co tyto t\u0159\u00eddy znamenaj\u00ed \u2014 byly to pro n\u011bj stejn\u00e9 bezejmenn\u00e9 krabice. S\u00e9mantick\u00e9 tagy daly ka\u017ed\u00e9 \u010d\u00e1sti str\u00e1nky vlastn\u00ed jm\u00e9no.<\/p>\n<div class=\"wm-table-scroll wm-table-cards\" tabindex=\"0\" role=\"region\" aria-label=\"Table, scrolls horizontally\">\n<table>\n<thead>\n<tr>\n<th>Tag<\/th>\n<th>Co ozna\u010duje<\/th>\n<th>Kolikr\u00e1t na str\u00e1nce<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td data-label=\"Tag\"><code>&lt;header&gt;<\/code><\/td>\n<td data-label=\"Co ozna\u010duje\">Hlavi\u010dka str\u00e1nky nebo \u00favodn\u00ed \u010d\u00e1st sekce: logo, nadpis, hled\u00e1n\u00ed<\/td>\n<td data-label=\"Kolikr\u00e1t na str\u00e1nce\">Kolikr\u00e1t chcete \u2014 vlastn\u00ed pro str\u00e1nku i pro ka\u017ed\u00fd \u010dl\u00e1nek<\/td>\n<\/tr>\n<tr>\n<td data-label=\"Tag\"><code>&lt;nav&gt;<\/code><\/td>\n<td data-label=\"Co ozna\u010duje\">Blok navigace: hlavn\u00ed menu, drobe\u010dky, str\u00e1nkov\u00e1n\u00ed<\/td>\n<td data-label=\"Kolikr\u00e1t na str\u00e1nce\">N\u011bkolikr\u00e1t, ale jen pro v\u00fdznamn\u00e9 skupiny odkaz\u016f<\/td>\n<\/tr>\n<tr>\n<td data-label=\"Tag\"><code>&lt;main&gt;<\/code><\/td>\n<td data-label=\"Co ozna\u010duje\">Hlavn\u00ed obsah str\u00e1nky, pro ni jedine\u010dn\u00fd<\/td>\n<td data-label=\"Kolikr\u00e1t na str\u00e1nce\">Pr\u00e1v\u011b jednou<\/td>\n<\/tr>\n<tr>\n<td data-label=\"Tag\"><code>&lt;article&gt;<\/code><\/td>\n<td data-label=\"Co ozna\u010duje\">Samostatn\u00e1 jednotka: \u010dl\u00e1nek, karta produktu, koment\u00e1\u0159<\/td>\n<td data-label=\"Kolikr\u00e1t na str\u00e1nce\">Kolikr\u00e1t chcete<\/td>\n<\/tr>\n<tr>\n<td data-label=\"Tag\"><code>&lt;section&gt;<\/code><\/td>\n<td data-label=\"Co ozna\u010duje\">Tematick\u00e1 \u010d\u00e1st s vlastn\u00edm nadpisem<\/td>\n<td data-label=\"Kolikr\u00e1t na str\u00e1nce\">Kolikr\u00e1t chcete<\/td>\n<\/tr>\n<tr>\n<td data-label=\"Tag\"><code>&lt;aside&gt;<\/code><\/td>\n<td data-label=\"Co ozna\u010duje\">Vedlej\u0161\u00ed obsah: postrann\u00ed panel, pozn\u00e1mka, blok \u201ep\u0159e\u010dt\u011bte si tak\u00e9\u201c<\/td>\n<td data-label=\"Kolikr\u00e1t na str\u00e1nce\">Kolikr\u00e1t chcete<\/td>\n<\/tr>\n<tr>\n<td data-label=\"Tag\"><code>&lt;footer&gt;<\/code><\/td>\n<td data-label=\"Co ozna\u010duje\">Pati\u010dka str\u00e1nky nebo z\u00e1v\u011br sekce: copyright, autor, datum<\/td>\n<td data-label=\"Kolikr\u00e1t na str\u00e1nce\">Kolikr\u00e1t chcete<\/td>\n<\/tr>\n<tr>\n<td data-label=\"Tag\"><code>&lt;div&gt;<\/code><\/td>\n<td data-label=\"Co ozna\u010duje\">Blok bez vlastn\u00edho v\u00fdznamu \u2014 jen pro sazbu a seskupen\u00ed<\/td>\n<td data-label=\"Kolikr\u00e1t na str\u00e1nce\">Kdy\u017e se nehod\u00ed \u017e\u00e1dn\u00fd s\u00e9mantick\u00fd tag<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<p>Rozd\u00edl mezi <code>&lt;article&gt;<\/code> a <code>&lt;section&gt;<\/code> mate nej\u010dast\u011bji. Zkou\u0161ka je prost\u00e1: pokud lze \u00faryvek vyjmout ze str\u00e1nky, zve\u0159ejnit samostatn\u011b a neztrat\u00ed smysl, jde o <code>&lt;article&gt;<\/code>. Je-li to jen obsahov\u00e1 \u010d\u00e1st n\u011b\u010deho v\u011bt\u0161\u00edho, jde o <code>&lt;section&gt;<\/code>. P\u0159\u00edsp\u011bvek na blogu je article. \u010c\u00e1st \u201eParametry\u201c uvnit\u0159 popisu produktu je section.<\/p>\n<p>Typick\u00e1 str\u00e1nka blogu se ozna\u010duje takto:<\/p>\n<pre><code>&lt;body&gt;\n  &lt;header&gt;\n    &lt;a href=\"\/\"&gt;Logo&lt;\/a&gt;\n    &lt;nav&gt;&lt;a href=\"\/blog\/\"&gt;Blog&lt;\/a&gt; &lt;a href=\"\/contacts\/\"&gt;Kontakty&lt;\/a&gt;&lt;\/nav&gt;\n  &lt;\/header&gt;\n\n  &lt;main&gt;\n    &lt;article&gt;\n      &lt;h1&gt;Nadpis \u010dl\u00e1nku&lt;\/h1&gt;\n      &lt;p&gt;Text \u010dl\u00e1nku\u2026&lt;\/p&gt;\n      &lt;section&gt;\n        &lt;h2&gt;\u010c\u00e1st \u010dl\u00e1nku&lt;\/h2&gt;\n        &lt;p&gt;\u2026&lt;\/p&gt;\n      &lt;\/section&gt;\n      &lt;footer&gt;Autor, datum publikace&lt;\/footer&gt;\n    &lt;\/article&gt;\n  &lt;\/main&gt;\n\n  &lt;aside&gt;Podobn\u00e9 p\u0159\u00edsp\u011bvky&lt;\/aside&gt;\n\n  &lt;footer&gt;\u00a9 2026&lt;\/footer&gt;\n&lt;\/body&gt;<\/code><\/pre>\n<figure><svg viewbox=\"0 0 900 560\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" role=\"img\" aria-label=\"\u0421\u0445\u0435\u043c\u0430 \u0441\u0435\u043c\u0430\u043d\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0439 \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b: header \u0441 nav, main \u0441\u043e \u0441\u0442\u0430\u0442\u044c\u0451\u0439 \u0438 \u0440\u0430\u0437\u0434\u0435\u043b\u0430\u043c\u0438, aside, footer\" style=\"width:100%;height:auto;max-width:900px;display:block;margin:0 auto 20px\"><rect fill=\"#16181B\" stroke=\"#3B3B3B\" stroke-width=\"1\" x=\"20\" y=\"14\" width=\"860\" height=\"76\" rx=\"2\"><\/rect><text fill=\"#30738E\" font-weight=\"300\" font-size=\"16px\" font-family=\"Roboto, Arial, sans-serif\" x=\"36\" y=\"38\">&lt;header&gt;<\/text><text fill=\"#848484\" font-weight=\"300\" font-size=\"13px\" font-family=\"Roboto, Arial, sans-serif\" x=\"36\" y=\"56\">hlavi\u010dka webu<\/text><rect fill=\"#1B1E22\" stroke=\"#4A4A4A\" stroke-width=\"1\" x=\"430\" y=\"28\" width=\"434\" height=\"48\" rx=\"2\"><\/rect><text fill=\"#CBCBCB\" font-weight=\"300\" font-size=\"16px\" font-family=\"Roboto, Arial, sans-serif\" x=\"446\" y=\"50\">&lt;nav&gt;<\/text><rect fill=\"#2E404F\" x=\"520\" y=\"44\" width=\"70\" height=\"16\" rx=\"2\"><\/rect><rect fill=\"#2E404F\" x=\"604\" y=\"44\" width=\"90\" height=\"16\" rx=\"2\"><\/rect><rect fill=\"#2E404F\" x=\"708\" y=\"44\" width=\"60\" height=\"16\" rx=\"2\"><\/rect><rect fill=\"#2E404F\" x=\"782\" y=\"44\" width=\"66\" height=\"16\" rx=\"2\"><\/rect><rect fill=\"#15202A\" stroke=\"#30738E\" stroke-width=\"1.5\" x=\"20\" y=\"104\" width=\"600\" height=\"356\" rx=\"2\"><\/rect><text fill=\"#30738E\" font-weight=\"300\" font-size=\"16px\" font-family=\"Roboto, Arial, sans-serif\" x=\"36\" y=\"128\">&lt;main&gt;<\/text><text fill=\"#848484\" font-weight=\"300\" font-size=\"13px\" font-family=\"Roboto, Arial, sans-serif\" x=\"92\" y=\"128\">\u2014 jeden na str\u00e1nku<\/text><rect fill=\"#1B1E22\" stroke=\"#4A4A4A\" stroke-width=\"1\" x=\"36\" y=\"140\" width=\"568\" height=\"304\" rx=\"2\"><\/rect><text fill=\"#CBCBCB\" font-weight=\"300\" font-size=\"16px\" font-family=\"Roboto, Arial, sans-serif\" x=\"52\" y=\"164\">&lt;article&gt;<\/text><text fill=\"#848484\" font-weight=\"300\" font-size=\"13px\" font-family=\"Roboto, Arial, sans-serif\" x=\"128\" y=\"164\">\u2014 samostatn\u00e1 jednotka<\/text><rect fill=\"#2E404F\" x=\"52\" y=\"178\" width=\"340\" height=\"22\" rx=\"2\"><\/rect><text fill=\"#848484\" font-weight=\"300\" font-size=\"13px\" font-family=\"Roboto, Arial, sans-serif\" x=\"400\" y=\"195\">&lt;h1&gt;<\/text><rect fill=\"#1B1E22\" stroke=\"#4A4A4A\" stroke-width=\"1\" x=\"52\" y=\"214\" width=\"536\" height=\"100\" rx=\"2\"><\/rect><text fill=\"#CBCBCB\" font-weight=\"300\" font-size=\"16px\" font-family=\"Roboto, Arial, sans-serif\" x=\"68\" y=\"238\">&lt;section&gt;<\/text><rect fill=\"#2E404F\" x=\"68\" y=\"250\" width=\"220\" height=\"14\" rx=\"2\"><\/rect><rect fill=\"#2E404F\" x=\"68\" y=\"272\" width=\"504\" height=\"10\" rx=\"2\"><\/rect><rect fill=\"#2E404F\" x=\"68\" y=\"290\" width=\"440\" height=\"10\" rx=\"2\"><\/rect><rect fill=\"#1B1E22\" stroke=\"#4A4A4A\" stroke-width=\"1\" x=\"52\" y=\"326\" width=\"536\" height=\"100\" rx=\"2\"><\/rect><text fill=\"#CBCBCB\" font-weight=\"300\" font-size=\"16px\" font-family=\"Roboto, Arial, sans-serif\" x=\"68\" y=\"350\">&lt;section&gt;<\/text><rect fill=\"#2E404F\" x=\"68\" y=\"362\" width=\"260\" height=\"14\" rx=\"2\"><\/rect><rect fill=\"#2E404F\" x=\"68\" y=\"384\" width=\"504\" height=\"10\" rx=\"2\"><\/rect><rect fill=\"#2E404F\" x=\"68\" y=\"402\" width=\"470\" height=\"10\" rx=\"2\"><\/rect><rect fill=\"#16181B\" stroke=\"#3B3B3B\" stroke-width=\"1\" x=\"636\" y=\"104\" width=\"244\" height=\"356\" rx=\"2\"><\/rect><text fill=\"#30738E\" font-weight=\"300\" font-size=\"16px\" font-family=\"Roboto, Arial, sans-serif\" x=\"652\" y=\"128\">&lt;aside&gt;<\/text><text fill=\"#848484\" font-weight=\"300\" font-size=\"13px\" font-family=\"Roboto, Arial, sans-serif\" x=\"652\" y=\"146\">vedlej\u0161\u00ed obsah<\/text><rect fill=\"#2E404F\" x=\"652\" y=\"166\" width=\"212\" height=\"12\" rx=\"2\"><\/rect><rect fill=\"#2E404F\" x=\"652\" y=\"188\" width=\"180\" height=\"12\" rx=\"2\"><\/rect><rect fill=\"#2E404F\" x=\"652\" y=\"210\" width=\"196\" height=\"12\" rx=\"2\"><\/rect><rect fill=\"#1B1E22\" stroke=\"#4A4A4A\" stroke-width=\"1\" x=\"652\" y=\"244\" width=\"212\" height=\"90\" rx=\"2\"><\/rect><text fill=\"#848484\" font-weight=\"300\" font-size=\"13px\" font-family=\"Roboto, Arial, sans-serif\" x=\"668\" y=\"268\">p\u0159e\u010dt\u011bte si tak\u00e9<\/text><rect fill=\"#2E404F\" x=\"668\" y=\"282\" width=\"180\" height=\"10\" rx=\"2\"><\/rect><rect fill=\"#2E404F\" x=\"668\" y=\"300\" width=\"150\" height=\"10\" rx=\"2\"><\/rect><rect fill=\"#16181B\" stroke=\"#3B3B3B\" stroke-width=\"1\" x=\"20\" y=\"474\" width=\"860\" height=\"66\" rx=\"2\"><\/rect><text fill=\"#30738E\" font-weight=\"300\" font-size=\"16px\" font-family=\"Roboto, Arial, sans-serif\" x=\"36\" y=\"500\">&lt;footer&gt;<\/text><text fill=\"#848484\" font-weight=\"300\" font-size=\"13px\" font-family=\"Roboto, Arial, sans-serif\" x=\"36\" y=\"520\">pati\u010dka: copyright, kontakty, servisn\u00ed odkazy<\/text><\/svg><figcaption>S\u00e9mantick\u00e9 ozna\u010den\u00ed typick\u00e9 str\u00e1nky: ka\u017ed\u00e1 oblast pojmenovan\u00e1 vlastn\u00edm tagem<\/figcaption><\/figure>\n<p>P\u0159\u00ednos nen\u00ed abstraktn\u00ed. \u010cte\u010dka obrazovky umo\u017en\u00ed nevidom\u00e9mu sko\u010dit rovnou na <code>main<\/code> a vynechat menu. Re\u017eim \u010dten\u00ed v prohl\u00ed\u017ee\u010di rozpozn\u00e1 <code>article<\/code> a zobraz\u00ed jen text. Vyhled\u00e1vac\u00ed robot p\u0159esn\u011bji pozn\u00e1, kde je hlavn\u00ed obsah a kde za\u010d\u00edn\u00e1 obal opakovan\u00fd na v\u0161ech str\u00e1nk\u00e1ch.<\/p>\n<h2 id=\"text-nadpisy-odstavce-a-zvyrazneni\">Text: nadpisy, odstavce a zv\u00fdrazn\u011bn\u00ed<\/h2>\n<p>Textov\u00e9 tagy pou\u017e\u00edv\u00e1me denn\u011b \u2014 a pr\u00e1v\u011b u nich se nej\u010dast\u011bji zam\u011b\u0148uje vzhled za v\u00fdznam.<\/p>\n<div class=\"wm-table-scroll wm-table-cards\" tabindex=\"0\" role=\"region\" aria-label=\"Table, scrolls horizontally\">\n<table>\n<thead>\n<tr>\n<th>Tag<\/th>\n<th>\u00da\u010del<\/th>\n<th>Pozn\u00e1mka<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td data-label=\"Tag\"><code>&lt;h1&gt;<\/code>\u2026<code>&lt;h6&gt;<\/code><\/td>\n<td data-label=\"\u00da\u010del\">Nadpisy \u0161esti \u00farovn\u00ed<\/td>\n<td data-label=\"Pozn\u00e1mka\">Jeden <code>h1<\/code> na str\u00e1nku, \u00farovn\u011b nep\u0159eskakovat<\/td>\n<\/tr>\n<tr>\n<td data-label=\"Tag\"><code>&lt;p&gt;<\/code><\/td>\n<td data-label=\"\u00da\u010del\">Odstavec textu<\/td>\n<td data-label=\"Pozn\u00e1mka\">Nesm\u00ed obsahovat blokov\u00e9 prvky<\/td>\n<\/tr>\n<tr>\n<td data-label=\"Tag\"><code>&lt;br&gt;<\/code><\/td>\n<td data-label=\"\u00da\u010del\">Zalomen\u00ed \u0159\u00e1dku<\/td>\n<td data-label=\"Pozn\u00e1mka\">Jen uvnit\u0159 \u0159\u00e1dku \u2014 od odstup\u016f je CSS<\/td>\n<\/tr>\n<tr>\n<td data-label=\"Tag\"><code>&lt;hr&gt;<\/code><\/td>\n<td data-label=\"\u00da\u010del\">V\u00fdznamov\u00fd p\u0159ed\u011bl mezi t\u00e9maty<\/td>\n<td data-label=\"Pozn\u00e1mka\">Nen\u00ed to ozdobn\u00e1 linka, od t\u00e9 je <code>border<\/code><\/td>\n<\/tr>\n<tr>\n<td data-label=\"Tag\"><code>&lt;strong&gt;<\/code><\/td>\n<td data-label=\"\u00da\u010del\">D\u016fle\u017eitost obsahu<\/td>\n<td data-label=\"Pozn\u00e1mka\">Vypad\u00e1 jako <code>b<\/code>, ale znamen\u00e1 \u201etohle je d\u016fle\u017eit\u00e9\u201c<\/td>\n<\/tr>\n<tr>\n<td data-label=\"Tag\"><code>&lt;em&gt;<\/code><\/td>\n<td data-label=\"\u00da\u010del\">V\u00fdznamov\u00fd d\u016fraz<\/td>\n<td data-label=\"Pozn\u00e1mka\">Hlasov\u00e1 synt\u00e9za m\u011bn\u00ed intonaci<\/td>\n<\/tr>\n<tr>\n<td data-label=\"Tag\"><code>&lt;b&gt;<\/code>, <code>&lt;i&gt;<\/code><\/td>\n<td data-label=\"\u00da\u010del\">Zv\u00fdrazn\u011bn\u00ed bez v\u00fdznamov\u00e9ho obsahu<\/td>\n<td data-label=\"Pozn\u00e1mka\">Term\u00edn, jm\u00e9no lodi, ciz\u00ed slovo<\/td>\n<\/tr>\n<tr>\n<td data-label=\"Tag\"><code>&lt;mark&gt;<\/code><\/td>\n<td data-label=\"\u00da\u010del\">Zv\u00fdrazn\u011bn\u00ed relevantn\u00ed pro \u010dten\u00e1\u0159e<\/td>\n<td data-label=\"Pozn\u00e1mka\">Shoda p\u0159i hled\u00e1n\u00ed na str\u00e1nce<\/td>\n<\/tr>\n<tr>\n<td data-label=\"Tag\"><code>&lt;small&gt;<\/code><\/td>\n<td data-label=\"\u00da\u010del\">Pozn\u00e1mka drobn\u00fdm p\u00edsmem<\/td>\n<td data-label=\"Pozn\u00e1mka\">Upozorn\u011bn\u00ed, copyright<\/td>\n<\/tr>\n<tr>\n<td data-label=\"Tag\"><code>&lt;s&gt;<\/code>, <code>&lt;del&gt;<\/code>, <code>&lt;ins&gt;<\/code><\/td>\n<td data-label=\"\u00da\u010del\">Neaktu\u00e1ln\u00ed, smazan\u00e9 a vlo\u017een\u00e9<\/td>\n<td data-label=\"Pozn\u00e1mka\">Star\u00e1 cena je <code>s<\/code>, \u00fapravy dokumentu <code>del<\/code> a <code>ins<\/code><\/td>\n<\/tr>\n<tr>\n<td data-label=\"Tag\"><code>&lt;sub&gt;<\/code>, <code>&lt;sup&gt;<\/code><\/td>\n<td data-label=\"\u00da\u010del\">Doln\u00ed a horn\u00ed index<\/td>\n<td data-label=\"Pozn\u00e1mka\">Vzorce, pozn\u00e1mky pod \u010darou<\/td>\n<\/tr>\n<tr>\n<td data-label=\"Tag\"><code>&lt;abbr&gt;<\/code><\/td>\n<td data-label=\"\u00da\u010del\">Zkratka s vysv\u011btlen\u00edm v <code>title<\/code><\/td>\n<td data-label=\"Pozn\u00e1mka\">Vysv\u011btlen\u00ed se uk\u00e1\u017ee po najet\u00ed my\u0161\u00ed<\/td>\n<\/tr>\n<tr>\n<td data-label=\"Tag\"><code>&lt;time&gt;<\/code><\/td>\n<td data-label=\"\u00da\u010del\">Datum nebo \u010das ve strojov\u00e9m form\u00e1tu<\/td>\n<td data-label=\"Pozn\u00e1mka\">Atribut <code>datetime=\"2026-10-28\"<\/code><\/td>\n<\/tr>\n<tr>\n<td data-label=\"Tag\"><code>&lt;blockquote&gt;<\/code>, <code>&lt;q&gt;<\/code><\/td>\n<td data-label=\"\u00da\u010del\">Blokov\u00e1 a \u0159\u00e1dkov\u00e1 citace<\/td>\n<td data-label=\"Pozn\u00e1mka\">Zdroj pat\u0159\u00ed do atributu <code>cite<\/code><\/td>\n<\/tr>\n<tr>\n<td data-label=\"Tag\"><code>&lt;code&gt;<\/code>, <code>&lt;pre&gt;<\/code><\/td>\n<td data-label=\"\u00da\u010del\">\u00daryvek k\u00f3du a p\u0159edform\u00e1tovan\u00fd text<\/td>\n<td data-label=\"Pozn\u00e1mka\">Spole\u010dn\u011b daj\u00ed blok k\u00f3du se zachovan\u00fdm odsazen\u00edm<\/td>\n<\/tr>\n<tr>\n<td data-label=\"Tag\"><code>&lt;kbd&gt;<\/code>, <code>&lt;samp&gt;<\/code>, <code>&lt;var&gt;<\/code><\/td>\n<td data-label=\"\u00da\u010del\">Kl\u00e1vesy, v\u00fdstup programu, prom\u011bnn\u00e1<\/td>\n<td data-label=\"Pozn\u00e1mka\">Dokumentace a technick\u00e9 texty<\/td>\n<\/tr>\n<tr>\n<td data-label=\"Tag\"><code>&lt;span&gt;<\/code><\/td>\n<td data-label=\"\u00da\u010del\">\u0158\u00e1dkov\u00fd kontejner bez v\u00fdznamu<\/td>\n<td data-label=\"Pozn\u00e1mka\">Kdy\u017e pot\u0159ebujete jen \u00fachyt pro styl<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<p>Rozd\u00edl mezi <code>&lt;strong&gt;<\/code> a <code>&lt;b&gt;<\/code> je ve v\u00fdznamu, ne v \u0159ezu p\u00edsma. \u201ePozor: server se restartuje\u201c je <code>strong<\/code>, proto\u017ee v\u011bta je d\u016fle\u017eit\u00e1. N\u00e1zev produktu vys\u00e1zen\u00fd tu\u010dn\u011b podle typografick\u00e9 zvyklosti je <code>b<\/code>. Tot\u00e9\u017e plat\u00ed pro dvojici <code>&lt;em&gt;<\/code> a <code>&lt;i&gt;<\/code>: prvn\u00ed m\u011bn\u00ed smysl v\u011bty, druh\u00fd jen nakl\u00e1n\u00ed p\u00edsmo.<\/p>\n<p>U nadpis\u016f plat\u00ed pravidlo, kter\u00e9 se poru\u0161uje neust\u00e1le: \u00farovn\u011b tvo\u0159\u00ed osnovu dokumentu, ne sadu velikost\u00ed p\u00edsma. N\u00e1sleduje-li po <code>h2<\/code> rovnou <code>h4<\/code>, vznikne ve struktu\u0159e d\u00edra. Pot\u0159ebujete men\u0161\u00ed p\u00edsmo? To je \u00fakol pro CSS, ne d\u016fvod s\u00e1hnout o \u00farove\u0148 n\u00ed\u017e.<\/p>\n<h2 id=\"seznamy\">Seznamy<\/h2>\n<p>HTML m\u00e1 t\u0159i druhy seznam\u016f a ka\u017ed\u00fd \u0159e\u0161\u00ed sv\u016fj \u00fakol.<\/p>\n<pre><code>&lt;ul&gt;                        &lt;!-- odr\u00e1\u017ekov\u00fd, na po\u0159ad\u00ed nez\u00e1le\u017e\u00ed --&gt;\n  &lt;li&gt;Prvn\u00ed polo\u017eka&lt;\/li&gt;\n  &lt;li&gt;Druh\u00e1 polo\u017eka&lt;\/li&gt;\n&lt;\/ul&gt;\n\n&lt;ol start=\"3\" reversed&gt;      &lt;!-- \u010d\u00edslovan\u00fd, na po\u0159ad\u00ed z\u00e1le\u017e\u00ed --&gt;\n  &lt;li&gt;T\u0159et\u00ed v po\u0159ad\u00ed&lt;\/li&gt;\n&lt;\/ol&gt;\n\n&lt;dl&gt;                         &lt;!-- seznam definic --&gt;\n  &lt;dt&gt;HTML&lt;\/dt&gt;\n  &lt;dd&gt;Zna\u010dkovac\u00ed jazyk pro dokumenty&lt;\/dd&gt;\n  &lt;dt&gt;CSS&lt;\/dt&gt;\n  &lt;dd&gt;Jazyk pro popis vzhledu&lt;\/dd&gt;\n&lt;\/dl&gt;<\/code><\/pre>\n<p><code>&lt;ol&gt;<\/code> m\u00e1 u\u017eite\u010dn\u00e9 atributy, na kter\u00e9 se zapom\u00edn\u00e1: <code>start<\/code> ur\u010duje za\u010d\u00e1tek \u010d\u00edslov\u00e1n\u00ed, <code>reversed<\/code> je oto\u010d\u00ed, <code>type<\/code> p\u0159epne zna\u010dky na p\u00edsmena nebo \u0159\u00edmsk\u00e9 \u010d\u00edslice. Seznam definic <code>&lt;dl&gt;<\/code> se skv\u011ble hod\u00ed pro slovn\u00ed\u010dky pojm\u016f, parametry produktu a bloky \u201eot\u00e1zka \u2014 odpov\u011b\u010f\u201c: dvojice \u201epojem \u2014 popis\u201c \u010dte stroj jako spojen\u00e9, na rozd\u00edl od dvou sousedn\u00edch odstavc\u016f.<\/p>\n<p>Menu webu je tak\u00e9 seznam. Odkazy jen odd\u011blen\u00e9 mezerami p\u0159e\u010dte \u010dte\u010dka obrazovky jako souvisl\u00fd text, zat\u00edmco seznam ohl\u00e1s\u00ed: \u201enavigace, 5 polo\u017eek\u201c.<\/p>\n<h2 id=\"odkazy-a-navigace\">Odkazy a navigace<\/h2>\n<p><code>&lt;a&gt;<\/code> je hlavn\u00ed tag hypertextu a n\u011bkolik jeho atribut\u016f stoj\u00ed za to zn\u00e1t zpam\u011bti.<\/p>\n<pre><code>&lt;a href=\"\/blog\/\"&gt;Intern\u00ed odkaz&lt;\/a&gt;\n&lt;a href=\"https:\/\/example.com\" target=\"_blank\" rel=\"noopener noreferrer\"&gt;Extern\u00ed&lt;\/a&gt;\n&lt;a href=\"#section-2\"&gt;Kotva na t\u00e9\u017ee str\u00e1nce&lt;\/a&gt;\n&lt;a href=\"mailto:info@example.com\"&gt;E-mail&lt;\/a&gt;\n&lt;a href=\"tel:+380675024584\"&gt;Zavolat&lt;\/a&gt;\n&lt;a href=\"\/price.pdf\" download&gt;St\u00e1hnout cen\u00edk&lt;\/a&gt;<\/code><\/pre>\n<p><code>target=\"_blank\"<\/code> bez <code>rel=\"noopener\"<\/code> je star\u00e1 bezpe\u010dnostn\u00ed d\u00edra: otev\u0159en\u00e1 str\u00e1nka z\u00edsk\u00e1 p\u0159\u00edstup k objektu <code>window.opener<\/code> a m\u016f\u017ee podvrhnout p\u016fvodn\u00ed panel. Modern\u00ed prohl\u00ed\u017ee\u010de <code>noopener<\/code> dopl\u0148uj\u00ed samy, spol\u00e9hat se na to v ciz\u00edm prost\u0159ed\u00ed je ale nerozumn\u00e9.<\/p>\n<p>Atribut <code>rel<\/code> nese i v\u00fdznam pro SEO: <code>rel=\"nofollow\"<\/code> \u0159\u00edk\u00e1 vyhled\u00e1va\u010di, a\u0165 nep\u0159ed\u00e1v\u00e1 v\u00e1hu, <code>rel=\"sponsored\"<\/code> ozna\u010duje placen\u00fd odkaz, <code>rel=\"ugc\"<\/code> odkaz z u\u017eivatelsk\u00e9ho obsahu. Text odkazu mus\u00ed b\u00fdt smyslupln\u00fd: \u201ev\u00edce\u201c a \u201ezde\u201c jsou stejn\u011b neu\u017eite\u010dn\u00e9 pro vyhled\u00e1va\u010d i pro \u010dlov\u011bka, kter\u00fd str\u00e1nku poslouch\u00e1 \u010dte\u010dkou a dostane seznam odkaz\u016f bez okoln\u00edho textu.<\/p>\n<h2 id=\"obrazky-video-a-zvuk\">Obr\u00e1zky, video a zvuk<\/h2>\n<p>Obr\u00e1zek v HTML nen\u00ed jen <code>&lt;img&gt;<\/code>. Kolem n\u011bj stoj\u00ed cel\u00e1 rodina tag\u016f, kter\u00e1 \u0159e\u0161\u00ed dva \u00fakoly: popsat obr\u00e1zek a podat prohl\u00ed\u017ee\u010di soubor p\u0159im\u011b\u0159en\u00e9 velikosti.<\/p>\n<pre><code>&lt;figure&gt;\n  &lt;img src=\"\/img\/scheme.webp\"\n       alt=\"Sch\u00e9ma struktury HTML dokumentu\"\n       width=\"1200\" height=\"630\"\n       loading=\"lazy\" decoding=\"async\"&gt;\n  &lt;figcaption&gt;Strom dokumentu: jeden ko\u0159en a dv\u011b v\u011btve&lt;\/figcaption&gt;\n&lt;\/figure&gt;<\/code><\/pre>\n<p>Atribut <code>alt<\/code> je povinn\u00fd v\u017edy. Popisuje obsah obr\u00e1zku t\u011bm, kdo jej nevid\u00ed, a zobraz\u00ed se m\u00edsto obr\u00e1zku, kter\u00fd se nena\u010detl. U \u010dist\u011b dekorativn\u00edho obr\u00e1zku se p\u00ed\u0161e pr\u00e1zdn\u00e9 <code>alt=\"\"<\/code> \u2014 \u010dte\u010dka jej pak p\u0159esko\u010d\u00ed, zat\u00edmco chyb\u011bj\u00edc\u00ed atribut ji donut\u00ed p\u0159e\u010d\u00edst n\u00e1zev souboru. Atributy <code>width<\/code> a <code>height<\/code> neslou\u017e\u00ed k rozm\u011br\u016fm, ale k tomu, aby si prohl\u00ed\u017ee\u010d p\u0159edem rezervoval m\u00edsto: bez nich str\u00e1nka p\u0159i na\u010d\u00edt\u00e1n\u00ed poskakuje, co\u017e p\u0159\u00edmo zhor\u0161uje Cumulative Layout Shift v Core Web Vitals. <code>loading=\"lazy\"<\/code> odlo\u017e\u00ed obr\u00e1zky mimo viditelnou oblast.<\/p>\n<p>Kdy\u017e je pot\u0159eba podat r\u016fzn\u00fdm obrazovk\u00e1m r\u016fzn\u00e9 soubory, nastupuje <code>&lt;picture&gt;<\/code>:<\/p>\n<pre><code>&lt;picture&gt;\n  &lt;source srcset=\"\/img\/hero.avif\" type=\"image\/avif\"&gt;\n  &lt;source srcset=\"\/img\/hero.webp\" type=\"image\/webp\"&gt;\n  &lt;img src=\"\/img\/hero.jpg\" alt=\"Popis\"&gt;\n&lt;\/picture&gt;<\/code><\/pre>\n<p>Prohl\u00ed\u017ee\u010d vezme prvn\u00ed form\u00e1t, kter\u00e9mu rozum\u00ed, a tam skon\u010d\u00ed. Star\u00fd prohl\u00ed\u017ee\u010d dojde k <code>&lt;img&gt;<\/code> a dostane JPEG. Tent\u00fd\u017e postup s atributem <code>media<\/code> uk\u00e1\u017ee na telefonu v\u00fd\u0161ku a na desktopu \u0161\u00ed\u0159ku.<\/p>\n<div class=\"wm-table-scroll wm-table-cards\" tabindex=\"0\" role=\"region\" aria-label=\"Table, scrolls horizontally\">\n<table>\n<thead>\n<tr>\n<th>Tag<\/th>\n<th>K \u010demu<\/th>\n<th>Kl\u00ed\u010dov\u00e9 atributy<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td data-label=\"Tag\"><code>&lt;img&gt;<\/code><\/td>\n<td data-label=\"K \u010demu\">Obr\u00e1zek<\/td>\n<td data-label=\"Kl\u00ed\u010dov\u00e9 atributy\"><code>src<\/code>, <code>alt<\/code>, <code>srcset<\/code>, <code>sizes<\/code>, <code>loading<\/code><\/td>\n<\/tr>\n<tr>\n<td data-label=\"Tag\"><code>&lt;picture&gt;<\/code>, <code>&lt;source&gt;<\/code><\/td>\n<td data-label=\"K \u010demu\">Volba souboru podle form\u00e1tu a obrazovky<\/td>\n<td data-label=\"Kl\u00ed\u010dov\u00e9 atributy\"><code>type<\/code>, <code>media<\/code>, <code>srcset<\/code><\/td>\n<\/tr>\n<tr>\n<td data-label=\"Tag\"><code>&lt;figure&gt;<\/code>, <code>&lt;figcaption&gt;<\/code><\/td>\n<td data-label=\"K \u010demu\">Ilustrace s popiskem<\/td>\n<td data-label=\"Kl\u00ed\u010dov\u00e9 atributy\">\u2014<\/td>\n<\/tr>\n<tr>\n<td data-label=\"Tag\"><code>&lt;video&gt;<\/code><\/td>\n<td data-label=\"K \u010demu\">Video na str\u00e1nce<\/td>\n<td data-label=\"Kl\u00ed\u010dov\u00e9 atributy\"><code>controls<\/code>, <code>poster<\/code>, <code>muted<\/code>, <code>playsinline<\/code><\/td>\n<\/tr>\n<tr>\n<td data-label=\"Tag\"><code>&lt;audio&gt;<\/code><\/td>\n<td data-label=\"K \u010demu\">Zvuk<\/td>\n<td data-label=\"Kl\u00ed\u010dov\u00e9 atributy\"><code>controls<\/code>, <code>preload<\/code>, <code>loop<\/code><\/td>\n<\/tr>\n<tr>\n<td data-label=\"Tag\"><code>&lt;track&gt;<\/code><\/td>\n<td data-label=\"K \u010demu\">Titulky k videu<\/td>\n<td data-label=\"Kl\u00ed\u010dov\u00e9 atributy\"><code>kind<\/code>, <code>srclang<\/code>, <code>label<\/code><\/td>\n<\/tr>\n<tr>\n<td data-label=\"Tag\"><code>&lt;canvas&gt;<\/code><\/td>\n<td data-label=\"K \u010demu\">Pl\u00e1tno pro kreslen\u00ed skriptem<\/td>\n<td data-label=\"Kl\u00ed\u010dov\u00e9 atributy\"><code>width<\/code>, <code>height<\/code><\/td>\n<\/tr>\n<tr>\n<td data-label=\"Tag\"><code>&lt;svg&gt;<\/code><\/td>\n<td data-label=\"K \u010demu\">Vektorov\u00e1 grafika p\u0159\u00edmo v k\u00f3du<\/td>\n<td data-label=\"Kl\u00ed\u010dov\u00e9 atributy\"><code>viewBox<\/code>, <code>role<\/code>, <code>aria-label<\/code><\/td>\n<\/tr>\n<tr>\n<td data-label=\"Tag\"><code>&lt;iframe&gt;<\/code><\/td>\n<td data-label=\"K \u010demu\">Vlo\u017een\u00fd ciz\u00ed dokument<\/td>\n<td data-label=\"Kl\u00ed\u010dov\u00e9 atributy\"><code>loading<\/code>, <code>sandbox<\/code>, <code>allow<\/code>, <code>title<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<p>Automatick\u00e9 p\u0159ehr\u00e1v\u00e1n\u00ed funguje jen ve spojen\u00ed <code>autoplay muted playsinline<\/code> \u2014 bez <code>muted<\/code> jej mobiln\u00ed prohl\u00ed\u017ee\u010d zablokuje. U <code>&lt;iframe&gt;<\/code> v\u017edy uv\u00e1d\u011bjte <code>title<\/code>: \u010dte\u010dka j\u00edm ohl\u00e1s\u00ed obsah r\u00e1mu, jinak n\u00e1v\u0161t\u011bvn\u00edk usly\u0161\u00ed bezejmennou \u201evlo\u017eenou oblast\u201c.<\/p>\n<h2 id=\"tabulky\">Tabulky<\/h2>\n<p>Tabulky se vr\u00e1tily do hry pot\u00e9, co se p\u0159estaly pou\u017e\u00edvat na sazbu. Pro skute\u010dn\u00e1 tabulkov\u00e1 data alternativu nemaj\u00ed, ozna\u010dit je ale mus\u00edte \u00fapln\u011b.<\/p>\n<pre><code>&lt;table&gt;\n  &lt;caption&gt;Tarify hostingu&lt;\/caption&gt;\n  &lt;thead&gt;\n    &lt;tr&gt;&lt;th scope=\"col\"&gt;Tarif&lt;\/th&gt;&lt;th scope=\"col\"&gt;Disk&lt;\/th&gt;&lt;th scope=\"col\"&gt;Cena&lt;\/th&gt;&lt;\/tr&gt;\n  &lt;\/thead&gt;\n  &lt;tbody&gt;\n    &lt;tr&gt;&lt;th scope=\"row\"&gt;Start&lt;\/th&gt;&lt;td&gt;10 GB&lt;\/td&gt;&lt;td&gt;3 $&lt;\/td&gt;&lt;\/tr&gt;\n    &lt;tr&gt;&lt;th scope=\"row\"&gt;Business&lt;\/th&gt;&lt;td&gt;50 GB&lt;\/td&gt;&lt;td&gt;9 $&lt;\/td&gt;&lt;\/tr&gt;\n  &lt;\/tbody&gt;\n  &lt;tfoot&gt;\n    &lt;tr&gt;&lt;td colspan=\"3\"&gt;Ceny bez DPH&lt;\/td&gt;&lt;\/tr&gt;\n  &lt;\/tfoot&gt;\n&lt;\/table&gt;<\/code><\/pre>\n<p>T\u0159i v\u011bci odli\u0161uj\u00ed ozna\u010denou tabulku od hromady bun\u011bk. <code>&lt;caption&gt;<\/code> j\u00ed d\u00e1 n\u00e1zev, kter\u00fd se p\u0159e\u010dte jako prvn\u00ed. <code>&lt;th&gt;<\/code> s atributem <code>scope<\/code> prohl\u00e1s\u00ed bu\u0148ku za z\u00e1hlav\u00ed sloupce nebo \u0159\u00e1dku a \u010dte\u010dka p\u0159i pohybu po bu\u0148k\u00e1ch napov\u00edd\u00e1: \u201eBusiness, Cena, 9 dolar\u016f\u201c. Rozd\u011blen\u00ed na <code>&lt;thead&gt;<\/code>, <code>&lt;tbody&gt;<\/code> a <code>&lt;tfoot&gt;<\/code> umo\u017en\u00ed prohl\u00ed\u017ee\u010di opakovat z\u00e1hlav\u00ed p\u0159i tisku dlouh\u00e9 tabulky a rolovat t\u011blo odd\u011blen\u011b.<\/p>\n<p>Na \u00fazk\u00e9 obrazovce je \u0161irok\u00e1 tabulka v\u017edy probl\u00e9m. Funguj\u00ed dv\u011b \u0159e\u0161en\u00ed: obalit ji kontejnerem s <code>overflow-x: auto<\/code> a nechat rolovat, nebo pomoc\u00ed CSS p\u0159estav\u011bt \u0159\u00e1dky na karty a z\u00e1hlav\u00ed sloupc\u016f br\u00e1t z <code>data-label<\/code>. Oboj\u00ed ponech\u00e1 k\u00f3d spr\u00e1vn\u00fd \u2014 tabulku rozbije teprve snaha vt\u011bsnat ji do \u0161\u00ed\u0159ky obrazovky zmen\u0161en\u00edm p\u00edsma.<\/p>\n<h2 id=\"formulare-a-vstupni-pole\">Formul\u00e1\u0159e a vstupn\u00ed pole<\/h2>\n<p>Formul\u00e1\u0159e jsou nejv\u011bt\u0161\u00ed skupina tag\u016f a jedin\u00e9 m\u00edsto, kde HTML nejen zobrazuje, ale i sb\u00edr\u00e1 data.<\/p>\n<pre><code>&lt;form action=\"\/send\/\" method=\"post\"&gt;\n  &lt;fieldset&gt;\n    &lt;legend&gt;Popt\u00e1vka&lt;\/legend&gt;\n\n    &lt;label for=\"name\"&gt;Jm\u00e9no&lt;\/label&gt;\n    &lt;input type=\"text\" id=\"name\" name=\"name\" required autocomplete=\"name\"&gt;\n\n    &lt;label for=\"mail\"&gt;E-mail&lt;\/label&gt;\n    &lt;input type=\"email\" id=\"mail\" name=\"email\" required\n           placeholder=\"you@example.com\" autocomplete=\"email\"&gt;\n\n    &lt;label for=\"plan\"&gt;Tarif&lt;\/label&gt;\n    &lt;select id=\"plan\" name=\"plan\"&gt;\n      &lt;optgroup label=\"Hosting\"&gt;\n        &lt;option value=\"start\"&gt;Start&lt;\/option&gt;\n        &lt;option value=\"pro\" selected&gt;Business&lt;\/option&gt;\n      &lt;\/optgroup&gt;\n    &lt;\/select&gt;\n\n    &lt;label for=\"msg\"&gt;Zpr\u00e1va&lt;\/label&gt;\n    &lt;textarea id=\"msg\" name=\"message\" rows=\"5\"&gt;&lt;\/textarea&gt;\n\n    &lt;button type=\"submit\"&gt;Odeslat&lt;\/button&gt;\n  &lt;\/fieldset&gt;\n&lt;\/form&gt;<\/code><\/pre>\n<p>Spojen\u00ed <code>&lt;label for&gt;<\/code> s <code>id<\/code> pole nen\u00ed formalita. Zv\u011bt\u0161uje plochu pro kliknut\u00ed \u2014 klik na popisek um\u00edst\u00ed kurzor do pole \u2014 a \u010dte\u010dce d\u00edky n\u011bmu dojde, na co se formul\u00e1\u0159 pt\u00e1. Pole bez popisku, kde jeho roli hraje <code>placeholder<\/code>, je b\u011b\u017en\u00e1 chyba: n\u00e1pov\u011bda zmiz\u00ed p\u0159i prvn\u00edm znaku a n\u00e1v\u0161t\u011bvn\u00edk p\u0159estane v\u011bd\u011bt, co vypl\u0148uje.<\/p>\n<figure><svg viewbox=\"0 0 900 470\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" role=\"img\" aria-label=\"\u0422\u0438\u043f\u044b \u043f\u043e\u043b\u0435\u0439 \u0432\u0432\u043e\u0434\u0430 HTML5: text, email, tel, number, date, color, range, checkbox \u0438 radio, file\" style=\"width:100%;height:auto;max-width:900px;display:block;margin:0 auto 20px\"><text fill=\"#30738E\" font-weight=\"400\" font-size=\"14px\" font-family=\"Roboto, Arial, sans-serif\" x=\"20\" y=\"22\">type=\"text\"<\/text><text fill=\"#848484\" font-weight=\"300\" font-size=\"13px\" font-family=\"Roboto, Arial, sans-serif\" x=\"20\" y=\"42\">Jm\u00e9no<\/text><rect fill=\"#232323\" stroke=\"#B3B3B3\" stroke-width=\"1\" x=\"20\" y=\"50\" width=\"260\" height=\"38\" rx=\"0\"><\/rect><text fill=\"#DDDDDD\" font-weight=\"200\" font-size=\"15px\" font-family=\"Roboto, Arial, sans-serif\" x=\"32\" y=\"75\">Maxim<\/text><text fill=\"#30738E\" font-weight=\"400\" font-size=\"14px\" font-family=\"Roboto, Arial, sans-serif\" x=\"320\" y=\"22\">type=\"email\"<\/text><text fill=\"#848484\" font-weight=\"300\" font-size=\"13px\" font-family=\"Roboto, Arial, sans-serif\" x=\"320\" y=\"42\">E-mail<\/text><rect fill=\"#232323\" stroke=\"#B3B3B3\" stroke-width=\"1\" x=\"320\" y=\"50\" width=\"260\" height=\"38\" rx=\"0\"><\/rect><text fill=\"#6E6E6E\" font-weight=\"200\" font-size=\"15px\" font-family=\"Roboto, Arial, sans-serif\" x=\"332\" y=\"75\">you@example.com<\/text><text fill=\"#30738E\" font-weight=\"400\" font-size=\"14px\" font-family=\"Roboto, Arial, sans-serif\" x=\"620\" y=\"22\">type=\"tel\"<\/text><text fill=\"#848484\" font-weight=\"300\" font-size=\"13px\" font-family=\"Roboto, Arial, sans-serif\" x=\"620\" y=\"42\">Telefon<\/text><rect fill=\"#232323\" stroke=\"#B3B3B3\" stroke-width=\"1\" x=\"620\" y=\"50\" width=\"260\" height=\"38\" rx=\"0\"><\/rect><text fill=\"#DDDDDD\" font-weight=\"200\" font-size=\"15px\" font-family=\"Roboto, Arial, sans-serif\" x=\"632\" y=\"75\">+38 067 502-45-84<\/text><text fill=\"#30738E\" font-weight=\"400\" font-size=\"14px\" font-family=\"Roboto, Arial, sans-serif\" x=\"20\" y=\"132\">type=\"number\"<\/text><text fill=\"#848484\" font-weight=\"300\" font-size=\"13px\" font-family=\"Roboto, Arial, sans-serif\" x=\"20\" y=\"152\">Po\u010det<\/text><rect fill=\"#232323\" stroke=\"#B3B3B3\" stroke-width=\"1\" x=\"20\" y=\"160\" width=\"260\" height=\"38\" rx=\"0\"><\/rect><text fill=\"#DDDDDD\" font-weight=\"200\" font-size=\"15px\" font-family=\"Roboto, Arial, sans-serif\" x=\"32\" y=\"185\">12<\/text><path stroke=\"#30738E\" stroke-width=\"2\" fill=\"none\" d=\"M252 174 l8 -8 l8 8 M252 184 l8 8 l8 -8\"><\/path><text fill=\"#30738E\" font-weight=\"400\" font-size=\"14px\" font-family=\"Roboto, Arial, sans-serif\" x=\"320\" y=\"132\">type=\"date\"<\/text><text fill=\"#848484\" font-weight=\"300\" font-size=\"13px\" font-family=\"Roboto, Arial, sans-serif\" x=\"320\" y=\"152\">Datum<\/text><rect fill=\"#232323\" stroke=\"#B3B3B3\" stroke-width=\"1\" x=\"320\" y=\"160\" width=\"260\" height=\"38\" rx=\"0\"><\/rect><text fill=\"#DDDDDD\" font-weight=\"200\" font-size=\"15px\" font-family=\"Roboto, Arial, sans-serif\" x=\"332\" y=\"185\">28.10.2026<\/text><rect stroke=\"#30738E\" stroke-width=\"2\" fill=\"none\" x=\"548\" y=\"170\" width=\"18\" height=\"18\"><\/rect><path stroke=\"#30738E\" stroke-width=\"2\" fill=\"none\" d=\"M548 176 h18\"><\/path><text fill=\"#30738E\" font-weight=\"400\" font-size=\"14px\" font-family=\"Roboto, Arial, sans-serif\" x=\"620\" y=\"132\">type=\"color\"<\/text><text fill=\"#848484\" font-weight=\"300\" font-size=\"13px\" font-family=\"Roboto, Arial, sans-serif\" x=\"620\" y=\"152\">Barva<\/text><rect fill=\"#232323\" stroke=\"#B3B3B3\" stroke-width=\"1\" x=\"620\" y=\"160\" width=\"260\" height=\"38\" rx=\"0\"><\/rect><rect x=\"632\" y=\"168\" width=\"60\" height=\"22\" fill=\"#30738E\" stroke=\"#B3B3B3\"><\/rect><text fill=\"#DDDDDD\" font-weight=\"200\" font-size=\"15px\" font-family=\"Roboto, Arial, sans-serif\" x=\"706\" y=\"185\">#30738E<\/text><text fill=\"#30738E\" font-weight=\"400\" font-size=\"14px\" font-family=\"Roboto, Arial, sans-serif\" x=\"20\" y=\"242\">type=\"range\"<\/text><text fill=\"#848484\" font-weight=\"300\" font-size=\"13px\" font-family=\"Roboto, Arial, sans-serif\" x=\"20\" y=\"262\">Rozpo\u010det<\/text><rect x=\"20\" y=\"282\" width=\"260\" height=\"4\" fill=\"#2E404F\"><\/rect><rect x=\"20\" y=\"282\" width=\"150\" height=\"4\" fill=\"#30738E\"><\/rect><circle cx=\"170\" cy=\"284\" r=\"10\" fill=\"#30738E\"><\/circle><text fill=\"#30738E\" font-weight=\"400\" font-size=\"14px\" font-family=\"Roboto, Arial, sans-serif\" x=\"320\" y=\"242\">type=\"checkbox\"<\/text><rect fill=\"#232323\" stroke=\"#B3B3B3\" stroke-width=\"1\" x=\"320\" y=\"262\" width=\"20\" height=\"20\"><\/rect><path stroke=\"#30738E\" stroke-width=\"2\" fill=\"none\" d=\"M324 272 l5 6 l9 -11\"><\/path><text fill=\"#DDDDDD\" font-weight=\"200\" font-size=\"15px\" font-family=\"Roboto, Arial, sans-serif\" x=\"352\" y=\"279\">Odeb\u00edrat novinky<\/text><rect fill=\"#232323\" stroke=\"#B3B3B3\" stroke-width=\"1\" x=\"320\" y=\"292\" width=\"20\" height=\"20\"><\/rect><text fill=\"#DDDDDD\" font-weight=\"200\" font-size=\"15px\" font-family=\"Roboto, Arial, sans-serif\" x=\"352\" y=\"309\">Souhlas se zpracov\u00e1n\u00edm<\/text><text fill=\"#30738E\" font-weight=\"400\" font-size=\"14px\" font-family=\"Roboto, Arial, sans-serif\" x=\"620\" y=\"242\">type=\"radio\"<\/text><circle fill=\"#232323\" stroke=\"#B3B3B3\" stroke-width=\"1\" cx=\"630\" cy=\"272\" r=\"10\"><\/circle><circle cx=\"630\" cy=\"272\" r=\"5\" fill=\"#30738E\"><\/circle><text fill=\"#DDDDDD\" font-weight=\"200\" font-size=\"15px\" font-family=\"Roboto, Arial, sans-serif\" x=\"652\" y=\"278\">Tarif \u201eStart\u201c<\/text><circle fill=\"#232323\" stroke=\"#B3B3B3\" stroke-width=\"1\" cx=\"630\" cy=\"302\" r=\"10\"><\/circle><text fill=\"#DDDDDD\" font-weight=\"200\" font-size=\"15px\" font-family=\"Roboto, Arial, sans-serif\" x=\"652\" y=\"308\">Tarif \u201eBusiness\u201c<\/text><text fill=\"#30738E\" font-weight=\"400\" font-size=\"14px\" font-family=\"Roboto, Arial, sans-serif\" x=\"20\" y=\"352\">type=\"file\"<\/text><rect fill=\"#232323\" stroke=\"#B3B3B3\" stroke-width=\"1\" x=\"20\" y=\"370\" width=\"260\" height=\"38\"><\/rect><rect x=\"28\" y=\"378\" width=\"118\" height=\"22\" fill=\"#2E404F\"><\/rect><text fill=\"#DDDDDD\" font-weight=\"200\" font-size=\"15px\" font-family=\"Roboto, Arial, sans-serif\" x=\"40\" y=\"395\">Vybrat soubor<\/text><text fill=\"#6E6E6E\" font-weight=\"200\" font-size=\"15px\" font-family=\"Roboto, Arial, sans-serif\" x=\"158\" y=\"395\">nevybr\u00e1n<\/text><text fill=\"#30738E\" font-weight=\"400\" font-size=\"14px\" font-family=\"Roboto, Arial, sans-serif\" x=\"320\" y=\"352\">&lt;select&gt;<\/text><rect fill=\"#232323\" stroke=\"#B3B3B3\" stroke-width=\"1\" x=\"320\" y=\"370\" width=\"260\" height=\"38\"><\/rect><text fill=\"#DDDDDD\" font-weight=\"200\" font-size=\"15px\" font-family=\"Roboto, Arial, sans-serif\" x=\"332\" y=\"395\">Business<\/text><path stroke=\"#30738E\" stroke-width=\"2\" fill=\"none\" d=\"M552 384 l8 8 l8 -8\"><\/path><text fill=\"#30738E\" font-weight=\"400\" font-size=\"14px\" font-family=\"Roboto, Arial, sans-serif\" x=\"620\" y=\"352\">&lt;textarea&gt;<\/text><rect fill=\"#232323\" stroke=\"#B3B3B3\" stroke-width=\"1\" x=\"620\" y=\"370\" width=\"260\" height=\"60\"><\/rect><text fill=\"#6E6E6E\" font-weight=\"200\" font-size=\"15px\" font-family=\"Roboto, Arial, sans-serif\" x=\"632\" y=\"392\">Popi\u0161te sv\u016fj \u00fakol\u2026<\/text><text fill=\"#848484\" font-weight=\"300\" font-size=\"13px\" font-family=\"Roboto, Arial, sans-serif\" x=\"450\" y=\"458\" text-anchor=\"middle\">Typ pole ur\u010duje kl\u00e1vesnici na mobilu i vestav\u011bnou kontrolu hodnoty<\/text><\/svg><figcaption>Hlavn\u00ed typy vstupn\u00edch pol\u00ed a jejich zobrazen\u00ed v prohl\u00ed\u017ee\u010di<\/figcaption><\/figure>\n<p>Typ pole ur\u010duje jak kl\u00e1vesnici na telefonu, tak vestav\u011bnou kontrolu:<\/p>\n<div class=\"wm-table-scroll wm-table-cards\" tabindex=\"0\" role=\"region\" aria-label=\"Table, scrolls horizontally\">\n<table>\n<thead>\n<tr>\n<th>Hodnota <code>type<\/code><\/th>\n<th>Co p\u0159in\u00e1\u0161\u00ed<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td data-label=\"Hodnota type\"><code>text<\/code><\/td>\n<td data-label=\"Co p\u0159in\u00e1\u0161\u00ed\">Oby\u010dejn\u00fd \u0159et\u011bzec<\/td>\n<\/tr>\n<tr>\n<td data-label=\"Hodnota type\"><code>email<\/code><\/td>\n<td data-label=\"Co p\u0159in\u00e1\u0161\u00ed\">Kontrola form\u00e1tu adresy, kl\u00e1vesnice s \u201e@\u201c<\/td>\n<\/tr>\n<tr>\n<td data-label=\"Hodnota type\"><code>tel<\/code><\/td>\n<td data-label=\"Co p\u0159in\u00e1\u0161\u00ed\">\u010c\u00edseln\u00e1 kl\u00e1vesnice, form\u00e1t se nekontroluje<\/td>\n<\/tr>\n<tr>\n<td data-label=\"Hodnota type\"><code>url<\/code><\/td>\n<td data-label=\"Co p\u0159in\u00e1\u0161\u00ed\">Kontrola webov\u00e9 adresy<\/td>\n<\/tr>\n<tr>\n<td data-label=\"Hodnota type\"><code>number<\/code>, <code>range<\/code><\/td>\n<td data-label=\"Co p\u0159in\u00e1\u0161\u00ed\">\u010c\u00edslo se \u0161ipkami a posuvn\u00edk, atributy <code>min<\/code>, <code>max<\/code>, <code>step<\/code><\/td>\n<\/tr>\n<tr>\n<td data-label=\"Hodnota type\"><code>date<\/code>, <code>time<\/code>, <code>datetime-local<\/code>, <code>month<\/code>, <code>week<\/code><\/td>\n<td data-label=\"Co p\u0159in\u00e1\u0161\u00ed\">Vestav\u011bn\u00fd kalend\u00e1\u0159 a hodiny<\/td>\n<\/tr>\n<tr>\n<td data-label=\"Hodnota type\"><code>password<\/code><\/td>\n<td data-label=\"Co p\u0159in\u00e1\u0161\u00ed\">Skryt\u00e9 zad\u00e1v\u00e1n\u00ed<\/td>\n<\/tr>\n<tr>\n<td data-label=\"Hodnota type\"><code>search<\/code><\/td>\n<td data-label=\"Co p\u0159in\u00e1\u0161\u00ed\">Vyhled\u00e1vac\u00ed pole s k\u0159\u00ed\u017ekem pro vymaz\u00e1n\u00ed<\/td>\n<\/tr>\n<tr>\n<td data-label=\"Hodnota type\"><code>checkbox<\/code>, <code>radio<\/code><\/td>\n<td data-label=\"Co p\u0159in\u00e1\u0161\u00ed\">Za\u0161krt\u00e1v\u00e1tko a p\u0159ep\u00edna\u010d (stejn\u00fd <code>name<\/code> ve skupin\u011b)<\/td>\n<\/tr>\n<tr>\n<td data-label=\"Hodnota type\"><code>file<\/code><\/td>\n<td data-label=\"Co p\u0159in\u00e1\u0161\u00ed\">Nahr\u00e1n\u00ed souboru, atributy <code>accept<\/code> a <code>multiple<\/code><\/td>\n<\/tr>\n<tr>\n<td data-label=\"Hodnota type\"><code>color<\/code><\/td>\n<td data-label=\"Co p\u0159in\u00e1\u0161\u00ed\">V\u00fdb\u011br barvy<\/td>\n<\/tr>\n<tr>\n<td data-label=\"Hodnota type\"><code>hidden<\/code><\/td>\n<td data-label=\"Co p\u0159in\u00e1\u0161\u00ed\">Servisn\u00ed hodnota skryt\u00e1 p\u0159ed n\u00e1v\u0161t\u011bvn\u00edkem<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<p>Validace prost\u0159edky HTML funguje bez jedin\u00e9ho \u0159\u00e1dku JavaScriptu: <code>required<\/code> zak\u00e1\u017ee odesl\u00e1n\u00ed pr\u00e1zdn\u00e9ho pole, <code>minlength<\/code> a <code>maxlength<\/code> omez\u00ed d\u00e9lku, <code>pattern<\/code> zad\u00e1 regul\u00e1rn\u00ed v\u00fdraz, <code>min<\/code> a <code>max<\/code> meze \u010d\u00edsla a data. Je to prvn\u00ed linie, ne ochrana: kontrolu na serveru nenahrazuje, proto\u017ee jak\u00fdkoli po\u017eadavek lze poslat mimo formul\u00e1\u0159.<\/p>\n<p>Pozornost si zaslou\u017e\u00ed je\u0161t\u011b dva tagy t\u00e9to skupiny. <code>&lt;datalist&gt;<\/code> d\u00e1 poli na\u0161ept\u00e1v\u00e1n\u00ed a p\u0159itom ponech\u00e1 mo\u017enost zadat vlastn\u00ed hodnotu. <code>&lt;output&gt;<\/code> zobraz\u00ed v\u00fdsledek v\u00fdpo\u010dtu \u2014 t\u0159eba sou\u010det objedn\u00e1vky p\u0159epo\u010d\u00edtan\u00fd p\u0159i zm\u011bn\u011b mno\u017estv\u00ed.<\/p>\n<h2 id=\"interaktivni-prvky-bez-javascriptu\">Interaktivn\u00ed prvky bez JavaScriptu<\/h2>\n<p>\u010c\u00e1st chov\u00e1n\u00ed, kv\u016fli kter\u00e9 se d\u0159\u00edv p\u0159ipojovaly skripty, je v HTML5 vestav\u011bn\u00e1.<\/p>\n<pre><code>&lt;details&gt;\n  &lt;summary&gt;Co zahrnuje spr\u00e1va webu?&lt;\/summary&gt;\n  &lt;p&gt;Aktualizace, z\u00e1lohy, sledov\u00e1n\u00ed dostupnosti.&lt;\/p&gt;\n&lt;\/details&gt;\n\n&lt;dialog id=\"modal\"&gt;\n  &lt;p&gt;Popt\u00e1vka odesl\u00e1na&lt;\/p&gt;\n  &lt;button onclick=\"modal.close()\"&gt;Zav\u0159\u00edt&lt;\/button&gt;\n&lt;\/dialog&gt;\n\n&lt;progress value=\"70\" max=\"100\"&gt;70%&lt;\/progress&gt;\n&lt;meter value=\"0.8\" low=\"0.3\" high=\"0.9\"&gt;80%&lt;\/meter&gt;<\/code><\/pre>\n<p><code>&lt;details&gt;<\/code> se <code>&lt;summary&gt;<\/code> je hotov\u00e1 harmonika: rozbal\u00ed se kliknut\u00edm, funguje z kl\u00e1vesnice, indexuje ji vyhled\u00e1va\u010d. Blok \u201eot\u00e1zka \u2014 odpov\u011b\u010f\u201c na tomto tagu nepot\u0159ebuje jedin\u00fd \u0159\u00e1dek JavaScriptu. <code>&lt;dialog&gt;<\/code> je mod\u00e1ln\u00ed okno se spr\u00e1vn\u00fdm chov\u00e1n\u00edm fokusu: metoda <code>showModal()<\/code> uzamkne fokus uvnit\u0159 okna a zav\u0159e se kl\u00e1vesou Escape. <code>&lt;progress&gt;<\/code> ukazuje pr\u016fb\u011bh procesu, <code>&lt;meter&gt;<\/code> hodnotu ve zn\u00e1m\u00e9m rozsahu, nap\u0159\u00edklad zapln\u011bn\u00ed disku.<\/p>\n<h2 id=\"servisni-tagy-v\">Servisn\u00ed tagy v <code>&lt;head&gt;<\/code><\/h2>\n<p>Tyto tagy n\u00e1v\u0161t\u011bvn\u00edk nevid\u00ed, p\u0159esto rozhoduj\u00ed o tom, jak str\u00e1nka vypad\u00e1 ve v\u00fdsledc\u00edch hled\u00e1n\u00ed a na soci\u00e1ln\u00edch s\u00edt\u00edch.<\/p>\n<pre><code>&lt;head&gt;\n  &lt;meta charset=\"UTF-8\"&gt;\n  &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1\"&gt;\n  &lt;title&gt;Tagy HTML5: p\u0159\u00edru\u010dka&lt;\/title&gt;\n  &lt;meta name=\"description\" content=\"V\u0161echny aktu\u00e1ln\u00ed tagy HTML5 s p\u0159\u00edklady\"&gt;\n  &lt;link rel=\"canonical\" href=\"https:\/\/example.com\/html5\/\"&gt;\n  &lt;link rel=\"alternate\" hreflang=\"uk\" href=\"https:\/\/example.com\/uk\/html5\/\"&gt;\n  &lt;link rel=\"icon\" href=\"\/favicon.svg\" type=\"image\/svg+xml\"&gt;\n  &lt;link rel=\"stylesheet\" href=\"\/style.css\"&gt;\n  &lt;meta property=\"og:title\" content=\"Tagy HTML5: p\u0159\u00edru\u010dka\"&gt;\n  &lt;meta property=\"og:image\" content=\"https:\/\/example.com\/img\/cover.webp\"&gt;\n  &lt;script src=\"\/app.js\" defer&gt;&lt;\/script&gt;\n&lt;\/head&gt;<\/code><\/pre>\n<p><code>&lt;title&gt;<\/code> je nejsiln\u011bj\u0161\u00ed textov\u00fd sign\u00e1l pro vyhled\u00e1va\u010d a to, co n\u00e1v\u0161t\u011bvn\u00edk vid\u00ed na panelu. <code>&lt;link rel=\"canonical\"&gt;<\/code> ur\u010duje hlavn\u00ed adresu str\u00e1nky, vede-li na ni n\u011bkolik URL s parametry. <code>hreflang<\/code> propojuje jazykov\u00e9 verze \u2014 pro v\u00edcejazy\u010dn\u00fd web povinn\u00e9, bez n\u011bj vyhled\u00e1va\u010d uk\u00e1\u017ee \u0161patnou verzi. Vlastnosti <code>og:<\/code> ur\u010duj\u00ed, jak odkaz vypad\u00e1 v messengeru a na soci\u00e1ln\u00ed s\u00edti.<\/p>\n<p>O p\u0159ipojov\u00e1n\u00ed skript\u016f plat\u00ed jedno: <code>&lt;script&gt;<\/code> bez atribut\u016f zastav\u00ed zpracov\u00e1n\u00ed dokumentu, dokud se soubor nena\u010dte a nespust\u00ed. Atribut <code>defer<\/code> odlo\u017e\u00ed spu\u0161t\u011bn\u00ed na konec zpracov\u00e1n\u00ed a zachov\u00e1 po\u0159ad\u00ed soubor\u016f, <code>async<\/code> spust\u00ed ihned po na\u010dten\u00ed a po\u0159ad\u00ed nezaru\u010duje. Pro m\u011b\u0159ic\u00ed k\u00f3dy se hod\u00ed <code>async<\/code>, pro k\u00f3d aplikace <code>defer<\/code>.<\/p>\n<h2 id=\"zastarale-tagy-a-cim-je-nahradit\">Zastaral\u00e9 tagy a \u010d\u00edm je nahradit<\/h2>\n<p>Prohl\u00ed\u017ee\u010de je st\u00e1le zobrazuj\u00ed, specifikace je v\u0161ak vy\u0159adila: \u010d\u00e1st obstar\u00e1vala vzhled, kter\u00fd d\u00e1vno pat\u0159\u00ed do CSS, \u010d\u00e1st prost\u011b \u0161kodila.<\/p>\n<figure><svg viewbox=\"0 0 900 430\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" role=\"img\" aria-label=\"\u0423\u0441\u0442\u0430\u0440\u0435\u0432\u0448\u0438\u0435 \u0442\u0435\u0433\u0438 HTML \u0438 \u0438\u0445 \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u0437\u0430\u043c\u0435\u043d\u044b\" style=\"width:100%;height:auto;max-width:900px;display:block;margin:0 auto 20px\"><text fill=\"#848484\" letter-spacing=\"1px\" font-weight=\"400\" font-size=\"14px\" font-family=\"Roboto, Arial, sans-serif\" x=\"20\" y=\"24\">BYLO \u2014 VY\u0158AZENO ZE SPECIFIKACE<\/text><text fill=\"#848484\" letter-spacing=\"1px\" font-weight=\"400\" font-size=\"14px\" font-family=\"Roboto, Arial, sans-serif\" x=\"520\" y=\"24\">NYN\u00cd \u2014 MODERN\u00cd N\u00c1HRADA<\/text><rect fill=\"#1E1618\" stroke=\"#5A3B40\" stroke-width=\"1\" x=\"20\" y=\"40\" width=\"330\" height=\"44\"><\/rect><text fill=\"#A98086\" font-weight=\"300\" font-size=\"16px\" font-family=\"Roboto, Arial, sans-serif\" x=\"36\" y=\"68\">&lt;font size color&gt;<\/text><path stroke=\"#30738E\" stroke-width=\"1.5\" fill=\"none\" d=\"M360 62 h150 m-12 -6 l12 6 l-12 6\"><\/path><rect fill=\"#15202A\" stroke=\"#30738E\" stroke-width=\"1\" x=\"520\" y=\"40\" width=\"360\" height=\"44\"><\/rect><text fill=\"#EEEEEE\" font-weight=\"300\" font-size=\"16px\" font-family=\"Roboto, Arial, sans-serif\" x=\"536\" y=\"68\">CSS: font-family, font-size, color<\/text><rect fill=\"#1E1618\" stroke=\"#5A3B40\" stroke-width=\"1\" x=\"20\" y=\"100\" width=\"330\" height=\"44\"><\/rect><text fill=\"#A98086\" font-weight=\"300\" font-size=\"16px\" font-family=\"Roboto, Arial, sans-serif\" x=\"36\" y=\"128\">&lt;center&gt;<\/text><path stroke=\"#30738E\" stroke-width=\"1.5\" fill=\"none\" d=\"M360 122 h150 m-12 -6 l12 6 l-12 6\"><\/path><rect fill=\"#15202A\" stroke=\"#30738E\" stroke-width=\"1\" x=\"520\" y=\"100\" width=\"360\" height=\"44\"><\/rect><text fill=\"#EEEEEE\" font-weight=\"300\" font-size=\"16px\" font-family=\"Roboto, Arial, sans-serif\" x=\"536\" y=\"128\">CSS: text-align, margin: 0 auto<\/text><rect fill=\"#1E1618\" stroke=\"#5A3B40\" stroke-width=\"1\" x=\"20\" y=\"160\" width=\"330\" height=\"44\"><\/rect><text fill=\"#A98086\" font-weight=\"300\" font-size=\"16px\" font-family=\"Roboto, Arial, sans-serif\" x=\"36\" y=\"188\">&lt;strike&gt;<\/text><path stroke=\"#30738E\" stroke-width=\"1.5\" fill=\"none\" d=\"M360 182 h150 m-12 -6 l12 6 l-12 6\"><\/path><rect fill=\"#15202A\" stroke=\"#30738E\" stroke-width=\"1\" x=\"520\" y=\"160\" width=\"360\" height=\"44\"><\/rect><text fill=\"#EEEEEE\" font-weight=\"300\" font-size=\"16px\" font-family=\"Roboto, Arial, sans-serif\" x=\"536\" y=\"188\">&lt;s&gt; \u2014 neaktu\u00e1ln\u00ed, &lt;del&gt; \u2014 smazan\u00e9<\/text><rect fill=\"#1E1618\" stroke=\"#5A3B40\" stroke-width=\"1\" x=\"20\" y=\"220\" width=\"330\" height=\"44\"><\/rect><text fill=\"#A98086\" font-weight=\"300\" font-size=\"16px\" font-family=\"Roboto, Arial, sans-serif\" x=\"36\" y=\"248\">&lt;marquee&gt;, &lt;blink&gt;<\/text><path stroke=\"#30738E\" stroke-width=\"1.5\" fill=\"none\" d=\"M360 242 h150 m-12 -6 l12 6 l-12 6\"><\/path><rect fill=\"#15202A\" stroke=\"#30738E\" stroke-width=\"1\" x=\"520\" y=\"220\" width=\"360\" height=\"44\"><\/rect><text fill=\"#EEEEEE\" font-weight=\"300\" font-size=\"16px\" font-family=\"Roboto, Arial, sans-serif\" x=\"536\" y=\"248\">CSS animace \u2014 a l\u00e9pe bez n\u00ed<\/text><rect fill=\"#1E1618\" stroke=\"#5A3B40\" stroke-width=\"1\" x=\"20\" y=\"280\" width=\"330\" height=\"44\"><\/rect><text fill=\"#A98086\" font-weight=\"300\" font-size=\"16px\" font-family=\"Roboto, Arial, sans-serif\" x=\"36\" y=\"308\">&lt;frameset&gt;, &lt;frame&gt;<\/text><path stroke=\"#30738E\" stroke-width=\"1.5\" fill=\"none\" d=\"M360 302 h150 m-12 -6 l12 6 l-12 6\"><\/path><rect fill=\"#15202A\" stroke=\"#30738E\" stroke-width=\"1\" x=\"520\" y=\"280\" width=\"360\" height=\"44\"><\/rect><text fill=\"#EEEEEE\" font-weight=\"300\" font-size=\"16px\" font-family=\"Roboto, Arial, sans-serif\" x=\"536\" y=\"308\">B\u011b\u017en\u00e1 sazba, v p\u0159\u00edpad\u011b pot\u0159eby &lt;iframe&gt;<\/text><rect fill=\"#1E1618\" stroke=\"#5A3B40\" stroke-width=\"1\" x=\"20\" y=\"340\" width=\"330\" height=\"44\"><\/rect><text fill=\"#A98086\" font-weight=\"300\" font-size=\"16px\" font-family=\"Roboto, Arial, sans-serif\" x=\"36\" y=\"368\">&lt;acronym&gt;<\/text><path stroke=\"#30738E\" stroke-width=\"1.5\" fill=\"none\" d=\"M360 362 h150 m-12 -6 l12 6 l-12 6\"><\/path><rect fill=\"#15202A\" stroke=\"#30738E\" stroke-width=\"1\" x=\"520\" y=\"340\" width=\"360\" height=\"44\"><\/rect><text fill=\"#EEEEEE\" font-weight=\"300\" font-size=\"16px\" font-family=\"Roboto, Arial, sans-serif\" x=\"536\" y=\"368\">&lt;abbr title=\"vysv\u011btlen\u00ed\"&gt;<\/text><text fill=\"#848484\" letter-spacing=\"1px\" font-weight=\"400\" font-size=\"14px\" font-family=\"Roboto, Arial, sans-serif\" x=\"450\" y=\"416\" text-anchor=\"middle\" style=\"letter-spacing:0\">Prohl\u00ed\u017ee\u010de je st\u00e1le vykresluj\u00ed, ale valid\u00e1tor i vyhled\u00e1va\u010d takov\u00fd k\u00f3d pova\u017euj\u00ed za chybu<\/text><\/svg><figcaption>\u0160est nej\u010dast\u011bj\u0161\u00edch zastaral\u00fdch tag\u016f a jejich dne\u0161n\u00ed n\u00e1hrada<\/figcaption><\/figure>\n<div class=\"wm-table-scroll wm-table-cards\" tabindex=\"0\" role=\"region\" aria-label=\"Table, scrolls horizontally\">\n<table>\n<thead>\n<tr>\n<th>Zastaral\u00fd tag<\/th>\n<th>Co d\u011blal<\/th>\n<th>\u010c\u00edm nahradit<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td data-label=\"Zastaral\u00fd tag\"><code>&lt;font&gt;<\/code><\/td>\n<td data-label=\"Co d\u011blal\">P\u00edsmo, velikost a barva textu<\/td>\n<td data-label=\"\u010c\u00edm nahradit\">CSS: <code>font-family<\/code>, <code>font-size<\/code>, <code>color<\/code><\/td>\n<\/tr>\n<tr>\n<td data-label=\"Zastaral\u00fd tag\"><code>&lt;center&gt;<\/code><\/td>\n<td data-label=\"Co d\u011blal\">Zarovn\u00e1n\u00ed na st\u0159ed<\/td>\n<td data-label=\"\u010c\u00edm nahradit\">CSS: <code>text-align<\/code>, <code>margin: 0 auto<\/code><\/td>\n<\/tr>\n<tr>\n<td data-label=\"Zastaral\u00fd tag\"><code>&lt;big&gt;<\/code>, <code>&lt;tt&gt;<\/code><\/td>\n<td data-label=\"Co d\u011blal\">Velk\u00e9 a neproporcion\u00e1ln\u00ed p\u00edsmo<\/td>\n<td data-label=\"\u010c\u00edm nahradit\">CSS; pro k\u00f3d <code>&lt;code&gt;<\/code><\/td>\n<\/tr>\n<tr>\n<td data-label=\"Zastaral\u00fd tag\"><code>&lt;strike&gt;<\/code><\/td>\n<td data-label=\"Co d\u011blal\">P\u0159e\u0161krtnut\u00fd text<\/td>\n<td data-label=\"\u010c\u00edm nahradit\"><code>&lt;s&gt;<\/code> nebo <code>&lt;del&gt;<\/code><\/td>\n<\/tr>\n<tr>\n<td data-label=\"Zastaral\u00fd tag\"><code>&lt;marquee&gt;<\/code>, <code>&lt;blink&gt;<\/code><\/td>\n<td data-label=\"Co d\u011blal\">B\u011b\u017e\u00edc\u00ed text a blik\u00e1n\u00ed<\/td>\n<td data-label=\"\u010c\u00edm nahradit\">CSS animace, a rad\u011bji bez n\u00ed<\/td>\n<\/tr>\n<tr>\n<td data-label=\"Zastaral\u00fd tag\"><code>&lt;frame&gt;<\/code>, <code>&lt;frameset&gt;<\/code><\/td>\n<td data-label=\"Co d\u011blal\">Rozd\u011blen\u00ed okna na r\u00e1my<\/td>\n<td data-label=\"\u010c\u00edm nahradit\">B\u011b\u017en\u00e1 sazba; v p\u0159\u00edpad\u011b pot\u0159eby <code>&lt;iframe&gt;<\/code><\/td>\n<\/tr>\n<tr>\n<td data-label=\"Zastaral\u00fd tag\"><code>&lt;applet&gt;<\/code><\/td>\n<td data-label=\"Co d\u011blal\">Java aplet<\/td>\n<td data-label=\"\u010c\u00edm nahradit\">Nen\u00ed t\u0159eba; pro ciz\u00ed obsah <code>&lt;iframe&gt;<\/code><\/td>\n<\/tr>\n<tr>\n<td data-label=\"Zastaral\u00fd tag\"><code>&lt;acronym&gt;<\/code><\/td>\n<td data-label=\"Co d\u011blal\">Akronym<\/td>\n<td data-label=\"\u010c\u00edm nahradit\"><code>&lt;abbr&gt;<\/code><\/td>\n<\/tr>\n<tr>\n<td data-label=\"Zastaral\u00fd tag\"><code>&lt;dir&gt;<\/code><\/td>\n<td data-label=\"Co d\u011blal\">Seznam adres\u00e1\u0159\u016f<\/td>\n<td data-label=\"\u010c\u00edm nahradit\"><code>&lt;ul&gt;<\/code><\/td>\n<\/tr>\n<tr>\n<td data-label=\"Zastaral\u00fd tag\">Atributy <code>align<\/code>, <code>bgcolor<\/code>, <code>border<\/code>, <code>width<\/code> u tabulek a blok\u016f<\/td>\n<td data-label=\"Co d\u011blal\">Vzhled v k\u00f3du<\/td>\n<td data-label=\"\u010c\u00edm nahradit\">Zcela v CSS<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<p>Vlastn\u00ed p\u0159\u00edb\u011bh m\u00e1 <code>&lt;hgroup&gt;<\/code>. Byl ze specifikace vy\u0159azen, pak vr\u00e1cen s jin\u00fdm v\u00fdznamem a dnes pro dvojici \u201enadpis plus podnadpis\u201c sta\u010d\u00ed oby\u010dejn\u00fd <code>&lt;p&gt;<\/code> vedle nadpisu.<\/p>\n<h2 id=\"caste-chyby-v-kodu\">\u010cast\u00e9 chyby v k\u00f3du<\/h2>\n<ul>\n<li><strong>N\u011bkolik <code>&lt;h1&gt;<\/code> na str\u00e1nce.<\/strong> Nadpis prvn\u00ed \u00farovn\u011b popisuje celou str\u00e1nku a je jedin\u00fd. V\u0161e ostatn\u00ed pat\u0159\u00ed o \u00farove\u0148 n\u00ed\u017e.<\/li>\n<li><strong>Blok uvnit\u0159 odstavce.<\/strong> <code>&lt;div&gt;<\/code> uvnit\u0159 <code>&lt;p&gt;<\/code> prohl\u00ed\u017ee\u010d ml\u010dky oprav\u00ed t\u00edm, \u017ee odstavec zav\u0159e d\u0159\u00edv \u2014 a sazba se rozjede bez viditeln\u00e9 p\u0159\u00ed\u010diny.<\/li>\n<li><strong><code>&lt;br&gt;<\/code> m\u00edsto odstup\u016f.<\/strong> T\u0159i zalomen\u00ed za sebou se sna\u017e\u00ed k\u00f3dem ud\u011blat to, co d\u011bl\u00e1 <code>margin<\/code>.<\/li>\n<li><strong>Obr\u00e1zek bez <code>alt<\/code>.<\/strong> Ztr\u00e1c\u00ed se p\u0159\u00edstupnost i n\u00e1v\u0161t\u011bvnost z vyhled\u00e1v\u00e1n\u00ed obr\u00e1zk\u016f.<\/li>\n<li><strong>Tla\u010d\u00edtko ud\u011blan\u00e9 z <code>&lt;div&gt;<\/code>.<\/strong> Takov\u00e9 \u201etla\u010d\u00edtko\u201c pot\u0159ebuje obsluhu kl\u00e1vesnice, <code>role<\/code> a <code>tabindex<\/code>, zat\u00edmco <code>&lt;button&gt;<\/code> to um\u00ed rovnou.<\/li>\n<li><strong>Odkaz bez <code>href<\/code>.<\/strong> Prvek vypadne z navigace kl\u00e1vesnic\u00ed. Nem\u00e1te adresu \u2014 pou\u017eijte <code>&lt;button&gt;<\/code>.<\/li>\n<li><strong>Tabulka pro sazbu.<\/strong> Na mobilu se takov\u00fd k\u00f3d nep\u0159estav\u00ed a \u010dte\u010dka jej p\u0159e\u010dte jako datovou tabulku.<\/li>\n<li><strong><code>&lt;div&gt;<\/code> m\u00edsto s\u00e9mantiky.<\/strong> Str\u00e1nka ze sam\u00fdch <code>div<\/code> funguje, ale p\u0159ijde o v\u0161e, co p\u0159in\u00e1\u0161\u00ed zna\u010dkov\u00e1n\u00ed v\u00fdznamu: rychlou navigaci, re\u017eim \u010dten\u00ed, srozumitelnou strukturu pro vyhled\u00e1va\u010d.<\/li>\n<\/ul>\n<h2 id=\"jak-kod-zkontrolovat\">Jak k\u00f3d zkontrolovat<\/h2>\n<p>T\u0159i n\u00e1stroje pokryj\u00ed t\u00e9m\u011b\u0159 v\u0161echny chyby. <a href=\"https:\/\/validator.w3.org\/\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">Valid\u00e1tor W3C<\/a> najde nezav\u0159en\u00e9 tagy, \u0161patn\u00e9 vno\u0159en\u00ed a neexistuj\u00edc\u00ed atributy. Z\u00e1lo\u017eka Accessibility ve v\u00fdvoj\u00e1\u0159sk\u00fdch n\u00e1stroj\u00edch prohl\u00ed\u017ee\u010de uk\u00e1\u017ee strom p\u0159\u00edstupnosti \u2014 to, co \u201evid\u00ed\u201c \u010dte\u010dka obrazovky. Lighthouse v Chromu zkontroluje s\u00e9mantiku spolu s rychlost\u00ed a vr\u00e1t\u00ed seznam konkr\u00e9tn\u00edch p\u0159ipom\u00ednek.<\/p>\n<p>Jedna dom\u00e1c\u00ed zkou\u0161ka vyd\u00e1 za v\u0161echny: otev\u0159ete str\u00e1nku s vypnut\u00fdm CSS. Pokud se dokument i bez styl\u016f \u010dte shora dol\u016f jako smyslupln\u00fd text s nadpisy, seznamy a popisky obr\u00e1zk\u016f, je k\u00f3d v po\u0159\u00e1dku. Pokud se zm\u011bn\u00ed v ka\u0161i, nejde o styly, ale o tagy.<\/p>\n<h2 id=\"strucne-to-hlavni\">Stru\u010dn\u011b to hlavn\u00ed<\/h2>\n<p>Sta\u010d\u00ed m\u00edt v hlav\u011b n\u011bkolik pravidel a zbytek z nich vyplyne s\u00e1m:<\/p>\n<ul>\n<li><strong>Tag se vol\u00ed podle v\u00fdznamu, ne podle vzhledu.<\/strong> Vzhled kter\u00e9hokoli prvku zm\u011bn\u00ed jeden \u0159\u00e1dek CSS, zat\u00edmco v\u00fdznam ulo\u017een\u00fd v tagu \u010dtou stroje \u2014 a styly jej nezm\u011bn\u00ed.<\/li>\n<li><strong>Strukturu str\u00e1nky tvo\u0159\u00ed <code>header<\/code>, <code>nav<\/code>, <code>main<\/code>, <code>article<\/code>, <code>section<\/code>, <code>aside<\/code>, <code>footer<\/code>.<\/strong> <code>&lt;div&gt;<\/code> zb\u00fdv\u00e1 na p\u0159\u00edpady, kdy se nehod\u00ed \u017e\u00e1dn\u00fd z nich, ne naopak.<\/li>\n<li><strong>Nadpisy tvo\u0159\u00ed osnovu dokumentu.<\/strong> Jeden <code>h1<\/code>, d\u00e1l popo\u0159ad\u011b, bez p\u0159eskakov\u00e1n\u00ed \u00farovn\u00ed.<\/li>\n<li><strong>T\u0159i atributy, na kter\u00e9 se zapom\u00edn\u00e1 nej\u010dast\u011bji:<\/strong> <code>alt<\/code> u obr\u00e1zku, <code>for<\/code> u popisku pole a <code>title<\/code> u r\u00e1mu. Ka\u017ed\u00fd zabere dv\u011b minuty a p\u0159\u00edstupnost znateln\u011b zlep\u0161\u00ed.<\/li>\n<li><strong>Formul\u00e1\u0159 se um\u00ed zkontrolovat s\u00e1m.<\/strong> Spr\u00e1vn\u00fd <code>type<\/code> spolu s <code>required<\/code> a <code>pattern<\/code> pokryje v\u011bt\u0161inu validace bez JavaScriptu \u2014 kontrolu na serveru ale nenahrad\u00ed.<\/li>\n<li><strong>V\u0161echno kolem vzhledu pat\u0159\u00ed do CSS.<\/strong> Pr\u00e1v\u011b proto ze specifikace ode\u0161ly <code>font<\/code>, <code>center<\/code> a jejich soused\u00e9.<\/li>\n<\/ul>\n<p>Dobr\u00fd k\u00f3d nen\u00ed skoro vid\u011bt: web prost\u011b funguje \u2014 rychle se na\u010dte, dob\u0159e se \u010dte na telefonu, spr\u00e1vn\u011b vypad\u00e1 ve v\u00fdsledc\u00edch hled\u00e1n\u00ed i v messengeru a je pou\u017eiteln\u00fd se \u010dte\u010dkou obrazovky. \u0160patn\u00e9ho k\u00f3du si v\u0161imnete hned, l\u00e9\u010d\u00ed se ale obvykle jinde, ne\u017e to bol\u00ed: opravuj\u00ed se styly, p\u0159id\u00e1vaj\u00ed skripty, instaluj\u00ed pluginy \u2014 zat\u00edmco p\u0159\u00ed\u010dinou jsou dva t\u0159i \u0161patn\u011b zvolen\u00e9 tagy.<\/p>\n<p>Zkontrolujte svou str\u00e1nku hned te\u010f: otev\u0159ete zdrojov\u00fd k\u00f3d a spo\u010d\u00edtejte, kolik je v n\u011bm <code>&lt;div&gt;<\/code> a kolik tag\u016f s v\u00fdznamem. P\u0159eva\u017euj\u00ed-li prvn\u00ed v pom\u011bru t\u0159i ku jedn\u00e9, projd\u011bte tento \u010dl\u00e1nek od za\u010d\u00e1tku po sekc\u00edch. Cel\u00fd web p\u0159episovat nebudete muset: obvykle sta\u010d\u00ed p\u0159ejmenovat n\u011bkolik kontejner\u016f a doplnit zapomenut\u00e9 atributy.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>V\u0161echny aktu\u00e1ln\u00ed tagy HTML5 s p\u0159\u00edklady k\u00f3du a sch\u00e9maty: struktura dokumentu, s\u00e9mantick\u00e9 zna\u010dkov\u00e1n\u00ed, formul\u00e1\u0159e, tabulky, m\u00e9dia a zastaral\u00e9 tagy s n\u00e1hradou.<\/p>\n","protected":false},"author":3,"featured_media":12018,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[213],"tags":[],"class_list":["post-11969","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-html-css-cz"],"acf":[],"_links":{"self":[{"href":"https:\/\/webmister.pro\/cz\/wp-json\/wp\/v2\/posts\/11969","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webmister.pro\/cz\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webmister.pro\/cz\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webmister.pro\/cz\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/webmister.pro\/cz\/wp-json\/wp\/v2\/comments?post=11969"}],"version-history":[{"count":2,"href":"https:\/\/webmister.pro\/cz\/wp-json\/wp\/v2\/posts\/11969\/revisions"}],"predecessor-version":[{"id":11981,"href":"https:\/\/webmister.pro\/cz\/wp-json\/wp\/v2\/posts\/11969\/revisions\/11981"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webmister.pro\/cz\/wp-json\/wp\/v2\/media\/12018"}],"wp:attachment":[{"href":"https:\/\/webmister.pro\/cz\/wp-json\/wp\/v2\/media?parent=11969"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webmister.pro\/cz\/wp-json\/wp\/v2\/categories?post=11969"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webmister.pro\/cz\/wp-json\/wp\/v2\/tags?post=11969"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}