HTML (HyperText Markup Language)
HTML je základný značkovací jazyk používaný na vytváranie a štruktúrovanie webových stránok. Umožňuje vytvárať texty, obrázky, odkazy, formuláre a ďalšie prvky, ktoré tvoria obsah webu. V e-commerce je HTML kľúčový pri vytváraní stránok produktov, navigačných štruktúr a iných dôležitých prvkov, ktoré zabezpečujú správne fungovanie a vzhľad e-shopu.
Základné pojmy a štruktúra HTML
HTML dokument sa skladá z rôznych prvkov (tags), ktoré definujú obsah a štruktúru webovej stránky. Každý HTML dokument obsahuje základné štrukturálne prvky:
- DOCTYPE: Označuje, že stránka je napísaná v HTML5 (moderná verzia HTML).
<!DOCTYPE html>
- HTML tag: Definuje začiatok a koniec HTML dokumentu.
<html>...</html>
- Head sekcia: Obsahuje meta informácie o stránke, ako sú názov stránky (title), meta popisy, kľúčové slová pre SEO, prepojenia na štýly a skripty.
<head>
<title>Môj e-shop</title>
<meta charset="UTF-8">
</head>
- Body sekcia: Obsahuje všetok viditeľný obsah webovej stránky, ako sú nadpisy, texty, obrázky a odkazy.
<body>
<h1>Vitajte na našom e-shope!</h1>
<p>Najlepšie produkty za skvelé ceny.</p>
</body>
Kľúčové HTML prvky v e-commerce
- Nadpisy (Headings):
- Nadpisy sú definované pomocou tagov
<h1>
až<h6>
, kde<h1>
je najdôležitejší. V e-commerce slúžia nadpisy na štruktúrovanie obsahu a pomáhajú pri SEO. - Napr.:
<h1>
sa môže použiť pre názov produktu, zatiaľ čo<h2>
pre popis produktu.
<h1>Najnovšie produkty</h1>
- Odstavce a text (Paragraphs):
- Texty sa vkladajú do tagu
<p>
. V e-shope sa tento prvok používa na popis produktov, obchodné podmienky, informácie o doprave atď.
<p>Tento produkt je vyrobený z kvalitných materiálov...</p>
- Odkazy (Links):
- Odkazy sú vytvárané pomocou tagu
<a>
, ktorý nasmeruje používateľa na inú stránku alebo sekciu. Na e-shope sa odkazy používajú na navigáciu medzi produktmi, kategóriami alebo blogovými článkami.
<a href="https://www.priklad.sk/produkty">Prezrite si naše produkty</a>
- Obrázky (Images):
- Obrázky produktov sú dôležité v e-commerce a sú pridávané pomocou tagu
<img>
, kdesrc
je cesta k obrázku.
<img src="obrazok-produktu.jpg" alt="Popis obrázku">
- Zoznamy (Lists):
- Neusporiadané (
<ul>
) a usporiadané (<ol>
) zoznamy sa používajú na vytváranie kategórií produktov alebo funkcií produktov.
<ul>
<li>Bezplatná doprava</li>
<li>Záruka 2 roky</li>
<li>Rýchle doručenie</li>
</ul>
- Formuláre (Forms):
- Formuláre umožňujú zákazníkom interagovať s e-shopom – napríklad vyhľadávanie produktov, registrácia alebo pridávanie produktov do košíka.
<form action="/search" method="GET">
<input type="text" name="query" placeholder="Hľadať produkty">
<button type="submit">Hľadať</button>
</form>
- Tlačidlá (Buttons):
- Tlačidlá sú kľúčovým prvkom pre interakciu používateľa s webom, napríklad tlačidlo “Pridať do košíka”.
<button type="button">Pridať do košíka</button>
SEO a HTML
HTML priamo ovplyvňuje SEO tým, ako štruktúruje a označuje obsah pre vyhľadávače. Kľúčové faktory zahŕňajú:
- Nadpisy: Správne označené nadpisy (
<h1>
,<h2>
, …) zlepšujú čitateľnosť obsahu pre vyhľadávače. - Meta tagy: Meta popisy a titulky v sekcii
<head>
pomáhajú vyhľadávačom pochopiť obsah stránky. - Alt text pre obrázky: Popisy obrázkov v tagu
alt
zlepšujú SEO a prístupnosť stránky.
HTML je základným stavebným prvkom každého e-shopu a umožňuje vytvoriť funkčnú, prehľadnú a optimalizovanú stránku pre zákazníkov aj vyhľadávače.
« Späť na slovník pojmov