HTML Modul – ProgiSuli

Mi az a HTML?

A HTML (HyperText Markup Language) a webalapú dokumentumok strukturálásának standardja. Nem programozási nyelv, hanem egy markup (jelölő) nyelv, amely azt határozza meg, hogyan vannak strukturálva az adatok és tartalmak egy weboldalon.

A HTML története: Az 1990-es évek elején Tim Berners-Lee fejlesztette ki a CERN-ben. Az HTML5 az aktuális szabvány, amelyet a W3C és az WHATWG fenntartanak.

Alapvető dokumentum szerkezete

Minden HTML oldal hasonló alapszerkezettel kezdődik:


<!DOCTYPE html>
<html lang="hu">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Az oldal címe</title>
</head>
<body>
  <h1>Helló, Világ!</h1>
  <p>Ez az első HTML oldalam!</p>
</body>
</html>

Mit jelent ez?

<!DOCTYPE html> – Meghatározza, hogy HTML5 dokumentumot használunk.
<html lang="hu"> – A dokumentum gyökéreleme. A lang attribútum az oldal nyelvét adja meg.
<head> – A dokumentum fejléce. Itt adjuk meg a metaadatokat, CSS-t, és az oldal címét.
<meta charset="UTF-8"> – Karakter kódolás meghatározása (Unicode támogatás).
<meta name="viewport"> – Mobileszközök támogatása.
<title> – Az oldal címe (böngészőfülön jelenik meg).
<body> – A dokumentum teste. Itt helyezzük el a megjelenítendő tartalmat.

Szöveg és formázás

A legfontosabb szöveges elemek:


<!-- Fejlécek: h1 a legnagyobb, h6 a legkisebb -->
<h1>Főcím</h1>
<h2>Alcím</h2>
<h3>Alacím</h3>

<!-- Bekezdés -->
<p>Ez egy bekezdés szövege. A bekezdések blokk szinten jelennek meg.</p>

<!-- Sorvétés -->
<br>

<!-- Vízszintes vonal -->
<hr>

<!-- Szövegkiemelés -->
<strong>Félkövér szöveg (fontos)</strong>
<b>Félkövér szöveg (stilisztikai)</b>
<em>Dőlt szöveg (hangsúlyos)</em>
<i>Dőlt szöveg (stilisztikai)</i>
<u>Aláhúzott szöveg</u>
<mark>Kiemelt szöveg</mark>
<del>Kihúzott szöveg</del>
<ins>Beírt szöveg</ins>

Hivatkozások és képek

Hivatkozások (linkek):


<!-- Hiperlink külső oldalhoz -->
<a href="https://www.example.com">Bejelentkezés</a>

<!-- Belső hivatkozás az oldalon -->
<a href="index.html">Kezdőlap</a>

<!-- Hivatkozás egy azonosítóhoz (anchor) -->
<a href="#section2">Ugrás az 2. szekciót</a>
<h2 id="section2">2. szekció</h2>

<!-- Email hivatkozás -->
<a href="mailto:info@example.com">Írj nekünk!</a>

<!-- Telefon hivatkozás -->
<a href="tel:+36201234567">Hívj fel!</a>

<!-- Új lapon nyiló link -->
<a href="https://www.example.com" target="_blank">Külső oldal (új lapon)</a>

Képek:


<!-- Alap képmegjelenítés -->
<img src="kepem.jpg" alt="A kép leírása">

<!-- Képméretezés -->
<img src="kepem.jpg" alt="Leírás" width="300" height="200">

<!-- Kép egy hivatkozáson belül -->
<a href="https://example.com">
  <img src="logo.png" alt="Logó">
</a>

<!-- Válaszadó kép (képsűrűség támogatás) -->
<img src="kepem.jpg" 
     srcset="kepem.jpg 1x, kepem-2x.jpg 2x" 
     alt="Leírás">

Listák

Rendezetlen lista (unordered list - ul):


<ul>
  <li>Első elem</li>
  <li>Második elem</li>
  <li>Harmadik elem</li>
</ul>

Rendezett lista (ordered list - ol):


<ol>
  <li>Első lépés</li>
  <li>Második lépés</li>
  <li>Harmadik lépés</li>
</ol>

Definíciós lista (definition list - dl):


<dl>
  <dt>HTML</dt>
  <dd>HyperText Markup Language – web dokumentumok strukturálása</dd>
  
  <dt>CSS</dt>
  <dd>Cascading Style Sheets – weboldalak stílusozása</dd>
</dl>

Beágyazott lista:


<ul>
  <li>Első téma
    <ul>
      <li>Alpontja</li>
      <li>Másik alpontja</li>
    </ul>
  </li>
  <li>Második téma</li>
</ul>

Táblázatok

Alapvető táblázat szerkezete:


<table border="1">
  <thead>
    <tr>
      <th>Név</th>
      <th>Város</th>
      <th>Kor</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>János</td>
      <td>Budapest</td>
      <td>28</td>
    </tr>
    <tr>
      <td>Mária</td>
      <td>Debrecen</td>
      <td>25</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="2">Összesen:</td>
      <td>53</td>
    </tr>
  </tfoot>
</table>

Táblázat attribútumok:

<thead> – Táblázat fejléce
<tbody> – Táblázat teste (tartalom)
<tfoot> – Táblázat lábléce
<tr> – Sor (table row)
<th> – Fejlécelem
<td> – Adatelem
colspan – Oszlopok egyesítése
rowspan – Sorok egyesítése

Szémantikus HTML

A szémantikus HTML azt jelenti, hogy olyan elemeket használunk, amelyek jelentéstartalommal bírnak, nem csak formázásra valók. Ez jobb SEO-t, hozzáférhetőséget és karbantarthatóságot biztosít.


<!-- Régi, nem szémantikus megközelítés -->
<div class="header">
  <div class="nav">
    <a href="#">Otthon</a>
  </div>
</div>

<!-- Modern, szémantikus megközelítés -->
<header>
  <nav>
    <a href="#">Otthon</a>
  </nav>
</header>

Fontos szémantikus elemek:


<!-- Fejléc -->
<header>
  <h1>Weboldal címe</h1>
  <nav>
    <a href="#">Menü</a>
  </nav>
</header>

<!-- Fő tartalom -->
<main>
  <article>
    <h2>Cikk címe</h2>
    <p>Cikk tartalma...</p>
  </article>

  <aside>
    <h3>Oldalsáv</h3>
    <p>Kiegészítő tartalom...</p>
  </aside>
</main>

<!-- Lábléc -->
<footer>
  <p>© 2025 ProgiSuli. Minden jog fenntartva.</p>
</footer>

Szémantikus elemek listája:

<header> – Az oldal vagy szakasz fejléce
<nav> – Navigációs linkek
<main> – Az oldal fő tartalma
<article> – Önálló, újrahasznosítható tartalom (cikk, blog poszt)
<section> – A dokumentum egy egyértelmű szakasza
<aside> – Oldalsáv, kiegészítő tartalom
<footer> – Az oldal vagy szakasz lábléce
<time> – Dátum és idő megjelölése
<figure> – Ábra, diagram, kép (szövegből függetlenül)
<figcaption> – Az ábra felirata

Űrlapok

Az űrlapok a felhasználó-oldal kommunikáció alapja. Az alábbi kódpéldában látható az összes fontosabb input típus:


<form action="/submit" method="POST">
  <!-- Szövegbevitel -->
  <label for="username">Felhasználónév:</label>
  <input type="text" id="username" name="username" required>

  <!-- Email -->
  <label for="email">Email cím:</label>
  <input type="email" id="email" name="email" required>

  <!-- Jelszó -->
  <label for="password">Jelszó:</label>
  <input type="password" id="password" name="password" required>

  <!-- Szám -->
  <label for="age">Kor:</label>
  <input type="number" id="age" name="age" min="0" max="120">

  <!-- Dátum -->
  <label for="birthdate">Születési dátum:</label>
  <input type="date" id="birthdate" name="birthdate">

  <!-- Időpont -->
  <label for="appointment">Időpont:</label>
  <input type="datetime-local" id="appointment" name="appointment">

  <!-- Szín választó -->
  <label for="color">Kedvenc szín:</label>
  <input type="color" id="color" name="color" value="#FF0000">

  <!-- Tartomány csúszka -->
  <label for="volume">Hangerő:</label>
  <input type="range" id="volume" name="volume" min="0" max="100">

  <!-- Legördülő menü -->
  <label for="country">Ország:</label>
  <select id="country" name="country">
    <option value="">-- Választ egy országot --</option>
    <option value="hu">Magyarország</option>
    <option value="at">Ausztria</option>
    <option value="sk">Szlovákia</option>
  </select>

  <!-- Többválasztós lista -->
  <label>Érdeklődési körök:</label>
  <select name="interests" multiple>
    <option value="sports">Sport</option>
    <option value="music">Zene</option>
    <option value="reading">Olvasás</option>
  </select>

  <!-- Szövegmező (textarea) -->
  <label for="message">Üzenet:</label>
  <textarea id="message" name="message" rows="4" cols="50"></textarea>

  <!-- Jelölőnégyzet -->
  <input type="checkbox" id="agree" name="agree">
  <label for="agree">Elfogadom a feltételeket</label>

  <!-- Rádió gomb -->
  <label>Nem:</label>
  <input type="radio" name="gender" value="male"> Férfi
  <input type="radio" name="gender" value="female"> Nő
  <input type="radio" name="gender" value="other"> Egyéb

  <!-- Rejtett mező -->
  <input type="hidden" name="csrfToken" value="token123">

  <!-- Gomb -->
  <button type="submit">Küldés</button>
  <button type="reset">Törlés</button>
</form>

Űrlap attribútumok:

action – Hova küldje az adatokat az űrlap
method – GET vagy POST
enctype – Kódolás típusa (pl. multipart/form-data fájlfeltöltéshez)
novalidate – Elkerüli a böngésző alapértelmezett validálást

Input attribútumok:

required – Kötelező mező
pattern – Reguláris kifejezés validáláshoz
placeholder – Segédszöveg
disabled – Letiltott mező
readonly – Csak olvasható mező
maxlength – Maximum karakterhossz
minlength – Minimum karakterhossz

Meta tagek és fejléc

A meta tagek a dokumentum metaadatait tartalmazzák. Ezek a keresőmotoroknak és böngészőknek adnak információt.


<head>
  <!-- Karakter kódolás -->
  <meta charset="UTF-8">

  <!-- Viewport (mobileszközökhöz) -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- Oldal leírása (keresőmotorok által használt) -->
  <meta name="description" content="Az oldal rövid leírása, max 160 karakter">

  <!-- Kulcsszavak -->
  <meta name="keywords" content="HTML, CSS, JavaScript, web fejlesztés">

  <!-- Szerző -->
  <meta name="author" content="Szerző neve">

  <!-- Böngésző gyorsítótár -->
  <meta http-equiv="Cache-Control" content="max-age=3600">

  <!-- Favicon -->
  <link rel="icon" type="image/x-icon" href="favicon.ico">

  <!-- Stiluslapok -->
  <link rel="stylesheet" href="style.css">

  <!-- Előzetes betöltés (DNS, kapcsolat) -->
  <link rel="preconnect" href="https://cdn.example.com">
  <link rel="dns-prefetch" href="https://api.example.com">
</head>

Data attribútumok

A data attribútumok egyéni adatok tárolására szolgálnak az HTML elemekben. JavaScript segítségével elérhetőek.


<div id="user" data-user-id="12345" data-role="admin" data-status="active">
  János András
</div>

<button data-action="delete" data-id="999">Törlés</button>

<!-- JavaScript hozzáférés -->
<script>
  const user = document.getElementById('user');
  console.log(user.dataset.userId);    // "12345"
  console.log(user.dataset.role);      // "admin"
  console.log(user.dataset.status);    // "active"
</script>

Hozzáférhetőség (Accessibility)

Az oldalak érhetőek legyenek minden felhasználó számára, köztük a fogyatékkal élőknek. Az ARIA attribútumok ezt segítik.


<!-- ARIA role-ok -->
<button aria-label="Menü megnyitása" aria-controls="mainNav">☰</button>

<!-- ARIA live regions (dinamikus tartalom) -->
<div aria-live="polite" aria-atomic="true" id="notifications">
  <p id="message"></p>
</div>

<!-- ARIA hidden -->
<span aria-hidden="true">→</span>

<!-- Aria-describedby -->
<input type="password" aria-describedby="pwHelp">
<small id="pwHelp">Legalább 8 karakter, nagy/kisbetű, szám</small>

<!-- Tabindex -->
<a href="#content" tabindex="1">Fő tartalomra ugrás</a>

<!-- Semantic HTML az a11y szempontjából -->
<!-- Jó: -->
<button onclick="toggleMenu()">Menü</button>

<!-- Rossz: -->
<div onclick="toggleMenu()" role="button">Menü</div>

Hozzáférhetőségi szabályok:

Mindig adjon alt szöveget a képekhez
Sem csak szín alapján adjunk információt
Legyen megfelelő kontrasztratio (WCAG 4.5:1)
Billentyűzet navigáció legyen működőképes
Szelis felhasználók számára skip linkek
Formok jól címkézett, aria-label-ek

Video és audio

Az HTML5 natív módon támogatja a multimédiás tartalmakat.


<!-- Video -->
<video width="640" height="480" controls>
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
  A böngésződ nem támogatja a video elemet.
</video>

<!-- Video attribútumok -->
<video controls autoplay muted loop width="100%">
  <source src="video.mp4" type="video/mp4">
</video>

<!-- Audio -->
<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
  <source src="audio.ogg" type="audio/ogg">
  A böngésződ nem támogatja az audio elemet.
</audio>

<!-- Video sáv (track) -->
<video controls>
  <source src="video.mp4" type="video/mp4">
  <track src="subtitles.vtt" kind="subtitles" srclang="hu" label="Magyar">
</video>

Canvas és SVG

Canvas: Grafika rajzolása JavaScript segítségével


<canvas id="myCanvas" width="400" height="300" style="border: 1px solid black;">
  A böngésződ nem támogatja a canvas elemet.
</canvas>

<script>
  const canvas = document.getElementById('myCanvas');
  const ctx = canvas.getContext('2d');
  
  // Téglalap rajzolása
  ctx.fillStyle = 'blue';
  ctx.fillRect(50, 50, 100, 100);
  
  // Kör rajzolása
  ctx.beginPath();
  ctx.arc(200, 150, 50, 0, 2 * Math.PI);
  ctx.fillStyle = 'red';
  ctx.fill();
</script>

SVG: Skaláló vektorgrafika


<svg width="200" height="200">
  <circle cx="100" cy="100" r="50" fill="blue" />
  <rect x="50" y="50" width="100" height="100" fill="red" opacity="0.5" />
  <line x1="0" y1="0" x2="200" y2="200" stroke="black" stroke-width="2" />
  <polygon points="100,10 40,198 190,78 10,78 160,198" fill="green" />
</svg>

Web Components alapjai

A Web Components lehetővé teszik saját HTML elemek létrehozását.


<!-- HTML Template -->
<template id="userCard">
  <style>
    .card { border: 1px solid #ccc; padding: 10px; }
  </style>
  <div class="card">
    <h3><slot name="name">Ismeretlen</slot></h3>
    <p><slot name="bio"></slot></p>
  </div>
</template>

<!-- Custom element használata -->
<user-card>
  <span slot="name">János</span>
  <span slot="bio">Web fejlesztő</span>
</user-card>

<script>
  customElements.define('user-card', class extends HTMLElement {
    connectedCallback() {
      const template = document.getElementById('userCard');
      this.attachShadow({mode: 'open'}).appendChild(
        template.content.cloneNode(true)
      );
    }
  });
</script>

Strukturált adat (Microdata és Schema.org)

A strukturált adat segít a keresőmotoroknak megérteni az oldal tartalmát.


<!-- Termék schema -->
<article itemscope itemtype="https://schema.org/Product">
  <h1 itemprop="name">Prémium fejhallgató</h1>
  <img itemprop="image" src="headphones.jpg" alt="Fejhallgató">
  <p itemprop="description">Ultra minőségű hangélmény...</p>
  
  <div itemprop="offers" itemscope itemtype="https://schema.org/Offer">
    <span itemprop="price">45000</span>
    <meta itemprop="priceCurrency" content="HUF">
  </div>

  <div itemprop="aggregateRating" itemscope itemtype="https://schema.org/AggregateRating">
    <span itemprop="ratingValue">4.5</span>/5 
    <span itemprop="reviewCount">248</span> értékelés
  </div>
</article>

<!-- Személy schema -->
<article itemscope itemtype="https://schema.org/Person">
  <h1 itemprop="name">Dr. Kiss Péter</h1>
  <p itemprop="jobTitle">Web fejlesztő</p>
  <p><a itemprop="url" href="https://example.com">Weboldal</a></p>
</article>

JSON-LD alternatív:


<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BlogPosting",
  "headline": "HTML haladó technikák",
  "image": "image.jpg",
  "datePublished": "2025-02-16",
  "author": {
    "@type": "Person",
    "name": "ProgiSuli"
  }
}
</script>

Open Graph és Twitter Card

Szociális média megosztásához optimalizálás.


<!-- Open Graph (Facebook, LinkedIn, stb.) -->
<meta property="og:title" content="HTML Modul – ProgiSuli">
<meta property="og:description" content="Tanulj meg HTML-t a kezdéstől a profi szintig">
<meta property="og:image" content="https://example.com/og-image.png">
<meta property="og:url" content="https://example.com/html.html">
<meta property="og:type" content="article">

<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="HTML Modul – ProgiSuli">
<meta name="twitter:description" content="Tanulj meg HTML-t a kezdéstől a profi szintig">
<meta name="twitter:image" content="https://example.com/twitter-image.png">
<meta name="twitter:creator" content="@ProgiSuli">

Performance optimalizáció

HTML teljesítmény javítása.


<!-- Defer script betöltés -->
<script src="script.js" defer></script>

<!-- Async script betöltés (párhuzamos) -->
<script src="analytics.js" async></script>

<!-- Kép lazy loading -->
<img src="image.jpg" loading="lazy" alt="Leírás">

<!-- Responsív képek (srcset) -->
<img 
  src="small.jpg" 
  srcset="small.jpg 480w, medium.jpg 960w, large.jpg 1440w"
  sizes="(max-width: 600px) 480px, (max-width: 1200px) 960px, 1440px"
  alt="Responzív kép">

<!-- Picture elem modern formátumokhoz -->
<picture>
  <source srcset="image.webp" type="image/webp">
  <source srcset="image.jpg" type="image/jpeg">
  <img src="image.jpg" alt="Kép">
</picture>

<!-- Preload kritikus erőforrások -->
<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="critical.css" as="style">

<!-- Prefetch nem kritikus erőforrások -->
<link rel="prefetch" href="next-page.html">

Progressive Enhancement és válaszadó design

Progressive Enhancement azt jelenti: alapvetően működik JavaScript nélkül is, majd fokozatosan javul.


<!-- Noscript fallback -->
<form action="/search" method="GET">
  <input type="text" name="q">
  <button type="submit">Keresés</button>
</form>
<noscript>
  <p>A JavaScript letiltva van. Az oldal alapvetően működik, но някои funkciók nem érhetőek el.</p>
</noscript>

<!-- Gépi olvasható formátum -->
<meta name="format-detection" content="telephone=yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

<!-- Responsive viewport -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0">

<!-- Webmanifest PWA-hoz -->
<link rel="manifest" href="manifest.json">

Biztonság HTML szinten

HTML alapú biztonsági legjobb gyakorlatok.


<!-- Content Security Policy -->
<meta http-equiv="Content-Security-Policy" 
      content="default-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' fonts.googleapis.com">

<!-- X-UA-Compatible -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">

<!-- Referrer-Policy -->
<meta name="referrer" content="strict-origin-when-cross-origin">

<!-- Permissions Policy (Feature Policy) -->
<meta http-equiv="Permissions-Policy" content="geolocation=(), microphone=(), camera=()">

<!-- HTTPS csak -->
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">

<!-- Sandbox iframe -->
<iframe sandbox="allow-same-origin allow-scripts" src="user-content.html"></iframe>

💻 Interaktív HTML szerkesztő

Írj HTML kódot és azonnal látod az eredményt. Ideális a gyakorláshoz és teszteléshez:

🎓 HTML Vizsga

Teszteld a tudásod egy teljes HTML vizsgán! 10 kérdés, összes szint abban.