{"id":44161,"date":"2025-12-26T17:01:31","date_gmt":"2025-12-26T16:01:31","guid":{"rendered":"https:\/\/www.derivaty.sk\/?p=44161"},"modified":"2026-01-05T14:03:11","modified_gmt":"2026-01-05T13:03:11","slug":"html-a-css-zaklady-a-best-practices-moderniho-layoutu","status":"publish","type":"post","link":"https:\/\/www.autoskoly.sk\/news\/html-a-css-zaklady-a-best-practices-moderniho-layoutu\/","title":{"rendered":"HTML a CSS: Z\u00e1klady a best practices modern\u00edho layoutu"},"content":{"rendered":"<h2>Co je HTML a CSS: pevn\u00e9 z\u00e1klady webu<\/h2>\n<p><strong>HTML (HyperText Markup Language)<\/strong> definuje <em>strukturu a v\u00fdznam<\/em> obsahu webov\u00e9 str\u00e1nky pomoc\u00ed s\u00e9mantick\u00fdch zna\u010dek (nap\u0159. <code>&lt;article&gt;<\/code>, <code>&lt;nav&gt;<\/code>, <code>&lt;header&gt;<\/code>). <strong>CSS (Cascading Style Sheets)<\/strong> ur\u010duje <em>prezentaci<\/em> tohoto obsahu &#8211; barvy, rozvr\u017een\u00ed, typografii, animace a responsivn\u00ed chov\u00e1n\u00ed. Spole\u010dn\u011b tvo\u0159\u00ed odd\u011blen\u00ed <em>obsahu<\/em> a <em>prezentace<\/em>, co\u017e zvy\u0161uje udr\u017eovatelnost, p\u0159\u00edstupnost i v\u00fdkon.<\/p>\n<h2>S\u00e9mantick\u00e1 struktura HTML: od kostry k v\u00fdznamu<\/h2>\n<ul>\n<li><strong>Hlavn\u00ed bloky:<\/strong> <code>&lt;header&gt;<\/code>, <code>&lt;main&gt;<\/code>, <code>&lt;footer&gt;<\/code>, <code>&lt;section&gt;<\/code>, <code>&lt;article&gt;<\/code>, <code>&lt;aside&gt;<\/code> zlep\u0161uj\u00ed \u010ditelnost pro \u010dte\u010dky obrazovky a SEO.<\/li>\n<li><strong>Navigace:<\/strong> <code>&lt;nav&gt;<\/code> pro prim\u00e1rn\u00ed i sekund\u00e1rn\u00ed menu; pou\u017e\u00edvejte popisn\u00e9 texty odkaz\u016f (nap\u0159. \u201eO n\u00e1s\u201c m\u00edsto \u201eKlikn\u011bte zde\u201c).<\/li>\n<li><strong>Titulky a hierarchie:<\/strong> udr\u017eujte logickou posloupnost nadpis\u016f <code>&lt;h2&gt;<\/code>\u2026<code>&lt;h6&gt;<\/code> v r\u00e1mci sekc\u00ed; ka\u017ed\u00fd dokument m\u00e1 m\u00edt jeden hlavn\u00ed \u00fa\u010del a jasnou strukturu.<\/li>\n<li><strong>Obr\u00e1zky a m\u00e9dia:<\/strong> <code>&lt;img alt=\"popis\"&gt;<\/code> s v\u00fdsti\u017en\u00fdm alternativn\u00edm textem; pro slo\u017eit\u011bj\u0161\u00ed popisy vyu\u017eijte <code>&lt;figure&gt;<\/code> a <code>&lt;figcaption&gt;<\/code>.<\/li>\n<li><strong>Formul\u00e1\u0159e:<\/strong> v\u017edy p\u00e1rujte <code>&lt;label for&gt;<\/code> a <code>&lt;input id&gt;<\/code>; pou\u017e\u00edvejte nativn\u00ed typy (<code>email<\/code>, <code>tel<\/code>, <code>date<\/code>) pro lep\u0161\u00ed UX a validaci.<\/li>\n<\/ul>\n<h2>Metadata, SEO a hlavi\u010dka dokumentu<\/h2>\n<ul>\n<li><strong>Jazyk a k\u00f3dov\u00e1n\u00ed:<\/strong> <code>&lt;html lang=\"cs\"&gt;<\/code>, <code>&lt;meta charset=\"utf-8\"&gt;<\/code>.<\/li>\n<li><strong>Viewport a responsivita:<\/strong> <code>&lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1\"&gt;<\/code>.<\/li>\n<li><strong>Popisky:<\/strong> <code>&lt;title&gt;<\/code> a <code>&lt;meta name=\"description\"&gt;<\/code> s jasn\u00fdm sd\u011blen\u00edm; otev\u0159en\u00e9 grafy (<code>og:<\/code>) a Twitter karty pro sd\u00edlen\u00ed.<\/li>\n<li><strong>Strukturovan\u00e1 data:<\/strong> JSON-LD (schema.org) pro zv\u00fdrazn\u011bn\u00ed v SERP (ud\u00e1losti, produkty, \u010dl\u00e1nky).<\/li>\n<li><strong>Kanoni\u010dnost a indexace:<\/strong> <code>&lt;link rel=\"canonical\"&gt;<\/code>, direktivy <code>robots<\/code>, kvalitn\u00ed intern\u00ed prolinkov\u00e1n\u00ed.<\/li>\n<\/ul>\n<h2>Kask\u00e1da v CSS: po\u0159ad\u00ed, d\u011bdi\u010dnost a specificita<\/h2>\n<ul>\n<li><strong>Po\u0159ad\u00ed zdroj\u016f:<\/strong> pozd\u011bji na\u010dten\u00e1 pravidla p\u0159episuj\u00ed d\u0159\u00edv\u011bj\u0161\u00ed (pokud je specificita shodn\u00e1).<\/li>\n<li><strong>D\u011bdi\u010dnost:<\/strong> vlastnosti jako <code>color<\/code> a <code>font-family<\/code> se d\u011bd\u00ed; rozvr\u017een\u00ed (nap\u0159. <code>margin<\/code>) typicky nikoli.<\/li>\n<li><strong>Specificita:<\/strong> inline styly &gt; ID selektory &gt; class\/atribut\/pseudo-t\u0159\u00eddy &gt; tag selektory; pou\u017e\u00edvejte co nejni\u017e\u0161\u00ed specificitu pro snadn\u00e9 p\u0159episov\u00e1n\u00ed.<\/li>\n<li><strong>!important:<\/strong> nouzov\u00fd n\u00e1stroj, kter\u00fd komplikuje \u00fadr\u017ebu; preferujte refaktor pravidel a architekturu styl\u016f.<\/li>\n<\/ul>\n<h2>Selektory a pseudo-t\u0159\u00eddy: p\u0159esn\u00e9 c\u00edlen\u00ed bez p\u0159est\u0159el\u016f<\/h2>\n<ul>\n<li><strong>Z\u00e1klad:<\/strong> typov\u00e9 selektory (<code>p<\/code>), t\u0159\u00eddy (<code>.btn<\/code>), ID (<code>#app<\/code>), potomci a sourozenci (<code>.card &gt; h2<\/code>, <code>+ \/ ~<\/code>).<\/li>\n<li><strong>Atributov\u00e9 selektory:<\/strong> nap\u0159. <code>a[href^=\"https\"]<\/code>, <code>input[type=\"search\"]<\/code> pro c\u00edlen\u00ed bez extra t\u0159\u00edd.<\/li>\n<li><strong>Pseudo-t\u0159\u00eddy UI:<\/strong> <code>:hover<\/code>, <code>:focus<\/code>, <code>:focus-visible<\/code>, <code>:disabled<\/code>, <code>:checked<\/code> zlep\u0161uj\u00ed pou\u017eitelnost.<\/li>\n<li><strong>Struktur\u00e1ln\u00ed pseudo-t\u0159\u00eddy:<\/strong> <code>:first-child<\/code>, <code>:last-of-type<\/code>, <code>:nth-child()<\/code> pro tabulky a seznamy.<\/li>\n<li><strong>Pseudo-prvky:<\/strong> <code>::before<\/code>, <code>::after<\/code>, <code>::marker<\/code> k dekorac\u00edm bez zbyte\u010dn\u00e9ho HTML.<\/li>\n<\/ul>\n<h2>Box model a typografie: z\u00e1kladn\u00ed stavebnice vzhledu<\/h2>\n<ul>\n<li><strong>Box model:<\/strong> obsah \u2192 v\u00fdpl\u0148 (<code>padding<\/code>) \u2192 okraj (<code>border<\/code>) \u2192 mezera (<code>margin<\/code>). Nastavte <code>box-sizing: border-box<\/code> pro p\u0159edv\u00eddateln\u00e9 po\u010d\u00edt\u00e1n\u00ed.<\/li>\n<li><strong>Typografie:<\/strong> \u0161k\u00e1lujte promy\u0161len\u011b (<code>clamp()<\/code> pro fluidn\u00ed velikosti), line-height 1.4\u20131.8 dle fontu, kontrast a d\u00e9lku \u0159\u00e1dku kolem 60\u201380 znak\u016f.<\/li>\n<li><strong>Webov\u00e9 fonty:<\/strong> <code>font-display: swap<\/code> pro zamezen\u00ed FOIT; zva\u017ete prom\u011bnn\u00e9 fonty (variable fonts) pro men\u0161\u00ed po\u010det soubor\u016f.<\/li>\n<\/ul>\n<h2>Modern\u00ed layout: Flexbox a CSS Grid<\/h2>\n<ul>\n<li><strong>Flexbox:<\/strong> jednorozm\u011brn\u00e9 rozvr\u017een\u00ed (osy, centrov\u00e1n\u00ed, mezery p\u0159es <code>gap<\/code>), ide\u00e1ln\u00ed pro \u0159\u00e1dky karet, navigace a formy.<\/li>\n<li><strong>CSS Grid:<\/strong> dvourozm\u011brn\u00e9 m\u0159\u00ed\u017eky, pojmenovan\u00e9 oblasti, <code>minmax()<\/code>, <code>auto-fit<\/code>\/<code>auto-fill<\/code> pro responsivn\u00ed \u0161ablony bez media dotaz\u016f.<\/li>\n<li><strong>Subgrid:<\/strong> konsistentn\u00ed zarovn\u00e1n\u00ed vno\u0159en\u00fdch prvk\u016f nap\u0159\u00ed\u010d slo\u017eit\u00fdmi komponentami.<\/li>\n<li><strong>Mezery:<\/strong> preferujte <code>gap<\/code> p\u0159ed margin \u201eh\u0159eb\u00ednky\u201c pro jednodu\u0161\u0161\u00ed \u00fadr\u017ebu.<\/li>\n<\/ul>\n<h2>Responsivn\u00ed design: media a container queries<\/h2>\n<ul>\n<li><strong>Media queries:<\/strong> rozvr\u017een\u00ed a typografie pro r\u016fzn\u00e9 \u0161\u00ed\u0159ky; pracujte mobile-first (<code>@media (min-width: ...)<\/code>).<\/li>\n<li><strong>Container queries:<\/strong> stylujte komponenty dle \u0161\u00ed\u0159ky jejich <em>kontejneru<\/em>, nikoli okna; zvy\u0161uje modularitu a reusabilitu.<\/li>\n<li><strong>Fluidn\u00ed jednotky:<\/strong> <code>rem<\/code>, <code>vw<\/code>, <code>ch<\/code>; funkce <code>clamp(min, pref, max)<\/code> pro plynul\u00e9 \u0161k\u00e1lov\u00e1n\u00ed.<\/li>\n<li><strong>Preferovan\u00e9 re\u017eimy:<\/strong> respektujte <code>prefers-color-scheme<\/code> (sv\u011btl\u00fd\/tmav\u00fd) a <code>prefers-reduced-motion<\/code> pro dostupnost.<\/li>\n<\/ul>\n<h2>Prom\u011bnn\u00e9 CSS a kask\u00e1dov\u00e9 vrstvy<\/h2>\n<ul>\n<li><strong>Custom properties:<\/strong> <code>--color-primary<\/code>, <code>--space-2<\/code> umo\u017e\u0148uj\u00ed t\u00e9mata, dark mode a konzistentn\u00ed designov\u00fd syst\u00e9m.<\/li>\n<li><strong>Kask\u00e1dov\u00e9 vrstvy (<code>@layer<\/code>):<\/strong> definujte po\u0159ad\u00ed (nap\u0159. <code>@layer reset, base, components, utilities;<\/code>) a minimalizujte konflikty.<\/li>\n<li><strong>Po\u010d\u00edtan\u00e9 hodnoty:<\/strong> <code>calc()<\/code>, <code>min()<\/code>, <code>max()<\/code> pro adaptivn\u00ed rozm\u011bry bez zbyte\u010dn\u00fdch breakpoint\u016f.<\/li>\n<\/ul>\n<h2>Animace a interakce bez JavaScriptu<\/h2>\n<ul>\n<li><strong>P\u0159echody:<\/strong> <code>transition: property duration timing-function<\/code> pro jemn\u00e9 zm\u011bny stavu.<\/li>\n<li><strong>Kl\u00ed\u010dov\u00e9 sn\u00edmky:<\/strong> <code>@keyframes<\/code> pro slo\u017eit\u011bj\u0161\u00ed pohyby; dbejte na <code>transform<\/code> a <code>opacity<\/code> kv\u016fli v\u00fdkonu.<\/li>\n<li><strong>Akcent na p\u0159\u00edstupnost:<\/strong> nab\u00edzejte <em>redukovan\u00e9 pohyby<\/em> a nikdy nespol\u00e9hejte na animaci k p\u0159enosu z\u00e1sadn\u00ed informace.<\/li>\n<\/ul>\n<h2>P\u0159\u00edstupnost (a11y) a ARIA v praxi<\/h2>\n<ul>\n<li><strong>S\u00e9mantika na prvn\u00edm m\u00edst\u011b:<\/strong> nativn\u00ed elementy p\u0159ed rolemi ARIA; ARIA \u201edopl\u0148uje\u201c, nenahrazuje HTML.<\/li>\n<li><strong>Fokus a kl\u00e1vesnice:<\/strong> <code>:focus-visible<\/code>, logick\u00e1 posloupnost, viditeln\u00e9 obrysy; neodstra\u0148ujte outline bez n\u00e1hrady.<\/li>\n<li><strong>Kontrast a barvy:<\/strong> dodr\u017eujte minim\u00e1ln\u00ed kontrast; nep\u0159en\u00e1\u0161ejte informaci pouze barvou.<\/li>\n<li><strong>\u017div\u00fd obsah:<\/strong> pou\u017e\u00edvejte <code>aria-live<\/code> pro dynamick\u00e9 zpr\u00e1vy a validace formul\u00e1\u0159\u016f.<\/li>\n<\/ul>\n<h2>Architektura styl\u016f: \u0161k\u00e1lovatelnost a \u00fadr\u017eba<\/h2>\n<ul>\n<li><strong>Metodiky:<\/strong> BEM (<code>.blok__prvek--modifikator<\/code>), ITCSS (vrstven\u00ed od resetu po utility), OOCSS pro znovupou\u017eitelnost.<\/li>\n<li><strong>Modularita:<\/strong> komponentov\u00e9 styly na \u00farovni UI prvk\u016f; minimalizujte glob\u00e1ln\u00ed selektory.<\/li>\n<li><strong>Design tokens:<\/strong> zdroj pravdy pro barvy, mezery, radiusy, st\u00edny; sd\u00edlen\u00ed nap\u0159\u00ed\u010d platformami.<\/li>\n<\/ul>\n<h2>V\u00fdkon a best practices<\/h2>\n<ul>\n<li><strong>Kritick\u00e9 CSS:<\/strong> inline pouze nezbytn\u00e9 styly pro prvn\u00ed vykreslen\u00ed; zbytek na\u010dt\u011bte asynchronn\u011b.<\/li>\n<li><strong>Minimalizace a deduplikace:<\/strong> odstra\u0148te nepou\u017eit\u00e9 CSS (nap\u0159. b\u011bhem build procesu); preferujte men\u0161\u00ed specifitu a krat\u0161\u00ed kask\u00e1du.<\/li>\n<li><strong>Obr\u00e1zky:<\/strong> modern\u00ed form\u00e1ty (AVIF\/WebP), atributy <code>width<\/code>\/<code>height<\/code>, <code>loading=\"lazy\"<\/code>, <code>decoding=\"async\"<\/code>.<\/li>\n<li><strong>Reflow a repainty:<\/strong> optimalizujte layout zm\u011bny p\u0159es <code>transform<\/code>, vyh\u00fdbejte se n\u00e1kladn\u00fdm vlastnostem (nap\u0159. <code>box-shadow<\/code> ve velk\u00e9m rozsahu).<\/li>\n<\/ul>\n<h2>Kompatibilita a progresivn\u00ed vylep\u0161en\u00ed<\/h2>\n<ul>\n<li><strong>Prohl\u00ed\u017ee\u010dov\u00e1 podpora:<\/strong> pou\u017e\u00edvejte <code>@supports()<\/code> pro podm\u00edn\u011bn\u00e9 styly a fallbacky.<\/li>\n<li><strong>Autoprefixer a PostCSS:<\/strong> generuje vendor prefixy dle c\u00edlov\u00fdch prohl\u00ed\u017ee\u010d\u016f; sni\u017euje technick\u00fd dluh.<\/li>\n<li><strong>Progresivn\u00ed vylep\u0161en\u00ed:<\/strong> z\u00e1kladn\u00ed UX funguje v\u0161ude, pokro\u010dil\u00e9 efekty se aktivuj\u00ed tam, kde jsou podporov\u00e1ny.<\/li>\n<\/ul>\n<h2>Formul\u00e1\u0159e, validace a UX detail<\/h2>\n<ul>\n<li><strong>Typy vstup\u016f:<\/strong> <code>email<\/code>, <code>number<\/code>, <code>range<\/code>, <code>date<\/code> zlep\u0161uj\u00ed n\u00e1pov\u011bdu i kl\u00e1vesnice na mobilech.<\/li>\n<li><strong>Stavy pol\u00ed:<\/strong> styly pro <code>:focus<\/code>, <code>:valid<\/code>, <code>:invalid<\/code>, <code>:disabled<\/code> a chybov\u00e9 zpr\u00e1vy zvy\u0161uj\u00ed srozumitelnost.<\/li>\n<li><strong>Velikost klikac\u00edch ploch:<\/strong> min. ~44\u00d744 px pro dotyk; zarovnejte label klikac\u00ed na cel\u00fd \u0159\u00e1dek.<\/li>\n<\/ul>\n<h2>Bezpe\u010dnost HTML\/CSS na \u00farovni \u0161ablon<\/h2>\n<ul>\n<li><strong>Sanitace vstup\u016f:<\/strong> nikdy nevkl\u00e1dejte neov\u011b\u0159en\u00fd HTML string do DOM; vyhnete se XSS.<\/li>\n<li><strong>Content Security Policy (CSP):<\/strong> omezte zdroje styl\u016f a skript\u016f; preferujte nonce\/hashy nam\u00edsto inline.<\/li>\n<li><strong>Atributy bezpe\u010dn\u00fdch odkaz\u016f:<\/strong> <code>rel=\"noopener noreferrer\"<\/code> pro <code>target=\"_blank\"<\/code>.<\/li>\n<\/ul>\n<h2>N\u00e1stroje, workflow a automatizace<\/h2>\n<ul>\n<li><strong>Build pipeline:<\/strong> PostCSS, Autoprefixer, minifikace, extrakce kritick\u00e9ho CSS.<\/li>\n<li><strong>Linting a stylov\u00e9 konvence:<\/strong> Stylelint, Prettier; spole\u010dn\u00e1 pravidla pro konzistentn\u00ed k\u00f3d.<\/li>\n<li><strong>Design syst\u00e9my:<\/strong> dokumentace komponent, \u017eiv\u00e9 n\u00e1hledy, katalogizace vzor\u016f.<\/li>\n<li><strong>Verzov\u00e1n\u00ed a CI\/CD:<\/strong> kontrola regrese styl\u016f (vizu\u00e1ln\u00ed testy), kontrola velikosti bundl\u016f.<\/li>\n<\/ul>\n<h2>Mezin\u00e1rodn\u00ed prost\u0159ed\u00ed a lokalizace<\/h2>\n<ul>\n<li><strong>Sm\u011br psan\u00ed:<\/strong> podpora LTR\/RTL pomoc\u00ed <code>dir<\/code> a logick\u00fdch vlastnost\u00ed (<code>margin-inline<\/code>, <code>padding-block<\/code>).<\/li>\n<li><strong>Jednotky a form\u00e1ty:<\/strong> m\u00edstn\u00ed form\u00e1t data\/\u010dasu a \u010d\u00edsel; dostate\u010dn\u00fd prostor pro del\u0161\u00ed \u0159et\u011bzce v jin\u00fdch jazyc\u00edch.<\/li>\n<\/ul>\n<h2>Checklist p\u0159ed nasazen\u00edm<\/h2>\n<ul>\n<li>Validn\u00ed HTML, s\u00e9mantika, alt texty a titulky sekc\u00ed.<\/li>\n<li>Dostate\u010dn\u00fd kontrast, fokusovatelnost, kl\u00e1vesov\u00e1 navigace.<\/li>\n<li>Kritick\u00e9 CSS inline, zbytek odlo\u017een\u011b; minifikace a deduplikace.<\/li>\n<li>Responsivn\u00ed chov\u00e1n\u00ed ov\u011b\u0159en\u00e9 na \u0161k\u00e1le \u0161\u00ed\u0159ek a za\u0159\u00edzen\u00edch.<\/li>\n<li>Bezpe\u010dnost odkaz\u016f, CSP, bez inline styl\u016f tam, kde to politika vy\u017eaduje.<\/li>\n<li>Automatick\u00e9 testy styl\u016f a vizu\u00e1ln\u00ed regrese v CI.<\/li>\n<\/ul>\n<h2>Z\u00e1v\u011br: udr\u017eiteln\u00fd web jako c\u00edl<\/h2>\n<p>Kombinace <strong>s\u00e9mantick\u00e9ho HTML<\/strong> a <strong>disciplinovan\u00e9ho CSS<\/strong> vytv\u00e1\u0159\u00ed weby, kter\u00e9 jsou p\u0159\u00edstupn\u00e9, rychl\u00e9, \u0161k\u00e1lovateln\u00e9 a snadno udr\u017eovateln\u00e9. D\u016fraz na kask\u00e1du, n\u00edzkou specificitu, prom\u011bnn\u00e9 a modern\u00ed layouty (Flexbox, Grid, container queries) umo\u017e\u0148uje stav\u011bt robustn\u00ed komponenty, je\u017e se bezbolestn\u011b vyv\u00edjej\u00ed. Kdy\u017e tyto principy spoj\u00edte s automatizovan\u00fdm workflow a pe\u010dliv\u00fdm testov\u00e1n\u00edm, vznik\u00e1 dlouhodob\u011b udr\u017eiteln\u00e1 front-endov\u00e1 z\u00e1kladna.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Jak ps\u00e1t \u010dist\u00e9, p\u0159\u00edstupn\u00e9 HTML a modern\u00ed CSS s Gridem a Flexboxem. Tipy na strukturu, BEM a v\u00fdkon, aby weby byly rychl\u00e9 a \u010diteln\u00e9 na ka\u017ed\u00e9m za\u0159\u00edzen\u00ed.<\/p>\n","protected":false},"author":46,"featured_media":84161,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[617],"tags":[1910,1911,1912,1913,697,1914,1915,1916],"class_list":["post-44161","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-telekomunikacie","tag-bem","tag-flexbox","tag-grid","tag-html-a-css","tag-performance","tag-pristupnost","tag-responsivita","tag-semantika"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>HTML a CSS: Z\u00e1klady a best practices modern\u00edho layoutu - Auto\u0161koly.sk<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.autoskoly.sk\/news\/html-a-css-zaklady-a-best-practices-moderniho-layoutu\/\" \/>\n<meta property=\"og:locale\" content=\"sk_SK\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"HTML a CSS: Z\u00e1klady a best practices modern\u00edho layoutu - Auto\u0161koly.sk\" \/>\n<meta property=\"og:description\" content=\"Jak ps\u00e1t \u010dist\u00e9, p\u0159\u00edstupn\u00e9 HTML a modern\u00ed CSS s Gridem a Flexboxem. Tipy na strukturu, BEM a v\u00fdkon, aby weby byly rychl\u00e9 a \u010diteln\u00e9 na ka\u017ed\u00e9m za\u0159\u00edzen\u00ed.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.autoskoly.sk\/news\/html-a-css-zaklady-a-best-practices-moderniho-layoutu\/\" \/>\n<meta property=\"og:site_name\" content=\"Auto\u0161koly.sk\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/vrtulniky\/\" \/>\n<meta property=\"article:published_time\" content=\"2025-12-26T16:01:31+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-01-05T13:03:11+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.autoskoly.sk\/news\/wp-content\/uploads\/2025\/12\/vzdelavanie-vysoka-skola-4161.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1600\" \/>\n\t<meta property=\"og:image:height\" content=\"969\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Veronika Benkov\u00e1\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Autor\" \/>\n\t<meta name=\"twitter:data1\" content=\"Veronika Benkov\u00e1\" \/>\n\t<meta name=\"twitter:label2\" content=\"Predpokladan\u00fd \u010das \u010d\u00edtania\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 min\u00fat\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.autoskoly.sk\\\/news\\\/html-a-css-zaklady-a-best-practices-moderniho-layoutu\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.autoskoly.sk\\\/news\\\/html-a-css-zaklady-a-best-practices-moderniho-layoutu\\\/\"},\"author\":{\"name\":\"Veronika Benkov\u00e1\",\"@id\":\"https:\\\/\\\/www.autoskoly.sk\\\/news\\\/#\\\/schema\\\/person\\\/73d308367c26475e68925c6854f42643\"},\"headline\":\"HTML a CSS: Z\u00e1klady a best practices modern\u00edho layoutu\",\"datePublished\":\"2025-12-26T16:01:31+00:00\",\"dateModified\":\"2026-01-05T13:03:11+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.autoskoly.sk\\\/news\\\/html-a-css-zaklady-a-best-practices-moderniho-layoutu\\\/\"},\"wordCount\":1189,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.autoskoly.sk\\\/news\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.autoskoly.sk\\\/news\\\/html-a-css-zaklady-a-best-practices-moderniho-layoutu\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.autoskoly.sk\\\/news\\\/wp-content\\\/uploads\\\/2025\\\/12\\\/vzdelavanie-vysoka-skola-4161.jpg\",\"keywords\":[\"BEM\",\"Flexbox\",\"Grid\",\"HTML a CSS\",\"Performance\",\"pr\u00edstupnos\u0165\",\"responsivita\",\"semantika\"],\"articleSection\":[\"Telekomunik\u00e1cie\"],\"inLanguage\":\"sk-SK\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.autoskoly.sk\\\/news\\\/html-a-css-zaklady-a-best-practices-moderniho-layoutu\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.autoskoly.sk\\\/news\\\/html-a-css-zaklady-a-best-practices-moderniho-layoutu\\\/\",\"url\":\"https:\\\/\\\/www.autoskoly.sk\\\/news\\\/html-a-css-zaklady-a-best-practices-moderniho-layoutu\\\/\",\"name\":\"HTML a CSS: Z\u00e1klady a best practices modern\u00edho layoutu - Auto\u0161koly.sk\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.autoskoly.sk\\\/news\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.autoskoly.sk\\\/news\\\/html-a-css-zaklady-a-best-practices-moderniho-layoutu\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.autoskoly.sk\\\/news\\\/html-a-css-zaklady-a-best-practices-moderniho-layoutu\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.autoskoly.sk\\\/news\\\/wp-content\\\/uploads\\\/2025\\\/12\\\/vzdelavanie-vysoka-skola-4161.jpg\",\"datePublished\":\"2025-12-26T16:01:31+00:00\",\"dateModified\":\"2026-01-05T13:03:11+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.autoskoly.sk\\\/news\\\/html-a-css-zaklady-a-best-practices-moderniho-layoutu\\\/#breadcrumb\"},\"inLanguage\":\"sk-SK\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.autoskoly.sk\\\/news\\\/html-a-css-zaklady-a-best-practices-moderniho-layoutu\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"sk-SK\",\"@id\":\"https:\\\/\\\/www.autoskoly.sk\\\/news\\\/html-a-css-zaklady-a-best-practices-moderniho-layoutu\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.autoskoly.sk\\\/news\\\/wp-content\\\/uploads\\\/2025\\\/12\\\/vzdelavanie-vysoka-skola-4161.jpg\",\"contentUrl\":\"https:\\\/\\\/www.autoskoly.sk\\\/news\\\/wp-content\\\/uploads\\\/2025\\\/12\\\/vzdelavanie-vysoka-skola-4161.jpg\",\"width\":1600,\"height\":969,\"caption\":\"HTML a CSS: Z\u00e1klady a best practices modern\u00edho layoutu\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.autoskoly.sk\\\/news\\\/html-a-css-zaklady-a-best-practices-moderniho-layoutu\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.autoskoly.sk\\\/news\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"HTML a CSS: Z\u00e1klady a best practices modern\u00edho layoutu\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.autoskoly.sk\\\/news\\\/#website\",\"url\":\"https:\\\/\\\/www.autoskoly.sk\\\/news\\\/\",\"name\":\"Auto\u0161koly.sk\",\"description\":\"Web o cestovan\u00ed, podnikan\u00ed, doprave a motorizme\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.autoskoly.sk\\\/news\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.autoskoly.sk\\\/news\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"sk-SK\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.autoskoly.sk\\\/news\\\/#organization\",\"name\":\"Auto\u0161koly.sk\",\"url\":\"https:\\\/\\\/www.autoskoly.sk\\\/news\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"sk-SK\",\"@id\":\"https:\\\/\\\/www.autoskoly.sk\\\/news\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.autoskoly.sk\\\/news\\\/wp-content\\\/uploads\\\/2022\\\/08\\\/news-autoskoly-sk-logo-head.png\",\"contentUrl\":\"https:\\\/\\\/www.autoskoly.sk\\\/news\\\/wp-content\\\/uploads\\\/2022\\\/08\\\/news-autoskoly-sk-logo-head.png\",\"width\":112,\"height\":113,\"caption\":\"Auto\u0161koly.sk\"},\"image\":{\"@id\":\"https:\\\/\\\/www.autoskoly.sk\\\/news\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/vrtulniky\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.autoskoly.sk\\\/news\\\/#\\\/schema\\\/person\\\/73d308367c26475e68925c6854f42643\",\"name\":\"Veronika Benkov\u00e1\",\"url\":\"https:\\\/\\\/www.autoskoly.sk\\\/news\\\/author\\\/veronika-benkova\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"HTML a CSS: Z\u00e1klady a best practices modern\u00edho layoutu - Auto\u0161koly.sk","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.autoskoly.sk\/news\/html-a-css-zaklady-a-best-practices-moderniho-layoutu\/","og_locale":"sk_SK","og_type":"article","og_title":"HTML a CSS: Z\u00e1klady a best practices modern\u00edho layoutu - Auto\u0161koly.sk","og_description":"Jak ps\u00e1t \u010dist\u00e9, p\u0159\u00edstupn\u00e9 HTML a modern\u00ed CSS s Gridem a Flexboxem. Tipy na strukturu, BEM a v\u00fdkon, aby weby byly rychl\u00e9 a \u010diteln\u00e9 na ka\u017ed\u00e9m za\u0159\u00edzen\u00ed.","og_url":"https:\/\/www.autoskoly.sk\/news\/html-a-css-zaklady-a-best-practices-moderniho-layoutu\/","og_site_name":"Auto\u0161koly.sk","article_publisher":"https:\/\/www.facebook.com\/vrtulniky\/","article_published_time":"2025-12-26T16:01:31+00:00","article_modified_time":"2026-01-05T13:03:11+00:00","og_image":[{"width":1600,"height":969,"url":"https:\/\/www.autoskoly.sk\/news\/wp-content\/uploads\/2025\/12\/vzdelavanie-vysoka-skola-4161.jpg","type":"image\/jpeg"}],"author":"Veronika Benkov\u00e1","twitter_card":"summary_large_image","twitter_misc":{"Autor":"Veronika Benkov\u00e1","Predpokladan\u00fd \u010das \u010d\u00edtania":"7 min\u00fat"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.autoskoly.sk\/news\/html-a-css-zaklady-a-best-practices-moderniho-layoutu\/#article","isPartOf":{"@id":"https:\/\/www.autoskoly.sk\/news\/html-a-css-zaklady-a-best-practices-moderniho-layoutu\/"},"author":{"name":"Veronika Benkov\u00e1","@id":"https:\/\/www.autoskoly.sk\/news\/#\/schema\/person\/73d308367c26475e68925c6854f42643"},"headline":"HTML a CSS: Z\u00e1klady a best practices modern\u00edho layoutu","datePublished":"2025-12-26T16:01:31+00:00","dateModified":"2026-01-05T13:03:11+00:00","mainEntityOfPage":{"@id":"https:\/\/www.autoskoly.sk\/news\/html-a-css-zaklady-a-best-practices-moderniho-layoutu\/"},"wordCount":1189,"commentCount":0,"publisher":{"@id":"https:\/\/www.autoskoly.sk\/news\/#organization"},"image":{"@id":"https:\/\/www.autoskoly.sk\/news\/html-a-css-zaklady-a-best-practices-moderniho-layoutu\/#primaryimage"},"thumbnailUrl":"https:\/\/www.autoskoly.sk\/news\/wp-content\/uploads\/2025\/12\/vzdelavanie-vysoka-skola-4161.jpg","keywords":["BEM","Flexbox","Grid","HTML a CSS","Performance","pr\u00edstupnos\u0165","responsivita","semantika"],"articleSection":["Telekomunik\u00e1cie"],"inLanguage":"sk-SK","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.autoskoly.sk\/news\/html-a-css-zaklady-a-best-practices-moderniho-layoutu\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.autoskoly.sk\/news\/html-a-css-zaklady-a-best-practices-moderniho-layoutu\/","url":"https:\/\/www.autoskoly.sk\/news\/html-a-css-zaklady-a-best-practices-moderniho-layoutu\/","name":"HTML a CSS: Z\u00e1klady a best practices modern\u00edho layoutu - Auto\u0161koly.sk","isPartOf":{"@id":"https:\/\/www.autoskoly.sk\/news\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.autoskoly.sk\/news\/html-a-css-zaklady-a-best-practices-moderniho-layoutu\/#primaryimage"},"image":{"@id":"https:\/\/www.autoskoly.sk\/news\/html-a-css-zaklady-a-best-practices-moderniho-layoutu\/#primaryimage"},"thumbnailUrl":"https:\/\/www.autoskoly.sk\/news\/wp-content\/uploads\/2025\/12\/vzdelavanie-vysoka-skola-4161.jpg","datePublished":"2025-12-26T16:01:31+00:00","dateModified":"2026-01-05T13:03:11+00:00","breadcrumb":{"@id":"https:\/\/www.autoskoly.sk\/news\/html-a-css-zaklady-a-best-practices-moderniho-layoutu\/#breadcrumb"},"inLanguage":"sk-SK","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.autoskoly.sk\/news\/html-a-css-zaklady-a-best-practices-moderniho-layoutu\/"]}]},{"@type":"ImageObject","inLanguage":"sk-SK","@id":"https:\/\/www.autoskoly.sk\/news\/html-a-css-zaklady-a-best-practices-moderniho-layoutu\/#primaryimage","url":"https:\/\/www.autoskoly.sk\/news\/wp-content\/uploads\/2025\/12\/vzdelavanie-vysoka-skola-4161.jpg","contentUrl":"https:\/\/www.autoskoly.sk\/news\/wp-content\/uploads\/2025\/12\/vzdelavanie-vysoka-skola-4161.jpg","width":1600,"height":969,"caption":"HTML a CSS: Z\u00e1klady a best practices modern\u00edho layoutu"},{"@type":"BreadcrumbList","@id":"https:\/\/www.autoskoly.sk\/news\/html-a-css-zaklady-a-best-practices-moderniho-layoutu\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.autoskoly.sk\/news\/"},{"@type":"ListItem","position":2,"name":"HTML a CSS: Z\u00e1klady a best practices modern\u00edho layoutu"}]},{"@type":"WebSite","@id":"https:\/\/www.autoskoly.sk\/news\/#website","url":"https:\/\/www.autoskoly.sk\/news\/","name":"Auto\u0161koly.sk","description":"Web o cestovan\u00ed, podnikan\u00ed, doprave a motorizme","publisher":{"@id":"https:\/\/www.autoskoly.sk\/news\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.autoskoly.sk\/news\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"sk-SK"},{"@type":"Organization","@id":"https:\/\/www.autoskoly.sk\/news\/#organization","name":"Auto\u0161koly.sk","url":"https:\/\/www.autoskoly.sk\/news\/","logo":{"@type":"ImageObject","inLanguage":"sk-SK","@id":"https:\/\/www.autoskoly.sk\/news\/#\/schema\/logo\/image\/","url":"https:\/\/www.autoskoly.sk\/news\/wp-content\/uploads\/2022\/08\/news-autoskoly-sk-logo-head.png","contentUrl":"https:\/\/www.autoskoly.sk\/news\/wp-content\/uploads\/2022\/08\/news-autoskoly-sk-logo-head.png","width":112,"height":113,"caption":"Auto\u0161koly.sk"},"image":{"@id":"https:\/\/www.autoskoly.sk\/news\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/vrtulniky\/"]},{"@type":"Person","@id":"https:\/\/www.autoskoly.sk\/news\/#\/schema\/person\/73d308367c26475e68925c6854f42643","name":"Veronika Benkov\u00e1","url":"https:\/\/www.autoskoly.sk\/news\/author\/veronika-benkova\/"}]}},"_links":{"self":[{"href":"https:\/\/www.autoskoly.sk\/news\/wp-json\/wp\/v2\/posts\/44161","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.autoskoly.sk\/news\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.autoskoly.sk\/news\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.autoskoly.sk\/news\/wp-json\/wp\/v2\/users\/46"}],"replies":[{"embeddable":true,"href":"https:\/\/www.autoskoly.sk\/news\/wp-json\/wp\/v2\/comments?post=44161"}],"version-history":[{"count":1,"href":"https:\/\/www.autoskoly.sk\/news\/wp-json\/wp\/v2\/posts\/44161\/revisions"}],"predecessor-version":[{"id":926696,"href":"https:\/\/www.autoskoly.sk\/news\/wp-json\/wp\/v2\/posts\/44161\/revisions\/926696"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.autoskoly.sk\/news\/wp-json\/wp\/v2\/media\/84161"}],"wp:attachment":[{"href":"https:\/\/www.autoskoly.sk\/news\/wp-json\/wp\/v2\/media?parent=44161"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.autoskoly.sk\/news\/wp-json\/wp\/v2\/categories?post=44161"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.autoskoly.sk\/news\/wp-json\/wp\/v2\/tags?post=44161"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}