Blog

HTML (HyperText Markup Language)

« Back to Glossary Index

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:

  1. DOCTYPE: Označuje, že stránka je napísaná v HTML5 (moderná verzia HTML).
   <!DOCTYPE html>
  1. HTML tag: Definuje začiatok a koniec HTML dokumentu.
   <html>...</html>
  1. 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>
  1. 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

  1. 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>
  1. 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>
  1. 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>
  1. Obrázky (Images):
  • Obrázky produktov sú dôležité v e-commerce a sú pridávané pomocou tagu <img>, kde src je cesta k obrázku.
   <img src="obrazok-produktu.jpg" alt="Popis obrázku">
  1. 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>
  1. 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>
  1. 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
HTTP vs. HTTPHosting