HTML5 & Štruktúra — Čo vieme · JNFEZO

Čo vieme — Stránka 03

HTML5 & Štruktúra

Sémantický HTML, formuláre, Canvas API, Web Storage, Geolocation, Intersection Observer, natívny Dialog a oveľa viac.

Semantic HTML5 Canvas API Web APIs Accessibility Intersection Observer Web Storage Geolocation API Clipboard API

HTML5 ukážky

Sémantický HTML5

Správne HTML5 tagy pre štruktúru — header, nav, main, article, section, footer, aside.

semanticSEOa11y

<header>Hlavička stránky / sekcieSEO

<nav>Navigačné menuA11Y

<main>Hlavný obsah stránkySEO

<article>Samostatný obsah / blog postSEO

<section>Tematická sekciaSEO

<aside>Bočný panel / doplnokA11Y

<footer>Päta stránkySEO

HTML5 Formuláre

Natívna HTML5 validácia, nové input typy, pattern, required, autocomplete.

input typesvalidationpattern

HTML Tabuľky

Sémantická tabuľka s thead, tbody, tfoot, colspan. Kliknutie na hlavičku triedi.

theadtbodysort

Projekt ↕	Tech ↕	Status	Rok ↕
lupino.sk	WooCommerce	WIP	2026
klima24.sk	WordPress	Live	2026
cam-connect	WooCommerce	Dev	2026
kizomba.sk	Custom PHP	Live	2025
himeros.sk	WooCommerce	WIP	2026
Klikni na hlavičku pre zoradenie

Lazy Loading obrázkov

loading=“lazy“, natívny atribút — obrázky sa načítajú len keď sú vo viewport. Blur placeholder.

loading=lazyplaceholderperformance

<picture> srcset

loading=“lazy“ — načíta keď treba

Canvas API — Kreslenie

HTML5 Canvas API — free-hand kreslenie myšou alebo prstom. Výber farby a veľkosti štetca.

Canvas 2Dctx.lineTotouch events

Kresli na plátno vyššie

Accessibility (A11Y)

ARIA atribúty, role, alt texty, keyboard navigation, focus management, screen readers.

ARIAroleWCAG 2.1

Meta tagy & SEO HTML

Klikni na meta tag pre kopírovanie. Open Graph, Twitter Cards, robots, canonical.

metaOG tagsSEO

title

JNFEZO · Web Developer · Slovensko

📋

description

Weby, ktoré predávajú. Od návrhu po spustenie.

📋

og:image

https://jnfezo.sk/og-image.jpg

📋

canonical

https://jnfezo.sk/

📋

robots

index, follow, max-image-preview:large

📋

viewport

width=device-width, initial-scale=1.0

📋

Klikni 📋 pre kopírovanie

Geolocation API

HTML5 Geolocation API — zistiť polohu, presnosť, rýchlosť, watchPosition pre live tracking.

navigator.geolocationcoordswatchPosition

📍

—

Klikni pre zistenie polohy

navigator.geolocation.getCurrentPosition()

Web Storage API

localStorage (trvalé) vs sessionStorage (relácia). Pridávanie, čítanie a mazanie kľúčov.

localStoragesessionStorageJSON

Pridaj záznamy do úložiska

Intersection Observer

Moderné API pre sledovanie viditeľnosti prvkov — scroll animácie, lazy load, infinite scroll.

IntersectionObserverviewportthreshold

Prvok #1 — scrollni dole

Prvok #2 — IntersectionObserver

Prvok #3 — threshold: 0.5

Prvok #4 — lazy animation

Prvok #5 — scroll reveal

Prvok #6 — infinite scroll

Prvok #7 — ad tracking

Scrollni v boxe — sleduje viditeľnosť

Clipboard API

navigator.clipboard.writeText() — kopírovanie textu, kódu alebo URL. Vizuálna spätná väzba.

Clipboard APIwriteText()readText()

/* HTML5 Clipboard API */
navigator.clipboard
.writeText(‚kód‘)
.then(() => toast())

/* Čítanie zo schránky */
navigator.clipboard
.readText()
.then(text => console.log(text))

Klikni Kopírovať — skopíruje kód

Data Attributes

HTML5 data-* atribúty — ukladanie metadát do DOM, čítanie cez dataset, CSS selektory.

data-*datasetCSS attr()

HTML5 — klikni pre data atribúty data-category=“html“

CSS3 — klikni pre data atribúty data-category=“css“

JavaScript ES2024 data-category=“js“

Klikni na položku pre dataset

Custom UI Komponenty

Vlastné opakované UI komponenty — badge, progress, tooltip, živý progress bar.

Web Componentsreusable UItooltip

HTML5 CSS3 JS Live

Progress bar (0%)

Web Fonts & Typografia

Google Fonts, variable fonts, font-display:swap, clamp() pre fluid typografiu.

@font-faceclamp()variable fonts

Inter — primárny font

JNFEZO Web Developer

400 600 700 900

JetBrains Mono — kód

              const web = ‚JNFEZO‘;
            

clamp() — fluid typografia

Tento text sa prispôsobuje šírke

font-size: clamp(0.7rem, 2vw, 1rem)

Object-fit & Responsive img

CSS object-fit: cover, contain, fill. Správne zobrazenie obrázkov v kontajneroch.

object-fitobject-positionaspect-ratio

cover

contain

fill

object-position: center 30%

aspect-ratio: 16/9 · object-fit: cover

Natívny Dialog element

HTML5 <dialog> element — natívny modal bez JS knižníc. showModal(), ::backdrop, ESC zatváranie.

<dialog>showModal()::backdrop

Čo je <details> element?

Natívny HTML5 element pre rozbaľovací obsah — žiadny JavaScript. <summary> je klikateľná hlavička, <details> skrýva/zobrazuje obsah.

Kedy použiť natívny Dialog?

<dialog> je sémanticky správny pre modálne okná — má zabudovaný focus trap, ESC zatváranie a ::backdrop overlay bez JS.

dialog.showModal() — HTML5 natívne

Pokročilé HTML5 Inputy

type=range, color, datalist, output — natívne HTML5 prvky bez knižníc.

datalistoutputtype=range

Range + output type=range

Farba type=color

#F97316

Datalist autocomplete list=““

Začni písať pre autocomplete

Keyboard Events API

keydown, keyup, key, code, modifiers — sledovanie kláves, skratky, kombinácie.

keydownKeyboardEventcombos

Klikni sem a stlač klávesu

—

Posledných 8 kláves:

Skratky:

Ctrl+S Ctrl+C Ctrl+Z Shift+↑

Stlač Ctrl+S alebo iné skratky

JNFEZO

HTML5 & Štruktúra · Stránka 03 / 08

18 ukážok HTML5 APIs Accessibility

      jnfezo.sk · 2026
    