Ezektől a modern HTML elemektől lesz igazán profi a weboldalad

A modern webfejlesztés alapja a jól felépített, optimalizált HTML szerkezet. Egy átgondoltan megírt HTML nemcsak a weboldal kinézetét és működését határozza meg, hanem jelentősen befolyásolja a betöltési sebességet, a keresőoptimalizálást (SEO), illetve a felhasználói élményt is. Ebben a bejegyzésben bemutatom a legfontosabb és legérdekesebb HTML elemeket, valamint megosztok néhány bevált optimalizációs tippet, amelyekkel weboldalad gyorsabb, átláthatóbb és mindenki számára elérhetőbb lesz.

1. loading="lazy" képeknél és iframe-eknél

A loading="lazy" attribútum egy modern HTML megoldás, amellyel jelentősen javítható a weboldalak betöltési sebessége és felhasználói élménye, különösen sok képet vagy iframe-et tartalmazó oldalakon. A lusta betöltés lényege, hogy a böngésző csak akkor tölti be azokat a képeket vagy iframe-eket, amikor a felhasználó közel kerül hozzájuk görgetés közben, így a nem azonnal látható (offscreen) elemek nem terhelik feleslegesen az oldal induló letöltését.

Ez a technika csökkenti az oldal első betöltéséhez szükséges adatforgalmat, gyorsabbá teszi a megjelenést, és javítja a Google Page Experience Indexben mért Largest Contentful Paint (LCP) értéket is, ami a keresőoptimalizálás szempontjából kulcsfontosságú. A loading="lazy" attribútum használata rendkívül egyszerű: elég hozzáadni az adott kép vagy iframe HTML eleméhez, például:

<img src="kep.jpg" alt="Leírás" loading="lazy">
<iframe src="video.html" loading="lazy"></iframe>

A legtöbb modern böngésző már támogatja ezt a funkciót, így nincs szükség külön JavaScript megoldásokra vagy külső könyvtárakra. Az attribútumot főként olyan képeknél érdemes alkalmazni, amelyek az oldal alján vagy a “hajtás” (fold) alatt helyezkednek el, hiszen ezek betöltése ráér, amíg a felhasználó oda nem görget.

2. contenteditable – Tégy szerkeszthetővé BÁRMIT!

A contenteditable attribútum lehetővé teszi, hogy bármilyen HTML elemet szerkeszthetővé tegyünk közvetlenül a böngészőben. Ha például egy <div> vagy <p> elemhez hozzáadod a contenteditable="true" attribútumot, a felhasználó az oldalon élőben módosíthatja annak tartalmát – akár formázott szöveget is, nem csak sima karaktereket. Ez különösen hasznos lehet például admin felületeken, CMS-ekben vagy interaktív webes alkalmazásokban.

<div contenteditable="true">Ezt a szöveget szerkesztheted!</div>

Ha csak sima szöveg szerkesztését engedélyeznéd, használhatod a contenteditable=”plaintext-only” értéket is, így minden formázás eltűnik beillesztéskor.

Hogyan lehet elmenteni a tartalmat adatbázisba?

Ez mind szép és jó, de semmit nem ér, ha nem tudjuk elmenteni a beírt szöveget az adatbázisunkba. A böngészőben szerkesztett tartalmat JavaScript segítségével tudod lekérni, majd AJAX hívással elküldeni a szerverre, ahol például PHP-val adatbázisba mentheted. A másik lehetőség, hogy egyszerűen átmented egy hidden inputba a tartalmát, amit backend oldalon feldolgozol.

3. pattern űrlapmezőknél

A pattern attribútumot HTML űrlapmezőknél használhatod arra, hogy meghatározd, milyen formátumú adatot fogad el az adott mező. Ez a formátum egy reguláris kifejezés (regular expression), amelyhez a felhasználó által beírt értéknek pontosan illeszkednie kell ahhoz, hogy az űrlapot el lehessen küldeni.

Három betűs országkód elfogadása:

<input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Három betűs országkód">

Jelszó, legalább 8 karakter, tartalmaz számot, kis- és nagybetűt:

<input type="password" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" title="Legalább 8 karakter, kis- és nagybetű, valamint szám">

A felhasználók számára a title attribútum segítségével tudsz rövid magyarázatot adni arról, hogy pontosan milyen formátumú adatot vársz el az adott mezőben, így könnyebben megértik, hogyan kell helyesen kitölteni azt.

Fontos tudni, hogy a pattern attribútum kizárólag bizonyos input típusokkal működik, mint például a text, search, url, tel, email és password mezők esetében.

Amennyiben a beírt érték nem felel meg a megadott mintának, a böngésző automatikusan hibát jelez, és akár CSS segítségével – például az :invalid pszeudo-osztály használatával – vizuális visszajelzést is adhatsz a felhasználónak, például piros szegéllyel emelheted ki a hibás mezőt.

4. draggable a mozgatásért

A draggable attribútum lehetővé teszi, hogy bármilyen HTML elemet szabadon mozgathatóvá tegyél az oldalon, ezzel jelentősen növelve az interaktivitást és a felhasználói élményt. Alapértelmezés szerint csak bizonyos elemek, például képek és linkek, húzhatók, de a draggable="true" beállítással bármely elem (például egy div vagy egy szövegrész) is mozgathatóvá válik.

Hogyan működik?

Ha egy elemhez hozzáadod a draggable=”true” attribútumot, a böngésző engedélyezi, hogy az adott elemet egérrel „megfogd” és húzd. Például:

<div draggable="true">Húzz el engem!</div>

Ezután már alapvető drag-and-drop műveleteket tudsz végezni az elemmel

Drag and Drop események
A draggable attribútum önmagában csak az elemet teszi húzhatóvá, de az igazi varázslat akkor kezdődik, amikor JavaScript eseményekkel (pl. dragstart, drag, dragend, drop) szabályozod, mi történjen húzáskor és elengedéskor. Például:

• dragstart: akkor fut le, amikor elkezded húzni az elemet.
• drag: húzás közben folyamatosan fut.
• dragend: amikor elengeded az elemet.
• drop: amikor egy másik elemre „leejted” a húzott elemet.

Ezekkel az eseményekkel például adatokat adhatsz át, vizuális visszajelzést adhatsz, vagy dinamikusan módosíthatod az oldal tartalmát.

Példa egy egyszerű drag-and-drop megvalósítására

<div id="dragMe" draggable="true">Húzz el engem!</div>
<div id="dropHere" style="width:200px;height:200px;border:1px dashed #aaa;"></div>

<script>
const dragMe = document.getElementById('dragMe');
const dropHere = document.getElementById('dropHere');

dragMe.addEventListener('dragstart', function(e) {
  e.dataTransfer.setData('text/plain', dragMe.id);
});

dropHere.addEventListener('dragover', function(e) {
  e.preventDefault(); // szükséges a drop engedélyezéséhez
});

dropHere.addEventListener('drop', function(e) {
  e.preventDefault();
  const id = e.dataTransfer.getData('text');
  const elem = document.getElementById(id);
  dropHere.appendChild(elem);
});
</script>

5. inputmode a mobil billentyűzet kezelésért

Az inputmode egy HTML attribútum, amellyel meghatározhatod, hogy mobileszközökön és tableteken milyen típusú virtuális billentyűzet jelenjen meg az adott űrlapmezőhöz. Ez nem befolyásolja közvetlenül az elfogadott karaktereket (azt továbbra is az input típusa, illetve a pattern attribútum szabályozza), viszont jelentősen javítja a felhasználói élményt, hiszen a megfelelő billentyűzetet kínálja fel az eszköz.

Mire jó az inputmode?

• Gyorsabb és kényelmesebb adatbevitel: A felhasználó azonnal a megfelelő billentyűzetet kapja, például számokat egy telefonszámhoz, vagy csak számokat egy PIN-kódhoz.
• Kevesebb hibalehetőség: Ha például csak számokat vársz el, nem jelenik meg a betűkészlet, így a felhasználó nem tud véletlenül betűt beírni.
• Profibb, felhasználóbarátabb űrlapok: A modern webes alkalmazásoknál ez már elvárás.

Hogyan használd?

Az inputmode attribútumot a <input> vagy <textarea> elemekhez adhatod hozzá. Néhány gyakori érték:

• text – alapértelmezett, általános szövegbevitel
• numeric – csak számok (0–9), például PIN-kódhoz
• decimal – tizedesjegyeket is tartalmazó számokhoz
• tel – telefonszámhoz, általában számokat és néhány speciális karaktert kínál
• email – e-mail címhez, megjelenik a @ és a pont
• url – webcímhez, megjelenik a / és a pont

<!-- Csak számokhoz -->
<input type="text" inputmode="numeric" pattern="[0-9]*" placeholder="Csak számok">

<!-- Tizedesjegyekhez -->
<input type="text" inputmode="decimal" placeholder="Ár (pl. 12.50)">

<!-- Telefonszámhoz -->
<input type="tel" inputmode="tel" placeholder="Telefonszám">

<!-- E-mailhez -->
<input type="email" inputmode="email" placeholder="E-mail cím">

6. Használd a telefon kameráját!

Az type=”file” input elemnél használható a capture attribútum, amelynek segítségével meghatározhatod, hogy mobileszközön a kamera melyik oldalát (előlapi vagy hátlapi) használja a fájl (általában kép vagy videó) rögzítéséhez. Ez különösen hasznos, ha például profilképet vagy dokumentumot szeretnél feltöltetni a felhasználóval.

Hogyan működik a capture attribútum?

• capture=”user”
  Az előlapi kamerát (selfie kamera) nyitja meg, így a felhasználó magáról készíthet képet.
• capture=”environment”
  A hátlapi kamerát (hátsó kamera) aktiválja, ami ideális például dokumentumok, tájak vagy tárgyak fotózásához.

Példa előlapi kamera használatra:

<input type="file" accept="image/*" capture="user">

7. type="color" a beépített színpalettáért

Az <input type="color"> egy speciális HTML űrlapmező, amely lehetővé teszi, hogy a felhasználó egyszerűen, vizuálisan válasszon ki egy színt egy színválasztó (color picker) segítségével. Ez az elem főleg olyan helyzetekben hasznos, amikor a felhasználónak szabadon kell színt választania, például egy profil testreszabásánál, grafikai alkalmazásokban, vagy egyedi színsémák beállításánál.

Hogyan működik?

Amikor az <input type="color"> mezőre kattintasz, a böngésző automatikusan megnyit egy beépített színválasztó ablakot. Itt a felhasználó kiválaszthat egy színt, amelynek hexadecimális kódja (pl. #ff0000) automatikusan bekerül az input mező értékeként.

Egyszerű példa:

<label for="favcolor">Válaszd ki a kedvenc színed:</label>
<input type="color" id="favcolor" name="favcolor" value="#ff0000">

Példa: Szín élő előnézettel
Ebben a példában a felhasználó által kiválasztott szín azonnal megjelenik egy kis négyzetben.

<input type="color" id="colorPicker" value="#00ff00">
<div id="preview" style="width:50px; height:50px; border:1px solid #aaa;"></div>

<script>
  const picker = document.getElementById('colorPicker');
  const preview = document.getElementById('preview');
  picker.addEventListener('input', function() {
    preview.style.backgroundColor = picker.value;
  });
</script>

8. picture a képbetöltés optimalizálására

A <picture> egy speciális HTML elem, amely lehetővé teszi, hogy egyetlen kép helyén többféle forrást (képfájlt) adj meg, és a böngésző automatikusan kiválasztja közülük a legmegfelelőbbet. Ezt főleg reszponzív (különböző képernyőméretű, felbontású vagy típusú eszközökre optimalizált) képek megjelenítésére használják.

Hogyan működik?

A <picture> elem belsejében egy vagy több <source> elemet helyezel el, amelyekhez különböző képfájlokat és feltételeket (pl. media query-ket, képformátumokat) adhatsz meg. A végén egy sima <img> tagot is elhelyezel, amely alapértelmezettként szolgál, ha egyik <source> sem felel meg.

Egyszerű példa:

<picture>
  <source srcset="kep-nagy.webp" type="image/webp" media="(min-width: 800px)">
  <source srcset="kep-kicsi.webp" type="image/webp" media="(max-width: 799px)">
  <img src="kep-alap.jpg" alt="Leírás a képről">
</picture>

A picture tag nagyszerűen használható a különböző méretű és különböző típusú képek betöltésére. Manapság a WebP képek eléggé elterjedtek már, nagyon kevés böngésző az, ami nem támogatja. Használjuk bátran, hiszen szinte azonos minőség mellett jóval kisebb fájlmérettel rendelkezik, mint JPG-be mentett társa.

Ebben a bejegyzésemben korábban, már ódákat zengtem erről a megoldásról: