HTML gyors referencia

<head>

Metaadatokat tartalmaz: cím, karakterkódolás, stílus, script.

<head>
  <title>Oldal címe</title>
  <meta charset="utf-8">
</head>

<body>

A látható tartalom konténere: szöveg, képek, gombok, stb.

<body>
  <h1>Üdv!</h1>
</body>

<footer>

Az oldal alján lévő információk: szerző, linkek, jogi nyilatkozat.

<footer>
  © 2025 Barnabás
</footer>

<a href>

Hivatkozás más oldalra vagy fájlra.

<a href="oldal.html">Ugrás</a>

<img>

Kép beágyazása az oldalba.

<img src="kep.jpg" alt="Leírás">

<form>, <input>, <button>

Űrlap mezők és gombok.

<form>
  <input type="text" placeholder="Név">
  <button>Küldés</button>
</form>

<nav>

Fő vagy mellék navigációs linkek csoportja.

<nav>
  <a href="#home">Kezdőlap</a>
  <a href="#kapcsolat">Kapcsolat</a>
</nav>

<section>

Tematikus tartalomcsoport, például egy fejezet vagy blokk.

<section>
  <h2>Rólunk</h2>
  <p>Bemutatkozás szövege...</p>
</section>

<article>

Önálló egység: blogposzt, hír, kommentár.

<article>
  <h2>Hírek</h2>
  <p>Ma megjelent egy új verzió...</p>
</article>

<meta>

Oldal leírása, karakterkódolás, kulcsszavak.

<meta charset="utf-8">
<meta name="description" content="Gyors HTML segédlet">
<meta name="keywords" content="html, segédlet, referencia">

<title>

A böngésző címsorában megjelenő szöveg.

<title>HTML Gyors Segédlet</title>

<label> + <textarea>

Szövegmező több sorhoz, címkével.

<label for="uzenet">Üzenet:</label>
<textarea id="uzenet" rows="4"></textarea>

<div>

Semleges konténer, amelybe más elemeket csoportosíthatsz.

<div class="doboz">
  <p>Szöveg egy dobozban</p>
</div>

<span>

Szövegen belüli kiemelés vagy stílusozás céljára.

<p>Ez egy <span style="color:magenta">kiemelt</span> szó.</p>

<ul> + <li>

Rendezetlen lista pontozott elemekkel.

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

<ol> + <li>

Rendezett lista számozott elemekkel.

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

<strong> + <em>

Fontos vagy hangsúlyos szöveg kiemelése.

<p>Ez <strong>fontos</strong> és <em>hangsúlyos</em> szöveg.</p>

<br>

Sortörés a szövegben, új sor kezdése.

<p>Első sor<br>Második sor</p>

<input> típusok

Különböző beviteli mezők űrlaphoz.

<input type="checkbox"> Elfogadom

<input type="radio" name="valasztas"> Igen

<input type="date">

<input type="range" min="0" max="100">

<table>

Adatok rendezett megjelenítése sorokban és oszlopokban.

<table>
  <thead>
    <tr><th>Név</th><th>Kor</th></tr>
  </thead>
  <tbody>
    <tr><td>Anna</td><td>28</td></tr>
    <tr><td>Béla</td><td>35</td></tr>
  </tbody>
</table>

<script>

JavaScript kód beágyazása az oldalba.

<script>
  alert("Helló HTML!");
</script>

<style>

Belső CSS szabályok az oldalhoz.

<style>
  body {
    background: #0f1115;
    color: white;
  }
</style>

<link>

Külső fájl (pl. CSS) hivatkozása a <head> részben.

<link rel="stylesheet" href="style.css">

<details> + <summary>

Interaktív összecsukható tartalom.

<details>
  <summary>További információ</summary>
  <p>Ez a rész csak kattintás után látszik.</p>
</details>

<dialog>

Beépített modális párbeszédablak.

<dialog open>
  <p>Ez egy felugró ablak.</p>
</dialog>

<button>

Interaktív gomb, amely eseményt indíthat el.

<button onclick="alert('Kattintottál!')">
  Kattints ide
</button>

<input type="password">

Jelszó beviteli mező, amely elrejti a karaktereket.

<form>
  <label for="pw">Jelszó:</label>
  <input type="password" id="pw" name="pw">
</form>

<input type="file">

Fájl kiválasztása és feltöltése az űrlapon keresztül.

<form>
  <label for="fajl">Válassz fájlt:</label>
  <input type="file" id="fajl" name="fajl">
</form>

<h1>–<h6>

Címsorok különböző szinteken.

<h1>Főcím</h1>
<h2>Alcím</h2>

<p>

Szöveges bekezdés létrehozása.

<p>Ez egy bekezdés.</p>

<p>

Szöveges bekezdés létrehozása.

<p>Ez egy bekezdés.</p>

<blockquote>

Hosszabb idézet kiemelése.

<blockquote>Ez egy idézet.</blockquote>

<cite>

Idézet vagy mű forrásának megjelölése.

<p>Forrás: <cite>HTML dokumentáció</cite></p>

<code>

Kódrészlet megjelenítése monospace betűvel.

<p>Használd a <code><div></code> taget.</p>

<pre>

Előformázott szöveg, megtartja a szóközöket és sortöréseket.

<pre>
  sor1
  sor2
</pre>

<small>

Kisebb méretű szöveg.

<p>Ez <small>kisebb</small> szöveg.</p>

<mark>

Szöveg kiemelése háttérszínnel.

<p>Ez egy <mark>kiemelt</mark> szó.</p>

<abbr>

Rövidítés magyarázattal.

<p><abbr title="HyperText Markup Language">HTML</abbr></p>

<address>

Kapcsolati információk megjelenítése.

<address>
  Írj nekünk: info@example.com
</address>

<sup> + <sub>

Felső és alsó indexek.

H<sub>2</sub>O, x<sup>2</sup>

<progress>

Folyamat előrehaladásának jelzése.

<progress value="70" max="100"></progress>

<meter>

Mérőszám, például hőmérséklet vagy arány.

<meter value="0.6">60%</meter>

<output>

Űrlap számított eredménye.

<form oninput="res.value=a.value*b.value">
  <input type="number" id="a"> ×
  <input type="number" id="b"> =
  <output name="res"></output>
</form>

<canvas>

Grafikus rajzfelület JavaScripthez.

<canvas id="rajz" width="200" height="100"></canvas>

<svg>

Beágyazott vektoros grafika.

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" fill="magenta" />
</svg>

<iframe>

Külső weboldal beágyazása.

<iframe src="https://example.com" width="300" height="200"></iframe>

<video>

Videófájl beágyazása az oldalba, vezérlőkkel.

<video controls width="320">
  <source src="film.mp4" type="video/mp4">
  A böngésződ nem támogatja a videó lejátszást.
</video>

<caption>

A táblázat címének megadása, amely a táblázat tetején jelenik meg.

<table>
  <caption>Felhasználói adatok</caption>
  <tr><th>Név</th><th>Kor</th></tr>
  <tr><td>Anna</td><td>28</td></tr>
</table>