Hiperteksto žymėjimo kalba (HTML) - tai žymėjimo kalba tinklalapiui kurti. Tinklalapiai paprastai peržiūrimi interneto naršyklėje. Juose gali būti tekstų, nuorodų, paveikslėlių ir net garso bei vaizdo įrašų. HTML naudojama kiekvienam iš šių turinio tipų pažymėti ir aprašyti, kad žiniatinklio naršyklė galėtų juos teisingai rodyti. HTML taip pat gali būti naudojamas tinklalapiui papildyti meta informacija. Metainformacijos paprastai nerodo žiniatinklio naršyklės ir tai yra duomenys apie tinklalapį, pvz., puslapį sukūrusio asmens vardas. Kaskadinių stilių lentelės (CSS) naudojamos HTML elementams stilizuoti, o "JavaScript" - HTML elementams ir CSS stiliams valdyti.

HTML sukūrė Pasaulinis žiniatinklio konsorciumas (W3C). Yra kelios HTML versijos. Nuo 2018 m. rugsėjo mėn. dabartinis HTML standartas vadinamas HTML 5, o konkrečiai jo versija yra 5.2.

Ką reiškia HTML ir kaip jis veikia

HTML yra žymėjimo kalba — tai reiškia, kad naudodami specialias žymas (angl. tags) aprašote, koks turinys turi būti puslapyje ir kaip jis yra struktūruotas. Naršyklė perskaito HTML dokumentą, interpretuoja žymes ir atvaizduoja puslapį. HTML pats savaime nėra programavimo kalba (jis neturi logikos, ciklų ar funkcijų), tačiau jis sudaro tinklalapio struktūrą, kurią papildomai valdo CSS (išvaizda) ir JavaScript (elgsena).

Pagrindinė HTML dokumento struktūra

Tipinė HTML dokumento struktūra atrodo taip (pateikta pavyzdinė pagrindinė šablono struktūra):

<!DOCTYPE html> <html lang="lt">   <head>     <meta charset="utf-8">     <meta name="viewport" content="width=device-width, initial-scale=1">     <title>Puslapio pavadinimas</title>     <link rel="stylesheet" href="styles.css">   </head>   <body>     <header>...</header>     <main>...</main>     <footer>...</footer>     <script src="app.js"></script>   </body> </html>

Šie elementai yra svarbūs:

  • <!DOCTYPE html> — nurodo dokumento tipą ir padeda naršyklei pasirinkti tinkamą interpretavimo režimą;
  • <html lang="lt"> — nustato puslapio kalbą;
  • <meta charset="utf-8"> — nurodo simbolių koduotę (UTF-8 yra plačiausiai naudojama);
  • <meta name="viewport"> — svarbi mobiliai ir responsyviai dizainui;
  • <head> — meta informacija, stiliai, antraštės; <body> — matomas turinys.

    • HTML elementai ir žymos: semantika

    HTML elementai apibrėžia turinį — pvz., <h1>…</h1> antraštei, <p>…</p> pastraipai, <a href="...">…</a> nuorodai, <img src="..." alt="..."> paveikslėliui. Modernus HTML skatina naudoti semantines žymas, kurios aiškiai aprašo turinio paskirtį, pvz.:

  • <header>, <nav>, <main>, <article>, <section>, <aside>, <footer> — padeda struktūrizuoti puslapį ir gerina prieinamumą bei SEO;
  • <figure> ir <figcaption> — nuotraukų ir jų pavadinimų grupavimui;
  • <form>, <input>, <label>, <button> — interaktyviems elementams rinkti.

    • Semantinės žymos padeda paieškos sistemoms ir pagalbiniams įrankiams (pvz., ekrano skaitytuvams) geriau suprasti turinį.

    Prieinamumas (accessibility)

    Rašant HTML svarbu galvoti apie visus vartotojus, įskaitant tuos, kurie naudoja ekrano skaitytuvus arba turi kitokių negalių. Keletas pagrindinių principų:

  • Visada užpildykite <img alt="..."> atributą prasmingu aprašymu;
  • Formų valdiklius susiekite su <label> elementais;
  • Naudokite ARIA atributus tik kai būtina ir suprantamai (aria-label, role ir kt.);
  • Užtikrinkite gerą kontrastą, klaviatūros navigaciją ir logišką dokumento struktūrą.

    • HTML5 ir šiuolaikinės galimybės

    HTML5 pridėjo daug naujų elementų ir API, skirtų šiuolaikiniams tinklalapiams:

  • Multimedija: <video>, <audio>, palaikymas be papildomų papildinių;
  • Canvas ir SVG grafikai dinamiškam piešimui;
  • Geolokacija, Web Storage (localStorage/sessionStorage), Service Workers, Fetch API ir WebSockets — leidžia kurti pažangias, interaktyvias ir offline veikiančias žiniatinklio programas;
  • Responsyvi medijų valdymas: <picture>, srcset ir sizes atributai leidžia pateikti skirtingų dydžių paveikslėlius skirtingoms ekranų rezoliucijoms;
  • Lazy loading (pvz., loading="lazy" atributas paveikslėliams) — našumo gerinimui.

    • Tinklalapio kūrimo žingsniai

    Greitas darbo eiga pradžiai:

  • 1. Planavimas: apibrėžkite turinį ir struktūrą;
  • 2. HTML: sukurkite semantinę struktūrą (header, nav, main, footer ir kt.);
  • 3. CSS: pridėkite stilių ir adaptuokite dizainą mobiliems įrenginiams (media queries);
  • 4. JavaScript: pridėkite interaktyvumą, API užklausas, formų tikrinimą;
  • 5. Testavimas: įvairios naršyklės, skirtingi įrenginiai, prieinamumo tikrinimas;
  • 6. Optimizacija: vaizdų suspaudimas, kodo minimizavimas, tinkamas caching ir CDN naudojimas;
  • 7. Publikavimas ir palaikymas: įdiekite į serverį, sekite našumą ir atnaujinkite turinį.

    • Meta informacija ir SEO

    Meta žymos <head> dalyje svarbios paieškos rezultatams ir dalinimuisi socialiniuose tinkluose:

  • <meta name="description" content="...> — trumpas puslapio aprašymas;
  • Open Graph ir Twitter Card meta žymos — kai turinys dalijamasi socialiniuose tinkluose;
  • Struktūriniai duomenys (schema.org) — padeda paieškos sistemoms geriau suprasti puslapio turinį.

    • Multimedija, formos ir saugumas

    Formos leidžia rinkti duomenis, todėl svarbu tinkamai tikrinti įvestis tiek kliento, tiek serverio pusėje. Multimedijos elementai turi turėti alternatyvas (pvz., subtitrus vaizdo įrašams), kad būtų užtikrintas prieinamumas. Taip pat atkreipkite dėmesį į saugumą: patikrinkite įvestis nuo XSS, CSRF ir kitų pažeidžiamumų.

    Susijusios technologijos ir įrankiai

    HTML dažnai naudojamas kartu su:

  • CSS: išvaizdai;
  • JavaScript: elgsenai ir dinamikai;
  • Build įrankiai (Webpack, Vite), preprocessoriai (Sass), sistemų valdytojai (npm/yarn);
  • DevTools naršyklėse: leidžia debug’inti, tikrinti HTML struktūrą, CSS taisykles ir tinklo užklausas;
  • Validavimo įrankiai (pvz., validator.w3.org) — padeda rasti sintaksės klaidas ir gerinti suderinamumą.

    • Patarimai geresniam HTML rašymui

  • Naudokite semantines žymas — jos pagerins SEO ir prieinamumą;
  • Užtikrinkite, kad visi media elementai turi alternatyvų tekstą ir (jei reikalinga) subtitrus;
  • Naudokite viewport meta ir responsyvų dizainą mobilumui;
  • Minimizuokite ir suspauskite failus produkcijai, bet palikite aiškų kodą kūrimo etapui;
  • Venkite inline stiliaus ir didelių JavaScript blokų, kurie blokuoja puslapio užkrovimą — naudokite async/defer kai įmanoma;
  • Reguliariai testuokite skirtingose naršyklėse ir įrenginiuose.

    • Išvados

    HTML yra pagrindas visam žiniatinklio turiniui: tai struktūrinė kalba, kuri kartu su CSS ir JavaScript leidžia kurti modernius, interaktyvius ir prieinamus tinklalapius. HTML5 atnešė daug naudingų elementų ir API, kurie palengvina multimedijos, offline režimo ir pažangių funkcijų diegimą. Mokėjimas rašyti švarų, semantinį ir pritaikytą HTML yra svarbus kiekvienam tinklalapių kūrėjui.