Web Development · 2026-10-17 · HU

HTML, CSS és JavaScript: melyik mire való?

Ha weboldalt szeretnél készíteni, szinte biztosan találkozol ezzel a három névvel. Bár gyakran együtt említik őket, eltérő feladatuk van. A HTML a szerkezet, a CSS a megjelenés, a JavaScript a működés.

1. HTML: a tartalom és a szerkezet

A HTML (HyperText Markup Language) határozza meg, hogy mit tartalmaz az oldal: címsorokat, bekezdéseket, képeket, linkeket, űrlapokat. A szemantikus elemek (például header, main, article) abban is segítenek, hogy a böngészők, kisegítő technológiák és keresőmotorok jobban értsék az oldalt.

<main>
  <h1>Az első weboldalam</h1>
  <p>Helló, világ!</p>
  <button id="hello">Kattints rám!</button>
</main>

A h1 főcímet jelöl, a p bekezdést, a button pedig interaktív gombot.

2. CSS: a kinézet

A CSS a színeket, betűméreteket, térközöket, elrendezést és reszponzív megjelenítést szabályozza.

body {
  font-family: system-ui, sans-serif;
  background: #10121a;
  color: white;
}
button {
  background: rebeccapurple;
  color: white;
  padding: 12px 18px;
  border: 0;
  border-radius: 10px;
}

A CSS-hez tartoznak olyan fontos elrendezési eszközök is, mint a Flexbox és a Grid. Ezekkel különböző képernyőméretekhez alkalmazkodó felületet építhetsz.

3. JavaScript: az interaktivitás

A JavaScript reagálhat kattintásokra, ellenőrizheti az űrlapokat, adatokat tölthet be, és frissítheti az oldal tartalmát teljes újratöltés nélkül.

document.querySelector("#hello").addEventListener("click", () => {
  alert("Szia!");
});

Ez a kódrészlet a HTML-ben szereplő gombra kattintva üzenetet jelenít meg. Figyelj arra, hogy a script akkor fusson, amikor a gomb már megtalálható a dokumentumban; használhatsz például defer attribútumot.

4. Hogyan dolgoznak együtt?

Egy egyszerű weboldalhoz elegendő három fájl:

index.html – tartalom és struktúra.
style.css – elrendezés, színek és animációk.
script.js – eseménykezelés és logika.

A HTML-ben a <link rel="stylesheet" href="style.css"> kapcsolja a CSS-t, a <script src="script.js" defer></script> pedig a JavaScriptet.

5. Kell-e keretrendszer?

Nem. React, Vue és más eszközök nagyobb alkalmazások fejlesztésében segíthetnek, de a HTML–CSS–JavaScript alapokat akkor is érdemes megtanulni. Egy személyes portfólió vagy kis projekt sokszor tökéletesen működik keretrendszer nélkül.

6. Gyakori kezdő hibák

Kizárólag div elemek használata megfelelő HTML-elemek helyett.
Rögzített szélesség, amely telefonon kilóg a képernyőről.
Felhasználói szöveg közvetlen beszúrása innerHTML segítségével, ami nem biztonságos.
A képek alternatív szövegének és a billentyűzetes használatnak az elhanyagolása.

Mit készíts elsőként?

Építs egy mini projektgyűjtő oldalt három kártyával. A HTML adja a kártyák szerkezetét, a CSS rendezi el őket rácsba, a JavaScript pedig megvalósít egy keresőmezőt. Ez a kis feladat egyszerre gyakoroltatja mindhárom technológiát.