Kas yra HTML? Apibrėžimas, tinklalapių kūrimas ir HTML5

Sužinokite, kas yra HTML, kaip kuriami tinklalapiai, HTML5 naujovės ir praktiniai pavyzdžiai pradedantiesiems ir profesionalams.

Autorius: Leandro Alegsa

21-01-2026 10:45

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ą;

<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:

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.

Žymos

HTML naudoja specialias programavimo kalbos dalis, vadinamas "žymėmis", kad naršyklė žinotų, kaip turi atrodyti tinklalapis. Žymos paprastai būna poromis: pradinė žyma apibrėžia turinio bloko pradžią, o baigiamoji žyma - to bloko pabaigą. Yra daug skirtingų žymų rūšių, ir kiekviena jų turi skirtingą paskirtį. Žymeklių pavyzdžių rasite toliau pateiktame skyriuje "Pagrindinės HTML žymės".

Kai kurios žymės veikia tik tam tikrose naršyklėse. Pavyzdžiui, žyma <menuitem>, kuri naudojama tam, kad kažkas būtų rodoma, kai asmuo paspaudžia dešinįjį pelės klavišą, veikia tik "Mozilla Firefox" naršyklėje. Kitos naršyklės paprasčiausiai ignoruoja šią žymą ir raštą rodo įprastai. Daugelis tinklalapių kūrėjų vengia naudoti šias "nestandartines" žymas, nes nori, kad jų tinklalapiai visose naršyklėse atrodytų vienodai.

Pavyzdys

Pateikiame HTML puslapio pavyzdį.

1 <!DOCTYPE html> 2 < html> 3 < head> 4 < title> Tai puslapio pavadinimas </title> 5 </head> 6 < body> 7 < p> Tai pastraipa. </p> 8 < a href="https://www.domain.com"> Tai nuoroda. </a> 9 < img src="image.jpg" alt="Image"> 10 </body> 11 </html>

Paprastas HTML puslapis būtų toks: viena pastraipa "Hello world! ".

1 <!DOCTYPE html> 2 < html> 3 < head> 4 < title> Sveiki! </title> 5 </head> 6 < body> 7 < p> Sveikas pasauli! </p> 8 </body> 9 </html>

Pagrindinės HTML žymės

Žymos pavadinimas	Pavadinimas	Funkcija	Kodo pavyzdys
`<!DOCTYPE>`	Doctype	Apibrėžia dokumento tipą	<!DOCTYPE html>
`<html>`	HTML	Apibrėžia HTML dokumentą ir paleidžia HTML dokumentą.	< html> Visas kodas</html>
`<head>`	Vadovas	Jame yra bet koks kodas, kuris nenaudojamas tinklalapio elementams rodyti.	<head></head>
`<pavadinimas>`	Pavadinimas	Apibrėžia tinklalapio pavadinimą (rodomą skirtuke) ir yra įrašomas į `<head>.`	< title> Tinklalapis</title>
`<body>`	Kūnas	Pateikiami matomi tinklalapio elementai (taip pat yra pastraipa ir kt.)	< body> Html žymės</body>
`<h1>` iki `<h6>`	Antraštės	Įvairaus dydžio antraštės (`<h1>` yra didžiausia)	< h1> Antraštė</h1>
<p>	Pastraipa	Apibrėžia teksto pastraipą	< p> TEKSTAS</p>
	Inkaras	Kuria aktyvias nuorodas į kitus tinklalapius	< a href="www.domain.com"> Apsilankykite mūsų svetainėje</a>
`<img>`	Vaizdas	Rodo vaizdą puslapyje	< img src="ImageUrl" alt="Tekstas rodomas, jei nėra paveikslėlio">
`<br>`	Pertrauka	Įterpiamas vienas eilutės pertraukimas	Tekstas < br> Tekstas
`<center>`	Centras	Perkelia turinį į puslapio centrą	<centras> Kodas</centras>
`<script>`	Skriptas	Sukuriamas tinklalapio scenarijus, paprastai parašytas "JavaScript" kalba.	< script> document. write("Hello World!")</script>

HTML žymių naudojimas

Tinklalapio kūrimas

Sukurti tinklalapį nesudėtinga.Viskas, ką reikia prisiminti, yra žymos ir tvarka, kad galėtumėte sukurti tinklalapį.

Pirmiausia reikia rasti vietą, kur būtų galima įvesti HTML žymas (rekomenduoju užrašų knygutę), ir įrašyti jas.

Čia pateikiamas dar vienas HTML žymų puslapio pavyzdys.

<html>

<head>

<title> Sveiki! <title>

<h1> Sveikas pasauli!</h1>

</head>

<body>

<p>

Tai yra HTML žymų puslapis.

</p>

Pagal: *Įrašyti vardą ir pavardę*

</footer>

</html>

Kai baigsite, išsaugokite šį įrašą šiuo formatu: helloworld.htm

(nedėkite tarpų)

Ir baigta! Kai išsaugosite jį savo kompiuteryje, paspaudę jį, pateksite į savo tinklalapį "Google"!

Klausimai ir atsakymai

K: Kas yra HTML?

A: HTML yra žymėjimo kalbos rūšis, naudojama tinklalapiams, kuriuose yra rašto, nuorodų, paveikslėlių ir garso ir vaizdo įrašų, kurti.

K: Kokia yra HTML funkcija?

A.: HTML funkcija - nurodyti žiniatinklio naršyklėms, kaip turėtų atrodyti tinklalapiai, ir pridėti meta informaciją, pavyzdžiui, tinklalapio kūrėjo vardą.

K: Kokių medijos pavyzdžių galima įtraukti į tinklalapius, sukurtus naudojant HTML?

A: Kai kurie laikmenos pavyzdžiai, kuriuos galima įtraukti į tinklalapius, sukurtus naudojant HTML, yra garso failai ir vaizdo klipai.

K: Kaip CSS papildo HTML?

A: CSS naudojamas HTML puslapių išvaizdai keisti.

K: Koks "JavaScript" vaidmuo kuriant žiniatinklius?

A: JavaScript yra esminė scenarijų kalba kuriant žiniatinklio svetaines, nes ji nurodo, kaip elgtis svetainėms, ir gali keisti HTML ir CSS išvaizdą.

K: Kas atsakingas už HTML kūrimą?

A.: HTML kuria Pasaulinis žiniatinklio konsorciumas (W3C).

K: Kokia yra dabartinė standartinė HTML versija?

A: Nuo 2018 m. rugsėjo mėn. naujausia standartinė HTML versija yra HTML 5, kurios versija yra 5.2.

Ieškoti