Mit jelent a HTML? Alapfogalmak, tagek és egy egyszerű példa kezdőknek

A weboldalak, amelyeket nap mint nap böngészünk, a legkülönfélébb tartalmakat jelenítik meg: szövegeket, képeket, videókat, interaktív elemeket. Ezen komplex struktúrák mögött egy alapvető nyelv áll, amely a web gerincét adja. Ez a nyelv a HTML, vagyis a HyperText Markup Language. Kezdő webfejlesztők, tartalomgyártók és mindenki számára, aki valaha is elgondolkodott azon, hogyan épül fel egy weboldal, a HTML megértése az első és legfontosabb lépés.

Áttekintés

Mi az a HTML? A web alapköve

Alapvető HTML fogalmak

Gyakran használt HTML tagek és céljuk

`, „ stb.) logikusan tagolja az alfejezeteket.
Bekezdés („): A leggyakrabban használt tag szöveges tartalomhoz. Egy bekezdést jelöl. Fontos, hogy a bekezdéseket ne használjuk pusztán sortörésre; erre a „ szolgál.
Félkövér és kiemelés („, „): A „ tag erős hangsúlyt ad a szövegnek, ami szemantikailag azt jelenti, hogy fontos. A „ tag egyszerűen félkövérré teszi a szöveget extra szemantikai jelentés nélkül. SEO szempontból a „ használata preferált a kulcsszavak kiemelésére, mivel ez jelzi a keresőmotoroknak a szövegrész fontosságát.
Dőlt és hangsúlyozás („, „): Az „ tag a szöveg hangsúlyozására szolgál, ami szintén szemantikai jelentéssel bír (pl. kiejtésbeli hangsúly, vagy ha egy szó jelentésére utalunk). Az „ tag egyszerűen dőlt betűssé teszi a szöveget különösebb jelentés nélkül (pl. idegen szavaknál, műcímeknél, gondolatoknál). Hasonlóan a félkövér tagekhez, az „ a preferált a hangsúlyozáshoz.
Sortörés („): Egy sortörést szúr be, új sorba kezdve a szöveget. Ne használjuk bekezdések elválasztására, arra ott a „. Használata leginkább akkor indokolt, ha egy szövegen belül szeretnénk új sort kezdeni anélkül, hogy új bekezdésbe kezdenénk (pl. versek, címlisták).
Vízszintes vonal („): Egy tematikus törést, elválasztó vonalat jelöl a tartalomban. Segít a hosszú tartalmak tagolásában.
Idézet („, „): A „ egy hosszabb, különálló idézetet jelöl, amelyet általában behúzással jelenítenek meg a böngészők. A „ egy rövid, beágyazott idézetet jelöl, amelyet a böngészők általában idézőjelek közé tesznek. Mindkettőhöz használható a `cite` attribútum, amely a forrás URL-jét adja meg.

Listák

A listák kiválóan alkalmasak információk strukturált és könnyen áttekinthető bemutatására, legyen szó lépésekről, tulajdonságokról vagy definíciókról.

Rendezett lista („): Számozott listát hoz létre. A listaelemek „ tagekkel vannak jelölve. Használata akkor javasolt, ha a sorrend fontos (pl. recept lépései, utasítások).
Rendezetlen lista („): Felsorolásjelekkel ellátott listát hoz létre. A listaelemek szintén „ tagekkel vannak jelölve. Akkor használjuk, ha a sorrend nem számít (pl. egy termék jellemzői, egy blogbejegyzés témái).
Definíciós lista („, „, „): Fogalmak és azok definícióinak listázására szolgál. A „ a lista konténere, a „ a fogalom (definíciós kifejezés), a „ pedig a fogalom leírása (definíciós adat). Ideális szószedetekhez, GYIK szekciókhoz.

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

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

<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets</dd>
</dl>

Linkek és képek

Ezek a tagek teszik lehetővé a navigációt és a vizuális tartalom beágyazását, amelyek a web interaktív és vizuális élményét adják.

Link („): A HTML egyik legfontosabb tagje, amely lehetővé teszi a weboldalak közötti navigációt. Az `href` attribútum adja meg a cél URL-t. A link szövege (anchor text) rendkívül fontos a SEO szempontjából, mivel ez jelzi a keresőmotoroknak, hogy miről szól a céloldal. A `target=”_blank”` attribútummal új fülön nyithatjuk meg a linket, a `rel=”nofollow”` attribútummal pedig jelezhetjük a keresőmotoroknak, hogy nem szeretnénk „link juice”-t továbbítani a céloldalra.
Kép („): Képek beágyazására szolgál. Az `src` attribútum adja meg a kép forrását (URL), az `alt` attribútum pedig a kép alternatív szövegét. Az `alt` szöveg kulcsfontosságú az akadálymentesség és a SEO szempontjából, mivel ez jelenik meg, ha a kép nem töltődik be, ezt olvassák fel a képernyőolvasók, és ez segít a keresőmotoroknak megérteni a kép tartalmát. A `width` és `height` attribútumok segítenek a böngészőnek a helyfoglalásban, mielőtt a kép betöltődik, javítva a betöltési sebességet.

<a href=”https://www.google.com” target=”_blank” rel=”noopener noreferrer”>Ugrás a Google-ra</a>
<img src=”path/to/image.jpg” alt=”Példa kép leírása” width=”300″ height=”200″>

Táblázatok

A táblázatok strukturált adatok megjelenítésére szolgálnak, sorokba és oszlopokba rendezve. Fontos, hogy ne használjuk őket elrendezési célokra, arra a CSS sokkal alkalmasabb és rugalmasabb.

Tag
Leírás
Példa

„
A táblázat konténere. Ideális adatok, statisztikák megjelenítésére.

„
A táblázat fejlécének csoportja. Tartalmazza a „ elemeket.

„
A táblázat törzsének csoportja. Tartalmazza a fő adatokat.

„
A táblázat láblécének csoportja. Összesítéseket vagy lábjegyzeteket tartalmazhat.

„
Egy táblázati sor. Minden sorban „ vagy „ cellák vannak.
`<tr>…</tr>`

„
Táblázati fejléc cella. Félkövérrel jelenik meg, és szemantikailag a sor vagy oszlop címét jelöli.
`<th>Fejléc</th>`

„
Táblázati adatcella. Az aktuális adatot tartalmazza.
`<td>Adat</td>`

A `colspan` és `rowspan` attribútumokkal egyesíthetünk több cellát vízszintesen vagy függőlegesen, ami komplexebb táblázatstruktúrák létrehozását teszi lehetővé. Azonban használatukkal érdemes óvatosan bánni, hogy a táblázat továbbra is akadálymentes maradjon.

Szemantikus HTML5 tagek

A HTML5 bevezette az úgynevezett szemantikus tageket, amelyek nem csak strukturálják a tartalmat, hanem jelentést is adnak neki. Ez segít a böngészőknek, a keresőmotoroknak és a kisegítő technológiáknak jobban megérteni az oldal tartalmát és célját. Ezáltal javul az akadálymentesség és a SEO is, mivel a keresőmotorok hatékonyabban tudják indexelni és rangsorolni az oldalt a tartalom kontextusa alapján.

„: Az oldal vagy egy szekció fejlécét tartalmazza, gyakran logóval, navigációval, címmel. Ez a tartalom bevezető része.
„: Navigációs linkeket tartalmazó szekció. Ide tartoznak a főmenük, oldalsáv menük, vagy belső navigációs linkek csoportjai.
„: Az oldal fő és egyedi tartalmát tartalmazza. Egy dokumentumban csak egy „ elem lehet, és ez a legfontosabb tartalmi blokk.
„: Független, önmagában is értelmezhető tartalmi egység (pl. blogbejegyzés, hír, komment, fórumbejegyzés). Ez a tartalom önállóan is megállja a helyét.
„: Egy dokumentum egy általános szekcióját jelöli, amely általában egy címsorral kezdődik. Akkor használjuk, ha nincs specifikusabb szemantikus tag, de a tartalom egy logikai egységet képez.
„: Az oldaltartalomtól elkülönülő, de hozzá kapcsolódó tartalmat tartalmaz (pl. oldalsáv, reklámok, kapcsolódó linkek, szerzői információk).
„: Az oldal vagy egy szekció láblécét tartalmazza, gyakran szerzői jogi információkkal, kapcsolati adatokkal, navigációs linkekkel.
„ és „: Képek, kódblokkok, diagramok vagy más médiaelemek beágyazására, a „ pedig a hozzájuk tartozó feliratot adja meg. Ez a tag segít a médiaelemek és a hozzájuk tartozó leírások szemantikus összekapcsolásában.

<header>
<img src=”logo.png” alt=”Cég logója”>
<h1>Weboldal Címe</h1>
<nav>
<ul>
<li><a href=”/”>Főoldal</a></li>
<li><a href=”/rolunk”>Rólunk</a></li>
<li><a href=”/kapcsolat”>Kapcsolat</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h2>Blogbejegyzés címe</h2>
<p>Ez egy blogbejegyzés tartalma.</p>
<figure>
<img src=”article-img.jpg” alt=”Kép a cikkhez”>
<figcaption>A cikk illusztrációja.</figcaption>
</figure>
</article>
<aside>
<h3>Kapcsolódó cikkek</h3>
<ul>
<li><a href=”#”>Egy másik érdekes cikk</a></li>
</ul>
</aside>
</main>
<footer>
<p>© 2023 Minden jog fenntartva. <a href=”/adatvedelem”>Adatvédelmi nyilatkozat</a></p>
</footer>

Általános konténer tagek: „ és „

A „ (division) és „ tagek általános célú konténerek, amelyek önmagukban nem rendelkeznek szemantikai jelentéssel. Fő szerepük, hogy csoportosítsák a tartalmat, lehetővé téve a CSS stílusok vagy a JavaScript funkcionalitás alkalmazását egy adott blokkra vagy szövegrészre. Ezek a „semleges” elemek akkor hasznosak, ha nincs specifikusabb szemantikai tag, amely megfelelne a célnak.

„: Egy blokkszintű elem, ami azt jelenti, hogy alapértelmezetten új sort kezd, és a rendelkezésre álló teljes szélességet elfoglalja. Ideális nagyobb tartalmi blokkok, szekciók csoportosítására, amikor a szemantikus „ vagy „ nem megfelelő. Gyakran használják elrendezési célokra a CSS-sel kombinálva.
„: Egy soron belüli (inline) elem, ami azt jelenti, hogy nem kezd új sort, és csak annyi helyet foglal el, amennyi a tartalmához szükséges. Ideális szövegrészek, szavak vagy karakterek stílusozására anélkül, hogy megváltoztatná a szövegfolyamot.

<div class=”kontener”>
<p>Ez egy szöveg egy <span style=”color: blue;”>kiemelt</span> résszel.</p>
</div>
A „ és „ használata elengedhetetlen a modern, reszponzív weboldalak felépítéséhez, ahol a CSS segítségével finoman hangolható az elemek elrendezése és megjelenése. Mindig törekedjünk arra, hogy a szemantikus tageket preferáljuk, és csak akkor használjuk ezeket az általános konténereket, ha nincs más megfelelő opció.

Egyszerű HTML példa kezdőknek

`) a hobbiknak, majd egy rendezetlen listát („) a kedvenc tevékenységeinkről. Minden hobbi egy-egy „ elemen belül helyezkedik el. Ezt követően egy újabb bekezdéssel zárjuk a bemutatkozást.
<body>
<h1>Üdvözlöm a személyes oldalamon!</h1>
<p>Szia, a nevem <strong>Példa Márton</strong>, és ez az első HTML oldalam. Örülök, hogy itt vagy!</p>

<h2>A hobbijaim</h2>
<ul>
<li>Olvasás (különösen fantasy regények)</li>
<li>Kerékpározás a természetben</li>
<li>Sütés-főzés, új receptek kipróbálása</li>
<li>Webfejlesztés tanulása</li>
</ul>

<p>Szeretem felfedezni a világot, és mindig nyitott vagyok az új dolgokra.</p>
</body>

5. lépés: Link hozzáadása

Végül adjunk hozzá egy linket, amely egy fiktív kapcsolati oldalra mutat. Használhatunk egy „ taget a link köré, hogy külön bekezdésben jelenjen meg, és a felhasználó könnyen megtalálja a hivatkozást. Az „ tag `href` attribútuma adja meg a céloldal URL-jét.
<body>
<h1>Üdvözlöm a személyes oldalamon!</h1>
<p>Szia, a nevem <strong>Példa Márton</strong>, és ez az első HTML oldalam. Örülök, hogy itt vagy!</p>

<p>Szeretem felfedezni a világot, és mindig nyitott vagyok az új dolgokra.</p>

<p>Ha szeretne kapcsolatba lépni velem, <a href=”/kapcsolat.html”>kattintson ide</a>.</p>
</body>

A teljes HTML kód

Íme az elkészült, egyszerű HTML oldal teljes kódja:
<!DOCTYPE html>
<html lang=”hu”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Bemutatkozó oldalam – HTML példa</title>
</head>
<body>
<h1>Üdvözlöm a személyes oldalamon!</h1>
<p>Szia, a nevem <strong>Példa Márton</strong>, és ez az első HTML oldalam. Örülök, hogy itt vagy!</p>

<p>Szeretem felfedezni a világot, és mindig nyitott vagyok az új dolgokra.</p>

<p>Ha szeretne kapcsolatba lépni velem, <a href=”/kapcsolat.html”>kattintson ide</a>.</p>
</body>
</html>

Ezt a kódot egy egyszerű szövegszerkesztőbe (pl. Jegyzettömb, VS Code, Sublime Text) beillesztve, majd `.html` kiterjesztéssel (pl. `index.html`) elmentve, majd a fájlt a böngészőben megnyitva láthatjuk az elkészült weboldalt. Ez a folyamat a weboldal készítés alapja, és az első lépés a webfejlesztés izgalmas világába.

HTML best practice és tippek a hatékony kódoláshoz

A HTML szerepe a SEO-ban

A HTML nem egy programozási nyelv a hagyományos értelemben, mint például a Python vagy a JavaScript, amelyek logikai műveleteket és adatfeldolgozást végeznek. Ehelyett egy jelölőnyelv, amely a weboldal tartalmának struktúráját és jelentését írja le. Gondoljunk rá úgy, mint egy épület alaprajzára, amely megmutatja, hol vannak a falak, az ajtók és az ablakok, anélkül, hogy a színekről vagy a bútorokról szólna. A HTML adja meg a webes tartalom „csontvázát”, meghatározva, hogy egy adott szövegrész címsor, bekezdés, lista vagy kép-e.

Ez a cikk részletesen bemutatja a HTML alapjait, a kulcsfontosságú fogalmakat, a leggyakrabban használt tageket, és egy egyszerű példán keresztül illusztrálja, hogyan áll össze egy működő HTML dokumentum. Célunk, hogy a kezdők számára is érthetővé tegyük ezt a fundamentális technológiát, és megadjuk azokat az alapokat, amelyekre építkezve tovább mélyedhetnek a webfejlesztés izgalmas világába.

Mi az a HTML? A web alapköve

A HTML, ahogy már említettük, a HyperText Markup Language rövidítése. De mit is jelent ez pontosan? A „HyperText” (hiperszöveg) utal a linkekre, amelyek lehetővé teszik, hogy a felhasználók egyik dokumentumból a másikba ugorjanak, létrehozva ezzel a web hálózatát. A „Markup Language” (jelölőnyelv) pedig azt jelenti, hogy speciális jelöléseket, úgynevezett tageket használunk a dokumentum részeinek azonosítására és strukturálására.

A HTML-t Tim Berners-Lee fejlesztette ki az 1990-es évek elején a CERN-ben, eredetileg tudományos dokumentumok megosztására és szervezésére. Azóta hatalmas fejlődésen ment keresztül, számos verziót megélve, a HTML2.0-tól a HTML4.01-en át a ma domináns HTML5-ig. A HTML5 számos új funkciót, szemantikus taget és API-t vezetett be, jelentősen bővítve a webes alkalmazások képességeit és a tartalom strukturálásának lehetőségeit. Ez a verzió jelentős előrelépést hozott a médiaelemek beágyazásában, a geolokációban és az offline tárolásban is, megteremtve a modern webes alkalmazások alapjait.

Amikor egy böngésző (mint a Chrome, Firefox vagy Edge) letölt egy HTML fájlt, azt értelmezi, és a benne lévő utasítások alapján megjeleníti a tartalmat. A böngésző a tagek segítségével tudja, hogy mi egy címsor, mi egy bekezdés, hol van egy kép, és hogyan kell ezeket elrendezni a képernyőn. A HTML önmagában nem foglalkozik a megjelenéssel (színek, betűtípusok, elrendezés), erre a célra a CSS (Cascading Style Sheets) szolgál. Az interaktivitásért és dinamikus viselkedésért pedig a JavaScript felelős. Ez a három technológia alkotja a modern webfejlesztés alapvető hármasát.

A HTML adja a weboldal tartalmának gerincét, a CSS a külső megjelenését, a JavaScript pedig az interaktív viselkedését. Ezen három technológia együtt teszi lehetővé a gazdag és dinamikus webes élményt.

A HTML tehát a tartalom struktúrájának leírására szolgál. Segít a böngészőnek, a keresőmotoroknak (és a kisegítő technológiáknak, mint a képernyőolvasók) megérteni, hogy mi az oldalon lévő információ hierarchiája és jelentése. Egy jól strukturált HTML dokumentum nem csak a látogatók számára könnyebben olvasható, hanem a keresőmotorok számára is jobban értelmezhető, ami kulcsfontosságú a SEO (keresőoptimalizálás) szempontjából. A pontos és szemantikus jelölés javítja az oldal hozzáférhetőségét és a keresőmotorok általi indexelését.

Hogyan értelmezik a böngészők a HTML-t? A DOM

Amikor egy böngésző letölt egy HTML dokumentumot, nem csak egyszerűen megjeleníti a szöveget. Ehelyett egy komplex folyamaton megy keresztül, amelynek során a HTML kódból egy belső, objektumorientált reprezentációt hoz létre, az úgynevezett Dokumentum Objektum Modellt (DOM). A DOM egy fa struktúrába rendezi az összes HTML elemet, attribútumot és szöveges tartalmat, ahol minden egyes csomópont (node) egy-egy elemet képvisel.

Ez a fa struktúra teszi lehetővé a böngésző számára, hogy pontosan tudja, melyik elem hol helyezkedik el a hierarchiában, és hogyan kapcsolódik a többi elemhez. A CSS szabályok a DOM elemekre alkalmazódnak, a JavaScript pedig a DOM-ot manipulálja, dinamikusan változtatva az oldal tartalmát, szerkezetét vagy stílusát. A DOM megértése alapvető ahhoz, hogy hatékonyan dolgozzunk a weboldalakkal, és megértsük, hogyan kommunikál egymással a HTML, a CSS és a JavaScript.

Alapvető HTML fogalmak

Mielőtt mélyebbre ásnánk a tagek világában, ismerkedjünk meg néhány alapvető fogalommal, amelyek elengedhetetlenek a HTML megértéséhez.

Tag és elem

A tag (címke) a HTML alapvető építőköve. A tagek speciális kulcsszavak, amelyeket szögletes zárójelek („) közé írunk. A legtöbb tagnek van egy nyitó tagje és egy záró tagje. Például a bekezdés tagje a `

`, a záró tagje pedig a `

`. A záró tagben a tag neve előtt egy perjel (`/`) található.

A nyitó tag, a záró tag és a kettő között elhelyezkedő tartalom együtt alkot egy HTML elemet. Például:

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

Itt a `

` a nyitó tag, a `

` a záró tag, és az „Ez egy bekezdés tartalma.” a tartalom. Az egész együtt egy `

` elem. A böngésző ezt az elemet egy különálló bekezdésként jeleníti meg, saját margókkal és sorbeosztással.

Vannak azonban üres elemek is, amelyeknek nincs záró tagjük, és nem tartalmaznak tartalmat. Ilyen például a kép tagje, az ``, vagy a sortörés tagje, a `
`. Ezeket önzáró tageknek is nevezik, bár a HTML5-ben már nem kötelező a `/>` formátum (pl. ``). Elég az ``. Ezek az elemek egyetlen ponton hajtják végre a funkciójukat, ezért nincs szükségük belső tartalomra vagy záró tagre.

<img src="kep.jpg" alt="Leírás a képről">
<br>

Attribútumok

Az attribútumok extra információkat szolgáltatnak egy HTML elemről. Ezeket a nyitó tagben, a tag neve után adjuk meg, kulcs-érték párok formájában. Az attribútum neve után egy egyenlőségjel (`=`) következik, majd az érték idézőjelek (`”` vagy `’`) között. Az idézőjelek használata kötelező, még akkor is, ha az érték nem tartalmaz szóközt, a konzisztencia és az olvashatóság érdekében.

<a href="https://www.pelda.hu" target="_blank">Látogassa meg a példa oldalt</a>

Ebben a példában az `` (link) elemnek két attribútuma van:

`href`: Az attribútum neve, az értéke pedig a „https://www.pelda.hu”, ami a link célját adja meg. Ez az attribútum nélkülözhetetlen egy link működéséhez.
`target`: Az attribútum neve, az értéke pedig a „_blank”, ami azt jelenti, hogy a link egy új böngészőfülön vagy ablakban nyílik meg. Ez egy gyakran használt attribútum a külső linkek kezelésére.

Az attribútumok kulcsfontosságúak az elemek viselkedésének és megjelenésének finomhangolásához. Számos attribútum van, amelyek specifikusak bizonyos tagekre (pl. `src` az `` taghez, `action` a „ taghez), de vannak globális attribútumok is, amelyeket szinte bármelyik HTML elemhez hozzáadhatunk (pl. `class`, `id`, `style`, `lang`, `title`, `data-*` egyedi adatokhoz).

Dokumentumtípus deklaráció

Minden HTML dokumentum elején egy speciális deklarációval kell kezdeni: „. Ez nem egy HTML tag, hanem egy instrukció a böngésző számára, amely megmondja, hogy a dokumentum milyen HTML verzió szerint készült. A „ a HTML5 szabványt jelöli, és a modern weboldalak esetében ez az egyetlen helyes és javasolt deklaráció. Ez biztosítja, hogy a böngésző a legmodernebb renderelési módban működjön.

A „ deklaráció elengedhetetlen ahhoz, hogy a böngészők „standard módban” jelenítsék meg az oldalt, elkerülve a régebbi, hibás megjelenítést eredményező „quirks mode”-ot, ami inkonzisztens viselkedést okozhat a különböző böngészők között.

A HTML dokumentum szerkezete: head és body

Minden HTML dokumentum két fő részből áll: a „ (fejléc) és a „ (törzs) szekcióból. Ezek az „ elemben helyezkednek el, amely a teljes dokumentum gyökér eleme. Az „ tag `lang` attribútuma (pl. `lang=”hu”`) a dokumentum nyelvét adja meg, ami fontos a keresőmotorok és a kisegítő technológiák számára.

<!DOCTYPE html>
<html lang="hu">
<head>
    <!-- Itt találhatóak a metaadatok, az oldal címe és a külső erőforrások -->
</head>
<body>
    <!-- Itt található a weboldal tényleges, látható tartalma -->
</body>
</html>

A „ szekció

A „ elem olyan információkat tartalmaz, amelyek nem jelennek meg közvetlenül a böngésző ablakában, de kulcsfontosságúak az oldal működéséhez és a böngésző általi értelmezéséhez. Ezek az információk segítik a böngészőt, a keresőmotorokat és más szoftvereket az oldal feldolgozásában.

``</strong>: Az oldal címe, amely a böngésző fülén vagy ablakának címsorában jelenik meg. Ez kritikus a <strong>SEO</strong> szempontjából, mivel ez az első dolog, amit a felhasználók látnak a keresési eredményekben.</li> <li><strong>„</strong>: Metaadatok az oldalról, mint például a karakterkódolás (`charset=”UTF-8″`), amely a speciális karakterek (pl. ékezetek) helyes megjelenítését biztosítja; a nézetablak beállításai (`viewport`), amelyek a reszponzív megjelenéshez elengedhetetlenek; az oldal rövid leírása (`description`), ami a keresőtalálatokban jelenhet meg; vagy a szerző (`author`) és a kulcsszavak (`keywords`), bár utóbbi SEO szempontból már kevésbé releváns.</li> <li><strong>„</strong>: Külső CSS stíluslapok csatolása az oldal megjelenésének formázásához. Ez a leggyakoribb módja a stílusok alkalmazásának.</li> <li><strong>„</strong>: Beágyazott CSS stílusok, ha nem külső fájlt használunk, hanem a HTML dokumentumon belül szeretnénk stílusokat definiálni (általában kisebb projekteknél vagy teszteléshez).</li> <li><strong>„</strong>: JavaScript kódok beágyazása vagy külső JavaScript fájlok csatolása az interaktív funkciókhoz. Ideális esetben ezeket a „ végén helyezzük el a jobb teljesítmény érdekében.</li> <li><strong>„</strong>: Az összes relatív URL alapértelmezett URL-jét adja meg a dokumentumban, ami hasznos lehet komplexebb weboldalstruktúrák esetén.</li> </ul> <h4>A „ szekció</h4> <p>A „ elem tartalmazza a weboldal tényleges, látható tartalmát. Minden, amit a felhasználók látnak és amivel interakcióba léphetnek (szövegek, képek, linkek, táblázatok, formok, videók stb.), itt helyezkedik el. A „ szekcióban strukturáljuk a tartalmat különböző HTML tagekkel, amelyekről a következő részben részletesebben is szó lesz. A tartalom megfelelő strukturálása kulcsfontosságú a felhasználói élmény és a SEO szempontjából egyaránt.</p> <h2 id="gyakran-hasznalt-html-tagek-es-celjuk">Gyakran használt HTML tagek és céljuk</h2> <p>A HTML több száz taggel rendelkezik, de a mindennapi webfejlesztés során egy szűkebb körüket használjuk a leggyakrabban. Íme egy áttekintés a legfontosabb kategóriákról és a hozzájuk tartozó tagekről, kiegészítve a használatukkal kapcsolatos legjobb gyakorlatokkal.</p> <h3>Szövegformázó és strukturáló tagek</h3> <p>Ezek a tagek a szöveges tartalom hierarchiáját és megjelenését befolyásolják, és alapvetőek a tartalom olvashatóvá és értelmezhetővé tételéhez.</p> <ul> <li><strong>Címsorok (`<br /> <h1>` – `</p> <h6>`)</strong>: Az `</p> <h1>` a legfontosabb címsor, az `</p> <h6>` a legkevésbé fontos. Ezeket a hierarchikus sorrendben kell használni a tartalom strukturálásához, nem pedig a megjelenésük alapján. Az `</p> <h1>` tagből általában csak egy van egy oldalon, ez az oldal fő címe, amely a legfontosabb kulcsszót tartalmazza. A többi címsor (`</p> <h2 id="stb-logikusan-tagolja-az-alfejezeteket-bekezdes-a-leggyakrabban-hasznalt-tag-szoveges-tartalomhoz-egy-bekezdest-jelol-fontos-hogy-a-bekezdeseket-ne-hasznaljuk-pusztan-sortoresre-erre-a">`, „ stb.) logikusan tagolja az alfejezeteket.<br /> Bekezdés („): A leggyakrabban használt tag szöveges tartalomhoz. Egy bekezdést jelöl. Fontos, hogy a bekezdéseket ne használjuk pusztán sortörésre; erre a „ szolgál.<br /> Félkövér és kiemelés („, „): A „ tag erős hangsúlyt ad a szövegnek, ami szemantikailag azt jelenti, hogy fontos. A „ tag egyszerűen félkövérré teszi a szöveget extra szemantikai jelentés nélkül. SEO szempontból a „ használata preferált a kulcsszavak kiemelésére, mivel ez jelzi a keresőmotoroknak a szövegrész fontosságát.<br /> Dőlt és hangsúlyozás („, „): Az „ tag a szöveg hangsúlyozására szolgál, ami szintén szemantikai jelentéssel bír (pl. kiejtésbeli hangsúly, vagy ha egy szó jelentésére utalunk). Az „ tag egyszerűen dőlt betűssé teszi a szöveget különösebb jelentés nélkül (pl. idegen szavaknál, műcímeknél, gondolatoknál). Hasonlóan a félkövér tagekhez, az „ a preferált a hangsúlyozáshoz.<br /> Sortörés („): Egy sortörést szúr be, új sorba kezdve a szöveget. Ne használjuk bekezdések elválasztására, arra ott a „. Használata leginkább akkor indokolt, ha egy szövegen belül szeretnénk új sort kezdeni anélkül, hogy új bekezdésbe kezdenénk (pl. versek, címlisták).<br /> Vízszintes vonal („): Egy tematikus törést, elválasztó vonalat jelöl a tartalomban. Segít a hosszú tartalmak tagolásában.<br /> Idézet („, „): A „ egy hosszabb, különálló idézetet jelöl, amelyet általában behúzással jelenítenek meg a böngészők. A „ egy rövid, beágyazott idézetet jelöl, amelyet a böngészők általában idézőjelek közé tesznek. Mindkettőhöz használható a `cite` attribútum, amely a forrás URL-jét adja meg.</p> <p>Listák</p> <p>A listák kiválóan alkalmasak információk strukturált és könnyen áttekinthető bemutatására, legyen szó lépésekről, tulajdonságokról vagy definíciókról.</p> <p> Rendezett lista („): Számozott listát hoz létre. A listaelemek „ tagekkel vannak jelölve. Használata akkor javasolt, ha a sorrend fontos (pl. recept lépései, utasítások).<br /> Rendezetlen lista („): Felsorolásjelekkel ellátott listát hoz létre. A listaelemek szintén „ tagekkel vannak jelölve. Akkor használjuk, ha a sorrend nem számít (pl. egy termék jellemzői, egy blogbejegyzés témái).<br /> Definíciós lista („, „, „): Fogalmak és azok definícióinak listázására szolgál. A „ a lista konténere, a „ a fogalom (definíciós kifejezés), a „ pedig a fogalom leírása (definíciós adat). Ideális szószedetekhez, GYIK szekciókhoz.</p> <p><ul><br /> <li>Első elem</li><br /> <li>Második elem</li><br /> </ul></p> <p><ol><br /> <li>Első lépés</li><br /> <li>Második lépés</li><br /> </ol></p> <p><dl><br /> <dt>HTML</dt><br /> <dd>HyperText Markup Language</dd><br /> <dt>CSS</dt><br /> <dd>Cascading Style Sheets</dd><br /> </dl></p> <p>Linkek és képek</p> <p>Ezek a tagek teszik lehetővé a navigációt és a vizuális tartalom beágyazását, amelyek a web interaktív és vizuális élményét adják.</p> <p> Link („): A HTML egyik legfontosabb tagje, amely lehetővé teszi a weboldalak közötti navigációt. Az `href` attribútum adja meg a cél URL-t. A link szövege (anchor text) rendkívül fontos a SEO szempontjából, mivel ez jelzi a keresőmotoroknak, hogy miről szól a céloldal. A `target=”_blank”` attribútummal új fülön nyithatjuk meg a linket, a `rel=”nofollow”` attribútummal pedig jelezhetjük a keresőmotoroknak, hogy nem szeretnénk „link juice”-t továbbítani a céloldalra.<br /> Kép („): Képek beágyazására szolgál. Az `src` attribútum adja meg a kép forrását (URL), az `alt` attribútum pedig a kép alternatív szövegét. Az `alt` szöveg kulcsfontosságú az akadálymentesség és a SEO szempontjából, mivel ez jelenik meg, ha a kép nem töltődik be, ezt olvassák fel a képernyőolvasók, és ez segít a keresőmotoroknak megérteni a kép tartalmát. A `width` és `height` attribútumok segítenek a böngészőnek a helyfoglalásban, mielőtt a kép betöltődik, javítva a betöltési sebességet.</p> <p><a href=”https://www.google.com” target=”_blank” rel=”noopener noreferrer”>Ugrás a Google-ra</a><br /> <img src=”path/to/image.jpg” alt=”Példa kép leírása” width=”300″ height=”200″></p> <p>Táblázatok</p> <p>A táblázatok strukturált adatok megjelenítésére szolgálnak, sorokba és oszlopokba rendezve. Fontos, hogy ne használjuk őket elrendezési célokra, arra a CSS sokkal alkalmasabb és rugalmasabb.</p> <p> Tag<br /> Leírás<br /> Példa</p> <p> „<br /> A táblázat konténere. Ideális adatok, statisztikák megjelenítésére.</p> <p> „<br /> A táblázat fejlécének csoportja. Tartalmazza a „ elemeket.</p> <p> „<br /> A táblázat törzsének csoportja. Tartalmazza a fő adatokat.</p> <p> „<br /> A táblázat láblécének csoportja. Összesítéseket vagy lábjegyzeteket tartalmazhat.</p> <p> „<br /> Egy táblázati sor. Minden sorban „ vagy „ cellák vannak.<br /> `<tr>…</tr>`</p> <p> „<br /> Táblázati fejléc cella. Félkövérrel jelenik meg, és szemantikailag a sor vagy oszlop címét jelöli.<br /> `<th>Fejléc</th>`</p> <p> „<br /> Táblázati adatcella. Az aktuális adatot tartalmazza.<br /> `<td>Adat</td>`</p> <p>A `colspan` és `rowspan` attribútumokkal egyesíthetünk több cellát vízszintesen vagy függőlegesen, ami komplexebb táblázatstruktúrák létrehozását teszi lehetővé. Azonban használatukkal érdemes óvatosan bánni, hogy a táblázat továbbra is akadálymentes maradjon.</p> <p>Szemantikus HTML5 tagek</p> <p>A HTML5 bevezette az úgynevezett szemantikus tageket, amelyek nem csak strukturálják a tartalmat, hanem jelentést is adnak neki. Ez segít a böngészőknek, a keresőmotoroknak és a kisegítő technológiáknak jobban megérteni az oldal tartalmát és célját. Ezáltal javul az akadálymentesség és a SEO is, mivel a keresőmotorok hatékonyabban tudják indexelni és rangsorolni az oldalt a tartalom kontextusa alapján.</p> <p> „: Az oldal vagy egy szekció fejlécét tartalmazza, gyakran logóval, navigációval, címmel. Ez a tartalom bevezető része.<br /> „: Navigációs linkeket tartalmazó szekció. Ide tartoznak a főmenük, oldalsáv menük, vagy belső navigációs linkek csoportjai.<br /> „: Az oldal fő és egyedi tartalmát tartalmazza. Egy dokumentumban csak egy „ elem lehet, és ez a legfontosabb tartalmi blokk.<br /> „: Független, önmagában is értelmezhető tartalmi egység (pl. blogbejegyzés, hír, komment, fórumbejegyzés). Ez a tartalom önállóan is megállja a helyét.<br /> „: Egy dokumentum egy általános szekcióját jelöli, amely általában egy címsorral kezdődik. Akkor használjuk, ha nincs specifikusabb szemantikus tag, de a tartalom egy logikai egységet képez.<br /> „: Az oldaltartalomtól elkülönülő, de hozzá kapcsolódó tartalmat tartalmaz (pl. oldalsáv, reklámok, kapcsolódó linkek, szerzői információk).<br /> „: Az oldal vagy egy szekció láblécét tartalmazza, gyakran szerzői jogi információkkal, kapcsolati adatokkal, navigációs linkekkel.<br /> „ és „: Képek, kódblokkok, diagramok vagy más médiaelemek beágyazására, a „ pedig a hozzájuk tartozó feliratot adja meg. Ez a tag segít a médiaelemek és a hozzájuk tartozó leírások szemantikus összekapcsolásában.</p> <p><header><br /> <img src=”logo.png” alt=”Cég logója”><br /> <h1>Weboldal Címe</h1><br /> <nav><br /> <ul><br /> <li><a href=”/”>Főoldal</a></li><br /> <li><a href=”/rolunk”>Rólunk</a></li><br /> <li><a href=”/kapcsolat”>Kapcsolat</a></li><br /> </ul><br /> </nav><br /> </header><br /> <main><br /> <article><br /> <h2>Blogbejegyzés címe</h2><br /> <p>Ez egy blogbejegyzés tartalma.</p><br /> <figure><br /> <img src=”article-img.jpg” alt=”Kép a cikkhez”><br /> <figcaption>A cikk illusztrációja.</figcaption><br /> </figure><br /> </article><br /> <aside><br /> <h3>Kapcsolódó cikkek</h3><br /> <ul><br /> <li><a href=”#”>Egy másik érdekes cikk</a></li><br /> </ul><br /> </aside><br /> </main><br /> <footer><br /> <p>© 2023 Minden jog fenntartva. <a href=”/adatvedelem”>Adatvédelmi nyilatkozat</a></p><br /> </footer></p> <p>Általános konténer tagek: „ és „</p> <p>A „ (division) és „ tagek általános célú konténerek, amelyek önmagukban nem rendelkeznek szemantikai jelentéssel. Fő szerepük, hogy csoportosítsák a tartalmat, lehetővé téve a CSS stílusok vagy a JavaScript funkcionalitás alkalmazását egy adott blokkra vagy szövegrészre. Ezek a „semleges” elemek akkor hasznosak, ha nincs specifikusabb szemantikai tag, amely megfelelne a célnak.</p> <p> „: Egy blokkszintű elem, ami azt jelenti, hogy alapértelmezetten új sort kezd, és a rendelkezésre álló teljes szélességet elfoglalja. Ideális nagyobb tartalmi blokkok, szekciók csoportosítására, amikor a szemantikus „ vagy „ nem megfelelő. Gyakran használják elrendezési célokra a CSS-sel kombinálva.<br /> „: Egy soron belüli (inline) elem, ami azt jelenti, hogy nem kezd új sort, és csak annyi helyet foglal el, amennyi a tartalmához szükséges. Ideális szövegrészek, szavak vagy karakterek stílusozására anélkül, hogy megváltoztatná a szövegfolyamot.</p> <p><div class=”kontener”><br /> <p>Ez egy szöveg egy <span style=”color: blue;”>kiemelt</span> résszel.</p><br /> </div><br /> A „ és „ használata elengedhetetlen a modern, reszponzív weboldalak felépítéséhez, ahol a CSS segítségével finoman hangolható az elemek elrendezése és megjelenése. Mindig törekedjünk arra, hogy a szemantikus tageket preferáljuk, és csak akkor használjuk ezeket az általános konténereket, ha nincs más megfelelő opció.</p> <p>Egyszerű HTML példa kezdőknek</h2> <figure><img decoding="async" src="https://5letes.hu/wp-content/uploads/2026/02/egyszeru-html-pelda-kezdoknek.jpg" alt="A HTML struktúrája az internet alapját képezi." /><figcaption>A HTML a weboldalak alapját képezi, lehetővé téve a szövegek, képek és linkek strukturált megjelenítését.</figcaption></figure> <p>Most, hogy áttekintettük az alapvető fogalmakat és tageket, nézzünk meg egy komplett, egyszerű HTML dokumentumot. Ez a példa bemutatja, hogyan áll össze egy működő weboldal a gyakorlatban, és hogyan építhetünk fel egy alapvető weboldalt lépésről lépésre.</p> <p>Képzeljük el, hogy egy egyszerű személyes bemutatkozó oldalt szeretnénk létrehozni, amely tartalmaz egy címet, egy rövid bemutatkozó szöveget, egy listát a hobbikról, és egy linket a kapcsolati adatokhoz.</p> <h3>1. lépés: Az alapvető szerkezet</h3> <p>Minden HTML dokumentum a „ deklarációval kezdődik, amelyet az „ elem követ. Ezen belül helyezkedik el a „ és a „. Ez a struktúra adja az oldal vázát, és minden tartalom ebbe a keretbe illeszkedik.</p> <pre><code><!DOCTYPE html> <html lang="hu"> <head>  </head> <body>  </body> </html></code></pre> <h3>2. lépés: A „ tartalmának kitöltése</h3> <p>A „ szekcióba helyezzük a karakterkódolást, a nézetablak beállításait és az oldal címét. A karakterkódolás (`charset=”UTF-8″`) biztosítja, hogy a magyar ékezetes karakterek is helyesen jelenjenek meg. A `viewport` beállítás a reszponzív megjelenéshez szükséges, hogy az oldal jól nézzen ki különböző eszközökön (mobil, tablet, desktop). A `<title>` pedig a böngészőfülön látható címet adja meg.</p> <pre><code><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Bemutatkozó oldalam - HTML példa</title> </head></code></pre> <h3>3. lépés: A „ tartalmának hozzáadása</h3> <p>Most jöhet a látható tartalom. Kezdjük egy fő címmel (`</p> <h1>`), amely az oldal legfontosabb üzenetét hordozza, majd egy bekezdéssel (`</p> <p>`), amely egy rövid bemutatkozást tartalmaz. A `</p> <p>` tagben a `<strong>` használatával kiemelünk egy fontos nevet.</p> <pre><code><body> <h1>Üdvözlöm a személyes oldalamon!</h1> <p>Szia, a nevem <strong>Példa Márton</strong>, és ez az első HTML oldalam. Örülök, hogy itt vagy!</p> </body></code></pre> <h3>4. lépés: Listák és további szöveg</h3> <p>Adjunk hozzá egy alcímet (`</p> <h2 id="a-hobbiknak-majd-egy-rendezetlen-listat-a-kedvenc-tevekenysegeinkrol-minden-hobbi-egyegy-elemen-belul-helyezkedik-el-ezt-kovetoen-egy-ujabb-bekezdessel-zarjuk-a-bemutatkozastltbodygt-lth1">`) a hobbiknak, majd egy rendezetlen listát („) a kedvenc tevékenységeinkről. Minden hobbi egy-egy „ elemen belül helyezkedik el. Ezt követően egy újabb bekezdéssel zárjuk a bemutatkozást.<br /> <body><br /> <h1>Üdvözlöm a személyes oldalamon!</h1><br /> <p>Szia, a nevem <strong>Példa Márton</strong>, és ez az első HTML oldalam. Örülök, hogy itt vagy!</p></p> <p> <h2>A hobbijaim</h2><br /> <ul><br /> <li>Olvasás (különösen fantasy regények)</li><br /> <li>Kerékpározás a természetben</li><br /> <li>Sütés-főzés, új receptek kipróbálása</li><br /> <li>Webfejlesztés tanulása</li><br /> </ul></p> <p> <p>Szeretem felfedezni a világot, és mindig nyitott vagyok az új dolgokra.</p><br /> </body></p> <p>5. lépés: Link hozzáadása</p> <p>Végül adjunk hozzá egy linket, amely egy fiktív kapcsolati oldalra mutat. Használhatunk egy „ taget a link köré, hogy külön bekezdésben jelenjen meg, és a felhasználó könnyen megtalálja a hivatkozást. Az „ tag `href` attribútuma adja meg a céloldal URL-jét.<br /> <body><br /> <h1>Üdvözlöm a személyes oldalamon!</h1><br /> <p>Szia, a nevem <strong>Példa Márton</strong>, és ez az első HTML oldalam. Örülök, hogy itt vagy!</p></p> <p> <h2>A hobbijaim</h2><br /> <ul><br /> <li>Olvasás (különösen fantasy regények)</li><br /> <li>Kerékpározás a természetben</li><br /> <li>Sütés-főzés, új receptek kipróbálása</li><br /> <li>Webfejlesztés tanulása</li><br /> </ul></p> <p> <p>Szeretem felfedezni a világot, és mindig nyitott vagyok az új dolgokra.</p></p> <p> <p>Ha szeretne kapcsolatba lépni velem, <a href=”/kapcsolat.html”>kattintson ide</a>.</p><br /> </body></p> <p>A teljes HTML kód</p> <p>Íme az elkészült, egyszerű HTML oldal teljes kódja:<br /> <!DOCTYPE html><br /> <html lang=”hu”><br /> <head><br /> <meta charset=”UTF-8″><br /> <meta name=”viewport” content=”width=device-width, initial-scale=1.0″><br /> <title>Bemutatkozó oldalam – HTML példa</title><br /> </head><br /> <body><br /> <h1>Üdvözlöm a személyes oldalamon!</h1><br /> <p>Szia, a nevem <strong>Példa Márton</strong>, és ez az első HTML oldalam. Örülök, hogy itt vagy!</p></p> <p> <h2>A hobbijaim</h2><br /> <ul><br /> <li>Olvasás (különösen fantasy regények)</li><br /> <li>Kerékpározás a természetben</li><br /> <li>Sütés-főzés, új receptek kipróbálása</li><br /> <li>Webfejlesztés tanulása</li><br /> </ul></p> <p> <p>Szeretem felfedezni a világot, és mindig nyitott vagyok az új dolgokra.</p></p> <p> <p>Ha szeretne kapcsolatba lépni velem, <a href=”/kapcsolat.html”>kattintson ide</a>.</p><br /> </body><br /> </html></p> <p>Ezt a kódot egy egyszerű szövegszerkesztőbe (pl. Jegyzettömb, VS Code, Sublime Text) beillesztve, majd `.html` kiterjesztéssel (pl. `index.html`) elmentve, majd a fájlt a böngészőben megnyitva láthatjuk az elkészült weboldalt. Ez a folyamat a weboldal készítés alapja, és az első lépés a webfejlesztés izgalmas világába.</p> <p>HTML best practice és tippek a hatékony kódoláshoz</h2> <p>A HTML alapjainak elsajátítása után érdemes néhány bevált gyakorlatot is megismerni, amelyek segítenek tiszta, hatékony és karbantartható kódot írni. Ezek a tippek nem csupán a technikai helyességhez járulnak hozzá, hanem a felhasználói élményt és a keresőoptimalizálást is javítják.</p> <h3>Szemantikus HTML használata</h3> <p>Mindig törekedjünk a <strong>szemantikus tagek</strong> (pl. `</p> <h1>`-`</p> <h6>`, `</p> <p>`, `</p> <ul>`, `</p> <nav>`, `</p> <article>`, `</p> <section>`, `</p> <footer>`) használatára a `</p> <div>` és `<span>` helyett, amikor csak lehetséges. A szemantikus tagek világosabbá teszik a dokumentum szerkezetét a böngészők, a keresőmotorok és a fejlesztők számára. Ez javítja a <strong>SEO-t</strong>, az <strong>akadálymentességet</strong> és a kód olvashatóságát. A keresőmotorok algoritmusai egyre kifinomultabbak a tartalom kontextusának megértésében, és a szemantikus jelölés segít nekik ebben.</p> <pre><code> <div class="header"> <div class="title">Cím</div> <div class="menu">...</div> </div>  <header> <h1>Cím</h1> <nav> <ul>...</ul> </nav> </header></code></pre> <h3>Azonosítók és osztályok (`id` és `class`)</h3> <p>Az <strong>`id`</strong> attribútum egyedi azonosítót ad egy elemnek a HTML dokumentumon belül. Egy `id` érték csak egyszer szerepelhet egy oldalon. Az `id`-t gyakran használják JavaScripttel való manipulációhoz (pl. egy adott elemre való hivatkozáskor) vagy CSS-sel való célzott stílusozáshoz. A <strong>`class`</strong> attribútum egy vagy több osztálynevet rendel egy elemhez. Az osztályokat arra használjuk, hogy több elemre is alkalmazzunk ugyanazokat a CSS stílusokat, vagy hogy JavaScripttel csoportosan manipuláljuk őket. A `class` értékek többször is felhasználhatók egy oldalon, így ideálisak az ismétlődő stílusokhoz.</p> <pre><code><p id="fo-bekezdes" class="kiemelt szoveg">Ez egy fontos bekezdés.</p></code></pre> <h3>Kommentek használata</h3> <p>A <strong>HTML kommentek</strong> (``) segítenek megjegyzéseket fűzni a kódhoz, magyarázatokat adni a komplexebb részekhez, vagy ideiglenesen kikapcsolni kódrészleteket. A kommentek nem jelennek meg a böngészőben, csak a forráskódban láthatók. Ez kulcsfontosságú a kód karbantarthatóságához, különösen csapatmunka során, vagy ha hosszabb idő után térünk vissza egy projekthez.</p> <pre><code> <nav> <ul> <li><a href="/">Kezdőlap</a></li>   </ul> </nav></code></pre> <h3>Kód validálása</h3> <p>Mindig érdemes validálni a HTML kódot egy <strong>HTML validátor</strong> segítségével (pl. a W3C Markup Validation Service). A validálás segít azonosítani és kijavítani a szintaktikai hibákat, amelyek problémákat okozhatnak a böngészőkben vagy a keresőmotorok általi értelmezésben. A hibátlan kód hozzájárul a jobb <strong>SEO</strong>-hoz, a konzisztensebb megjelenéshez és a jobb akadálymentességhez, mivel a valid kód megbízhatóbb.</p> <h3>Akadálymentesség (accessibility)</h3> <p>Az <strong>akadálymentesség</strong> azt jelenti, hogy a weboldal mindenki számára hozzáférhető, beleértve a fogyatékkal élő felhasználókat is (pl. látássérültek, akik képernyőolvasót használnak; mozgássérültek, akik billentyűzettel navigálnak). A HTML-ben számos módon támogathatjuk az akadálymentességet:</p> <ul> <li>Mindig használjunk <strong>`alt` attribútumot</strong> a képeknél, leíró szöveggel. Ez kulcsfontosságú a látássérültek számára.</li> <li>Helyesen strukturáljuk a címsorokat (`<br /> <h1>`-`</p> <h6>`) a tartalom hierarchiájának megfelelően, hogy a képernyőolvasók könnyen navigálhassanak az oldalon.</li> <li>Használjunk szemantikus tageket, amelyek jelentést adnak a tartalomnak.</li> <li>Biztosítsunk megfelelő kontrasztot a szöveg és a háttér között (bár ez inkább CSS feladat, a HTML alapjainak megértése segíti a tervezést).</li> <li>A form elemekhez mindig rendeljünk `<label>` tageket, amelyek egyértelműen összekapcsolódnak az input mezőkkel.</li> <li>Használjunk megfelelő `lang` attribútumot az „ tagben a dokumentum nyelvének meghatározására.</li> </ul> <figure class="wp-block-pullquote"> <blockquote> <p>Egy jól megírt HTML kód nem csak a böngésző számára érthető, hanem az emberek és a keresőmotorok számára is, elősegítve a jobb felhasználói élményt és a magasabb rangsorolást. Az akadálymentesség nem csupán jogi követelmény, hanem etikai kötelesség is.</p> </blockquote> </figure> <h3>A kód olvashatósága és formázása</h3> <p>Az olvasható kód kulcsfontosságú a karbantarthatóság szempontjából. Használjunk konzisztens behúzásokat (indentation), üres sorokat a logikai blokkok elválasztására, és tartsuk be a konvenciókat. A tiszta kód megkönnyíti a hibakeresést, az együttműködést és az új funkciók hozzáadását. Egy jól formázott dokumentum gyorsabban áttekinthető és megérthető.</p> <h3>Különválasztás elve (separation of concerns)</h3> <p>Ez egy alapvető szoftverfejlesztési elv, amely a HTML esetében azt jelenti, hogy a <strong>struktúrát (HTML)</strong>, a <strong>stílust (CSS)</strong> és a <strong>viselkedést (JavaScript)</strong> külön fájlokban vagy szekciókban tartsuk. Ne használjunk inline CSS-t (`</p> <p style="color: red">`) vagy beágyazott JavaScriptet a HTML tageken belül, amennyiben elkerülhető. Ez tisztább kódot, könnyebb karbantartást, jobb teljesítményt és rugalmasságot eredményez, mivel a stílus és a funkcionalitás módosítható a HTML érintése nélkül.</p> <pre><code> <p style="color: red; font-size: 16px;">Piros szöveg.</p>  <head> <link rel="stylesheet" href="style.css"> </head> <body> <p class="piros-szoveg">Piros szöveg.</p> </body></code></pre> <p>A `style.css` fájlban: `.piros-szoveg { color: red; font-size: 16px; }`</p> <h2 id="a-html-szerepe-a-seoban">A HTML szerepe a SEO-ban</h2> <p>A HTML alapvető szerepet játszik abban, hogy a keresőmotorok (például a Google) hogyan értelmezik és rangsorolják a weboldalakat. Egy jól strukturált és szemantikusan helyes HTML dokumentum jelentősen hozzájárulhat a jobb <strong>SEO teljesítményhez</strong>, mivel segít a keresőmotoroknak megérteni a tartalom relevanciáját és kontextusát.</p> <h3>Címsorok hierarchiája (`</p> <h1>`-`</p> <h6>`)</h3> <p>A címsorok megfelelő, logikus hierarchiájú használata segíti a keresőmotorokat a tartalom fő témáinak és alpontjainak azonosításában. Az `</p> <h1>` tagnek az oldal fő témáját kell tartalmaznia, és csak egyszer szerepelhet, mint az oldal legfontosabb címe. Az alacsonyabb szintű címsorok (`</p> <h2>`, `</p> <h3>` stb.) a tartalom hierarchiájának megfelelően tagolják az információt, logikai rendszert adva az oldalnak. A releváns <strong>kulcsszavak</strong> szerepeltetése a címsorokban erősíti a tartalom relevanciáját a keresőmotorok számára, de kerülni kell a kulcsszóhalmozást.</p> <h3>Meta tagek</h3> <p>Bár a `meta keywords` tag már nem bír jelentős SEO súllyal, más meta tagek továbbra is fontosak:</p> <ul> <li><strong>`<title>` tag</strong>: Az oldal címe, amely a böngészőfülön és a keresőtalálatokban is megjelenik. Ez az egyik legfontosabb SEO elem. Tartalmaznia kell a fő kulcsszót, legyen egyedi minden oldalon, és vonzónak kell lennie, hogy a felhasználók rákattintsanak. Ideális hossza 50-60 karakter.</li> <li><strong>„</strong>: Az oldal rövid, tömör leírása, amely gyakran megjelenik a keresőtalálatokban a cím alatt. Bár közvetlenül nem befolyásolja a rangsorolást, nagyban befolyásolja az <strong>átkattintási arányt (CTR)</strong>. Egy jól megírt meta description felkelti az érdeklődést és ösztönzi a kattintást. Ideális hossza 150-160 karakter.</li> <li><strong>„</strong>: Biztosítja a helyes karakterkódolást, elkerülve a karakterkódolási problémákat, amelyek ronthatják a felhasználói élményt és a keresőmotorok általi értelmezést.</li> <li><strong>„</strong>: Kulcsfontosságú a mobilbarát megjelenéshez, ami ma már rangsorolási faktor a Google számára. Ennek hiányában az oldal rosszul jelenhet meg mobil eszközökön, ami negatívan befolyásolja a felhasználói élményt és a SEO-t.</li> </ul> <h3>Képek optimalizálása (`alt` attribútum)</h3> <p>Az `<img>` tagek `alt` attribútuma lehetővé teszi a keresőmotorok számára, hogy megértsék a képek tartalmát, mivel ők nem „látják” azokat. A leíró, kulcsszavakat tartalmazó `alt` szöveg javítja a képkeresésben való láthatóságot és az oldal relevanciáját. Emellett az akadálymentesség szempontjából is létfontosságú, mivel a képernyőolvasók ezt a szöveget olvassák fel a látássérülteknek. A megfelelő `alt` szöveg hozzájárul a <strong>képek SEO-jához</strong>.</p> <h3>Linkek (`<a>` tag)</h3> <p>A linkek a web szövetét alkotják. A belső linkek (az oldal saját oldalaira mutató linkek) segítenek a keresőmotoroknak felfedezni és indexelni az oldal tartalmát, valamint elosztani az „link juice”-t az oldalak között, jelezve a fontosabb oldalak felé. A külső linkek (más weboldalakra mutató linkek) a hitelességet és a relevanciát jelezhetik, de fontos a `rel=”nofollow”` vagy `rel=”sponsored”` attribútumok használata, ha fizetett vagy nem megbízható forrásra mutat a link. A linkek <strong>anchor textje</strong> (a kattintható szöveg) kulcsfontosságú a SEO-ban, mivel segít a keresőmotoroknak megérteni, hogy miről szól a céloldal.</p> <h3>Szemantikus HTML5 tagek a SEO szempontjából</h3> <p>Az olyan tagek, mint az `</p> <article>`, `</p> <section>`, `</p> <nav>`, `</p> <header>` és `</p> <footer>` segítenek a keresőmotoroknak jobban megérteni a tartalom különböző részeinek jelentését. Például, ha a navigációt a `</p> <nav>` tagbe helyezzük, a keresőmotorok tudják, hogy az a linkek egy csoportja, nem pedig csak általános szöveg. Ez növeli az oldal strukturális tisztaságát és a <strong>SEO értékét</strong>, mivel a keresőmotorok pontosabban tudják értelmezni az oldal témáját és hierarchiáját. A `<main>` tag különösen fontos, mivel egyértelműen jelöli az oldal fő tartalmát.</p> <h3>Strukturált adatok (schema markup)</h3> <p>Bár a strukturált adatok (például a Schema.org jelölések) nem közvetlenül HTML tagek, hanem a HTML-be ágyazott mikroadatok (JSON-LD, Microdata vagy RDFa formájában), elengedhetetlenek a modern SEO-hoz. Segítenek a keresőmotoroknak még pontosabban megérteni a tartalom típusát és kontextusát (pl. cikk, termék, esemény, recept), ami <strong>kiemelt találatokhoz (rich snippets)</strong> vezethet a keresési eredményekben. Ez növeli a láthatóságot és az átkattintási arányt, mivel a felhasználók relevánsabb és informatívabb találatokat látnak.</p> <h3>Oldalbetöltési sebesség</h3> <p>Bár az oldalbetöltési sebesség optimalizálása elsősorban a CSS és JavaScript optimalizálással, valamint a szerver konfigurációjával kapcsolatos, a tiszta és hatékony HTML kód közvetetten hozzájárul. A feleslegesen komplex, mélyen beágyazott vagy hibás HTML lassíthatja a böngésző renderelési folyamatát. A valid, szemantikus HTML könnyebben és gyorsabban dolgozható fel a böngészők által, ami jobb felhasználói élményt és magasabb rangsorolást eredményez, mivel a Google a sebességet is figyelembe veszi a rangsorolásnál.</p> <p>A HTML alapos ismerete tehát nem csupán a weboldalak építéséhez szükséges, hanem a sikeres online jelenlét és a <strong>keresőoptimalizálás</strong> egyik sarokköve is. A tiszta, szemantikus és szabványoknak megfelelő HTML kód lefekteti az alapot a magas rangsoroláshoz és a kiváló felhasználói élményhez, biztosítva, hogy a tartalom megtalálható és érthető legyen mind a felhasználók, mind a keresőmotorok számára.</p> </div> </div> <aside class="is-hidden rb-remove-bookmark" data-bookmarkid="5855"></aside> <div class="entry-footer"> <div class="inner"> <div class="single-post-tag tags"> <span class="tag-label">Címkék</span> <a rel="tag" href="https://5letes.hu/tag/html/" title="HTML">HTML</a> <a rel="tag" href="https://5letes.hu/tag/kod/" title="kód">kód</a> <a rel="tag" href="https://5letes.hu/tag/programozas/" title="programozás">programozás</a> <a rel="tag" href="https://5letes.hu/tag/tagek/" title="tagek">tagek</a> <a rel="tag" href="https://5letes.hu/tag/webfejlesztes/" title="webfejlesztés">webfejlesztés</a> </div> </div> </div> <aside class="reaction-section"> <div class="reaction-section-title"> <h3>Mi a véleményed? </h3> </div> <div class="reaction-section-content"><aside id="reaction-5855" class="rb-reaction reaction-wrap" data-reaction_uid="5855"><div class="reaction" data-reaction="love" data-reaction_uid="5855"><span class="reaction-content"><div class="reaction-icon"><svg class="rb-svg" viewBox="0 0 150 150"><use xlink:href="#symbol-love"></use></svg></div><span class="reaction-title h6">Imádom</span></span><span class="total-wrap"><span class="reaction-count">0</span></span></div><div class="reaction" data-reaction="sad" data-reaction_uid="5855"><span class="reaction-content"><div class="reaction-icon"><svg class="rb-svg" viewBox="0 0 150 150"><use xlink:href="#symbol-sad"></use></svg></div><span class="reaction-title h6">Elszomorított</span></span><span class="total-wrap"><span class="reaction-count">0</span></span></div><div class="reaction" data-reaction="happy" data-reaction_uid="5855"><span class="reaction-content"><div class="reaction-icon"><svg class="rb-svg" viewBox="0 0 150 150"><use xlink:href="#symbol-happy"></use></svg></div><span class="reaction-title h6">Király</span></span><span class="total-wrap"><span class="reaction-count">0</span></span></div><div class="reaction" data-reaction="sleepy" data-reaction_uid="5855"><span class="reaction-content"><div class="reaction-icon"><svg class="rb-svg" viewBox="0 0 150 150"><use xlink:href="#symbol-sleepy"></use></svg></div><span class="reaction-title h6">Unalmas</span></span><span class="total-wrap"><span class="reaction-count">0</span></span></div><div class="reaction" data-reaction="angry" data-reaction_uid="5855"><span class="reaction-content"><div class="reaction-icon"><svg class="rb-svg" viewBox="0 0 150 150"><use xlink:href="#symbol-angry"></use></svg></div><span class="reaction-title h6">Feldühített</span></span><span class="total-wrap"><span class="reaction-count">0</span></span></div><div class="reaction" data-reaction="dead" data-reaction_uid="5855"><span class="reaction-content"><div class="reaction-icon"><svg class="rb-svg" viewBox="0 0 150 150"><use xlink:href="#symbol-dead"></use></svg></div><span class="reaction-title h6">Megdöbbentett</span></span><span class="total-wrap"><span class="reaction-count">0</span></span></div><div class="reaction" data-reaction="wink" data-reaction_uid="5855"><span class="reaction-content"><div class="reaction-icon"><svg class="rb-svg" viewBox="0 0 150 150"><use xlink:href="#symbol-wink"></use></svg></div><span class="reaction-title h6">Vicces</span></span><span class="total-wrap"><span class="reaction-count">0</span></span></div></aside></div> </aside> <aside class="single-bottom-share"> <div class="share-header"> <span class="share-label">Megosztás</span> </div> <div class="share-content is-light-share tooltips-n"> <a class="share-action share-icon share-facebook" rel="nofollow" href="https://www.facebook.com/sharer.php?u=https%3A%2F%2F5letes.hu%2Fmit-jelent-a-html-alapfogalmak-tagek-es-egy-egyszeru-pelda-kezdoknek%2F" title="Facebook" aria-label="Facebook"><i class="rbi rbi-facebook"></i><span>Share on Facebook</span></a> <a class="share-action share-twitter share-icon" rel="nofollow" href="https://twitter.com/intent/tweet?text=Mit+jelent+a+HTML%3F+Alapfogalmak%2C+tagek+%C3%A9s+egy+egyszer%C5%B1+p%C3%A9lda+kezd%C5%91knek&url=https%3A%2F%2F5letes.hu%2Fmit-jelent-a-html-alapfogalmak-tagek-es-egy-egyszeru-pelda-kezdoknek%2F&via=%23" title="Twitter" aria-label="Twitter"> <i class="rbi rbi-x-twitter"></i><span>Share on Twitter</span> </a> <a class="share-action share-icon share-pinterest" rel="nofollow" href="https://pinterest.com/pin/create/button/?url=https%3A%2F%2F5letes.hu%2Fmit-jelent-a-html-alapfogalmak-tagek-es-egy-egyszeru-pelda-kezdoknek%2F&media=https://5letes.hu/wp-content/uploads/2026/02/mit-jelent-a-html-alapfogalmak-tagek-es-egy-egyszeru-pelda-kezdoknek.jpg&description=Mit+jelent+a+HTML%3F+Alapfogalmak%2C+tagek+%C3%A9s+egy+egyszer%C5%B1+p%C3%A9lda+kezd%C5%91knek" title="Pinterest" aria-label="Pinterest"><i class="rbi rbi-pinterest"></i><span>Share on Pinterest</span></a> <a class="share-icon share-email" rel="nofollow" href="mailto:?subject=Mit jelent a HTML? Alapfogalmak, tagek és egy egyszerű példa kezdőknek&BODY=I found this article interesting and thought of sharing it with you. Check it out: https%3A%2F%2F5letes.hu%2Fmit-jelent-a-html-alapfogalmak-tagek-es-egy-egyszeru-pelda-kezdoknek%2F" title="Email" aria-label="Email"><i class="rbi rbi-email-envelope"></i><span>Share on Email</span></a> </div> </aside> </div> </article> <div class="single-box clearfix"> <nav class="single-post-box box-nav rb-n20-gutter"> <div class="nav-el nav-left rb-p20-gutter"> <a href="https://5letes.hu/facebook-fiok-torlese-adatletoltes-deaktivalas-vegleges-torles-es-hataridok/"> <span class="nav-label"><i class="rbi rbi-angle-left"></i><span>Előző poszt</span></span> <span class="nav-inner h4"> <img width="150" height="150" src="https://5letes.hu/wp-content/uploads/2026/02/facebook-fiok-torlese-adatletoltes-deaktivalas-vegleges-torles-es-hataridok-150x150.jpg" class="attachment-thumbnail size-thumbnail wp-post-image" alt="" decoding="async" /> <span class="nav-title p-url">Facebook fiók törlése: adatletöltés, deaktiválás, végleges törlés és határidők</span> </span> </a> </div> <div class="nav-el nav-right rb-p20-gutter"> <a href="https://5letes.hu/marvanyos-tojasfestes-otthon-olajos-borotvahabos-technika-festekek-es-tartositas/"> <span class="nav-label"><span>Következő poszt</span><i class="rbi rbi-angle-right"></i></span> <span class="nav-inner h4"> <img width="150" height="150" src="https://5letes.hu/wp-content/uploads/2026/02/marvanyos-tojasfestes-otthon-olajos-borotvahabos-technika-festekek-es-tartositas-150x150.jpg" class="attachment-thumbnail size-thumbnail wp-post-image" alt="" decoding="async" /> <span class="nav-title p-url">Márványos tojásfestés otthon: olajos, borotvahabos technika, festékek és tartósítás</span> </span> </a> </div> </nav> <aside class="comment-box-wrap"> <div class="comment-box-header clearfix"> <h4 class="h3"><i class="rbi rbi-comments"></i>Leave a Reply</h4> </div> <div class="comment-box-content clearfix no-comment"> <div id="comments" class="comments-area"> <div id="respond" class="comment-respond"> <h3 id="reply-title" class="comment-reply-title">Vélemény, hozzászólás? <small><a rel="nofollow" id="cancel-comment-reply-link" href="/mit-jelent-a-html-alapfogalmak-tagek-es-egy-egyszeru-pelda-kezdoknek/#respond" style="display:none;">Válasz megszakítása</a></small></h3><form action="https://5letes.hu/wp-comments-post.php" method="post" id="commentform" class="comment-form"><p class="comment-notes"><span id="email-notes">Az e-mail címet nem tesszük közzé.</span> <span class="required-field-message">A kötelező mezőket <span class="required">*</span> karakterrel jelöltük</span></p><p class="comment-form-comment"><label for="comment">Hozzászólás <span class="required">*</span></label> <textarea autocomplete="new-password" placeholder="Leave Your Comment" id="f281a326bd" name="f281a326bd" cols="45" rows="8" maxlength="65525" required></textarea><textarea id="comment" aria-label="hp-comment" aria-hidden="true" name="comment" autocomplete="new-password" style="padding:0 !important;clip:rect(1px, 1px, 1px, 1px) !important;position:absolute !important;white-space:nowrap !important;height:1px !important;width:1px !important;overflow:hidden !important;" tabindex="-1"></textarea><script data-noptimize>document.getElementById("comment").setAttribute( "id", "af92a980820a1079587619fd8a5a52c8" );document.getElementById("f281a326bd").setAttribute( "id", "comment" );</script></p><p class="comment-form-author"><label for="author">Név <span class="required">*</span></label> <input placeholder="Name" id="author" name="author" type="text" value="" size="30" maxlength="245" autocomplete="name" required /></p> <p class="comment-form-email"><label for="email">E-mail cím <span class="required">*</span></label> <input placeholder="Email" id="email" name="email" type="email" value="" size="30" maxlength="100" aria-describedby="email-notes" autocomplete="email" required /></p> <p class="comment-form-url"><label for="url">Honlap</label> <input placeholder="Website" id="url" name="url" type="url" value="" size="30" maxlength="200" autocomplete="url" /></p> <p class="comment-form-cookies-consent"><input id="wp-comment-cookies-consent" name="wp-comment-cookies-consent" type="checkbox" value="yes" /> <label for="wp-comment-cookies-consent">A nevem, e-mail címem, és weboldalcímem mentése a böngészőben a következő hozzászólásomhoz.</label></p> <p class="form-submit"><input name="submit" type="submit" id="submit" class="btn-wrap" value="Hozzászólás küldése" /> <input type='hidden' name='comment_post_ID' value='5855' id='comment_post_ID' /> <input type='hidden' name='comment_parent' id='comment_parent' value='0' /> </p></form> </div> </div> </div> </aside> </div> </div> </main> <aside class="rbc-sidebar widget-area sidebar-sticky"> <div class="sidebar-inner"><div id="social_icon-1" class="widget w-sidebar widget-social-icon"> <div class="about-bio is-centered"> <h4>Got a Questions? </h4> <p>Find us on Socials or <a href="#">Contact us</a> and we’ll get back to you as soon as possible.</p> </div> <div class="social-icon-wrap clearfix tooltips-n is-centered"> <a class="social-link-facebook" title="Facebook" aria-label="Facebook" href="#" target="_blank" rel="noopener nofollow"><i class="rbi rbi-facebook" aria-hidden="true"></i></a><a class="social-link-twitter" title="Twitter" aria-label="Twitter" href="#" target="_blank" rel="noopener nofollow"><i class="rbi rbi-x-twitter" aria-hidden="true"></i></a><a class="social-link-pinterest" title="Pinterest" aria-label="Pinterest" href="#" target="_blank" rel="noopener nofollow"><i class="rbi rbi-pinterest-i" aria-hidden="true"></i></a><a class="social-link-instagram" title="Instagram" aria-label="Instagram" href="#" target="_blank" rel="noopener nofollow"><i class="rbi rbi-instagram" aria-hidden="true"></i></a> </div> </div><div id="sb_post-2" class="widget w-sidebar widget-post"><h2 class="widget-title h4">5letes dolgok</h2> <div class="widget-post-content"> <div class="rb-row widget-post-2"> <div class="rb-col-m6"> <div class="p-wrap p-grid p-grid-w1 post-7426"> <div class="p-feat"> <a class="p-flink" href="https://5letes.hu/henger-terfogat-szamitasa-kepletek-mertekegyseg-atvaltas-es-gyakorlo-peldak/" aria-label="Henger térfogat számítása: képletek, mértékegység‑átváltás és gyakorló példák"> <span class="rb-iwrap pc-75"><img width="280" height="210" src="https://5letes.hu/wp-content/uploads/2026/03/henger-terfogat-szamitasa-kepletek-mertekegyseg-atvaltas-es-gyakorlo-peldak-280x210.jpg" class="attachment-pixwell_280x210 size-pixwell_280x210 wp-post-image" alt="" decoding="async" /></span> </a> </div> <h6 class="entry-title"> <a class="p-url" href="https://5letes.hu/henger-terfogat-szamitasa-kepletek-mertekegyseg-atvaltas-es-gyakorlo-peldak/" rel="bookmark">Henger térfogat számítása: képletek, mértékegység‑átváltás és gyakorló példák</a> </h6> </div> </div> <div class="rb-col-m6"> <div class="p-wrap p-grid p-grid-w1 post-7439"> <div class="p-feat"> <a class="p-flink" href="https://5letes.hu/karacsonyi-ajandek-atadasa-mikor-szokas-kulturalis-kulonbsegek-es-meglepetes-strategiak/" aria-label="Karácsonyi ajándék átadása: mikor szokás, kulturális különbségek és meglepetés‑stratégiák"> <span class="rb-iwrap pc-75"><img width="280" height="210" src="https://5letes.hu/wp-content/uploads/2026/03/karacsonyi-ajandek-atadasa-mikor-szokas-kulturalis-kulonbsegek-es-meglepetes-strategiak-280x210.jpg" class="attachment-pixwell_280x210 size-pixwell_280x210 wp-post-image" alt="" decoding="async" /></span> </a> </div> <h6 class="entry-title"> <a class="p-url" href="https://5letes.hu/karacsonyi-ajandek-atadasa-mikor-szokas-kulturalis-kulonbsegek-es-meglepetes-strategiak/" rel="bookmark">Karácsonyi ajándék átadása: mikor szokás, kulturális különbségek és meglepetés‑stratégiák</a> </h6> </div> </div> <div class="rb-col-m6"> <div class="p-wrap p-grid p-grid-w1 post-7412"> <h6 class="entry-title"> <a class="p-url" href="https://5letes.hu/air-fryer-receptek-es-tippek-mit-keszithetunk-benne-hofok-idok-es-ropogos-vegeredmeny/" rel="bookmark">Air Fryer receptek és tippek: mit készíthetünk benne, hőfok‑idők és ropogós végeredmény</a> </h6> </div> </div> <div class="rb-col-m6"> <div class="p-wrap p-grid p-grid-w1 post-7433"> <div class="p-feat"> <a class="p-flink" href="https://5letes.hu/horgaszat-kezdoknek-engedelyek-felszereles-csalizas-es-alap-technikak/" aria-label="Horgászat kezdőknek: engedélyek, felszerelés, csalizás és alap technikák"> <span class="rb-iwrap pc-75"><img width="280" height="210" src="https://5letes.hu/wp-content/uploads/2026/03/horgaszat-kezdoknek-engedelyek-felszereles-csalizas-es-alap-technikak-280x210.jpg" class="attachment-pixwell_280x210 size-pixwell_280x210 wp-post-image" alt="" decoding="async" /></span> </a> </div> <h6 class="entry-title"> <a class="p-url" href="https://5letes.hu/horgaszat-kezdoknek-engedelyek-felszereles-csalizas-es-alap-technikak/" rel="bookmark">Horgászat kezdőknek: engedélyek, felszerelés, csalizás és alap technikák</a> </h6> </div> </div> <div class="rb-col-m6"> <div class="p-wrap p-grid p-grid-w1 post-7419"> <div class="p-feat"> <a class="p-flink" href="https://5letes.hu/hany-cserep-kell-egy-tetore-felulet-szamitasa-fedesi-egyseg-es-vesztesegtervezes/" aria-label="Hány cserép kell egy tetőre? Felület számítása, fedési egység és veszteségtervezés"> <span class="rb-iwrap pc-75"><img width="280" height="210" src="https://5letes.hu/wp-content/uploads/2026/03/hany-cserep-kell-egy-tetore-felulet-szamitasa-fedesi-egyseg-es-vesztesegtervezes-280x210.jpg" class="attachment-pixwell_280x210 size-pixwell_280x210 wp-post-image" alt="" decoding="async" /></span> </a> </div> <h6 class="entry-title"> <a class="p-url" href="https://5letes.hu/hany-cserep-kell-egy-tetore-felulet-szamitasa-fedesi-egyseg-es-vesztesegtervezes/" rel="bookmark">Hány cserép kell egy tetőre? Felület számítása, fedési egység és veszteségtervezés</a> </h6> </div> </div> <div class="rb-col-m6"> <div class="p-wrap p-grid p-grid-w1 post-7393"> <div class="p-feat"> <a class="p-flink" href="https://5letes.hu/apakomplexus-jelentese-pszichologiai-hatter-jelek-es-kapcsolati-mintazatok/" aria-label="Apakomplexus jelentése: pszichológiai háttér, jelek és kapcsolati mintázatok"> <span class="rb-iwrap pc-75"><img width="280" height="210" src="https://5letes.hu/wp-content/uploads/2026/03/apakomplexus-jelentese-pszichologiai-hatter-jelek-es-kapcsolati-mintazatok-280x210.jpg" class="attachment-pixwell_280x210 size-pixwell_280x210 wp-post-image" alt="" decoding="async" /></span> </a> </div> <h6 class="entry-title"> <a class="p-url" href="https://5letes.hu/apakomplexus-jelentese-pszichologiai-hatter-jelek-es-kapcsolati-mintazatok/" rel="bookmark">Apakomplexus jelentése: pszichológiai háttér, jelek és kapcsolati mintázatok</a> </h6> </div> </div> <div class="rb-col-m6"> <div class="p-wrap p-grid p-grid-w1 post-7408"> <div class="p-feat"> <a class="p-flink" href="https://5letes.hu/aktiv-pihenes-mikor-hogyan-es-milyen-tevekenysegekkel-toltodjunk-fel-hatekonyan/" aria-label="Aktív pihenés: mikor, hogyan és milyen tevékenységekkel töltődjünk fel hatékonyan"> <span class="rb-iwrap pc-75"><img width="280" height="210" src="https://5letes.hu/wp-content/uploads/2026/03/aktiv-pihenes-mikor-hogyan-es-milyen-tevekenysegekkel-toltodjunk-fel-hatekonyan-280x210.jpg" class="attachment-pixwell_280x210 size-pixwell_280x210 wp-post-image" alt="" decoding="async" /></span> </a> </div> <h6 class="entry-title"> <a class="p-url" href="https://5letes.hu/aktiv-pihenes-mikor-hogyan-es-milyen-tevekenysegekkel-toltodjunk-fel-hatekonyan/" rel="bookmark">Aktív pihenés: mikor, hogyan és milyen tevékenységekkel töltődjünk fel hatékonyan</a> </h6> </div> </div> </div> </div> </div><div id="categories-2" class="widget w-sidebar widget_categories"><h2 class="widget-title h4">Kategóriák</h2> <ul> <li class="cat-item cat-item-2"><a href="https://5letes.hu/category/allatok/">Állatok</a> </li> <li class="cat-item cat-item-3"><a href="https://5letes.hu/category/csalad/">Család</a> </li> <li class="cat-item cat-item-38"><a href="https://5letes.hu/category/divat/">Divat</a> </li> <li class="cat-item cat-item-4"><a href="https://5letes.hu/category/egeszseg/">Egészség</a> </li> <li class="cat-item cat-item-1"><a href="https://5letes.hu/category/egyeb/">Egyéb</a> </li> <li class="cat-item cat-item-5"><a href="https://5letes.hu/category/etel-ital/">Étel, ital</a> </li> <li class="cat-item cat-item-94"><a href="https://5letes.hu/category/filozofia-vallas/">Filozófia, vallás</a> </li> <li class="cat-item cat-item-21"><a href="https://5letes.hu/category/ingatlan/">Ingatlan</a> </li> <li class="cat-item cat-item-20"><a href="https://5letes.hu/category/internet/">Internet</a> </li> <li class="cat-item cat-item-9"><a href="https://5letes.hu/category/jatek/">Játék</a> </li> <li class="cat-item cat-item-55"><a href="https://5letes.hu/category/konyha/">Konyha</a> </li> <li class="cat-item cat-item-67"><a href="https://5letes.hu/category/marketing/">Marketing</a> </li> <li class="cat-item cat-item-58"><a href="https://5letes.hu/category/mobil/">Mobil</a> </li> <li class="cat-item cat-item-95"><a href="https://5letes.hu/category/munka-karrier/">Munka, karrier</a> </li> <li class="cat-item cat-item-96"><a href="https://5letes.hu/category/muveszet-kultura/">Művészet, kultúra</a> </li> <li class="cat-item cat-item-97"><a href="https://5letes.hu/category/oktatas/">Oktatás</a> </li> <li class="cat-item cat-item-10"><a href="https://5letes.hu/category/otthon-kert/">Otthon, kert</a> </li> <li class="cat-item cat-item-13"><a href="https://5letes.hu/category/sport-es-fitnessz/">Sport és Fitnessz</a> </li> <li class="cat-item cat-item-100"><a href="https://5letes.hu/category/szamitastechnika-muszaki-cikkek/">Számítástechnika, műszaki cikkek</a> </li> <li class="cat-item cat-item-11"><a href="https://5letes.hu/category/szepseg-es-divat/">Szépség és divat</a> </li> <li class="cat-item cat-item-81"><a href="https://5letes.hu/category/szoftver/">Szoftver</a> </li> <li class="cat-item cat-item-26"><a href="https://5letes.hu/category/szorakozas/">Szórakozás</a> </li> <li class="cat-item cat-item-34"><a href="https://5letes.hu/category/tanulas/">Tanulás</a> </li> <li class="cat-item cat-item-12"><a href="https://5letes.hu/category/utazas/">Utazás</a> </li> <li class="cat-item cat-item-99"><a href="https://5letes.hu/category/uzlet-jog/">Üzlet, jog</a> </li> <li class="cat-item cat-item-85"><a href="https://5letes.hu/category/vallalkozas/">Vállalkozás</a> </li> </ul> </div></div> </aside> </div> </div> <aside class="single-related-outer"> <div class="rbc-container rb-p20-gutter"> <div id="single-related-5855" class="block-wrap single-post-related layout-fw_grid_2" > <header class="block-header"> <h2 class="block-title h3">További 5letes ötletek</h2> </header> <div class="content-wrap"><div class="content-inner rb-row rb-n15-gutter"> <div class="rb-col-m6 rb-col-d3 rb-p15-gutter"> <div class="p-wrap p-grid p-grid-2 post-7426 no-avatar"> <div class="p-feat-holder"> <div class="p-feat"> <a class="p-flink" href="https://5letes.hu/henger-terfogat-szamitasa-kepletek-mertekegyseg-atvaltas-es-gyakorlo-peldak/" aria-label="Henger térfogat számítása: képletek, mértékegység‑átváltás és gyakorló példák"> <span class="rb-iwrap pc-75"><img width="280" height="210" src="https://5letes.hu/wp-content/uploads/2026/03/henger-terfogat-szamitasa-kepletek-mertekegyseg-atvaltas-es-gyakorlo-peldak-280x210.jpg" class="attachment-pixwell_280x210 size-pixwell_280x210 wp-post-image" alt="" decoding="async" /></span> </a> <aside class="p-cat-info is-absolute"> <a class="cat-info-el cat-info-id-97" href="https://5letes.hu/category/oktatas/" rel="category">Oktatás</a><a class="cat-info-el cat-info-id-100" href="https://5letes.hu/category/szamitastechnika-muszaki-cikkek/" rel="category">Számítástechnika, műszaki cikkek</a> </aside> </div> </div> <div class="p-header"><h4 class="entry-title"> <a class="p-url" href="https://5letes.hu/henger-terfogat-szamitasa-kepletek-mertekegyseg-atvaltas-es-gyakorlo-peldak/" rel="bookmark">Henger térfogat számítása: képletek, mértékegység‑átváltás és gyakorló példák</a> <span class="read-it-later bookmark-item" data-title="Read it Later" data-bookmarkid="7426"> <i class="rbi rbi-bookmark" aria-hidden="true"></i></span> </h4></div> <div class="p-footer"> <aside class="p-meta-info"> <span class="meta-info-el meta-info-read"> 34 Min Read </span> <span class="meta-info-el mobile-bookmark"><span class="read-it-later bookmark-item" data-title="Read it Later" data-bookmarkid="7426"> <i class="rbi rbi-bookmark" aria-hidden="true"></i></span> </span></aside> </div> </div> </div><div class="rb-col-m6 rb-col-d3 rb-p15-gutter"> <div class="p-wrap p-grid p-grid-2 post-7371 no-avatar"> <div class="p-feat-holder"> <div class="p-feat"> <a class="p-flink" href="https://5letes.hu/testverek-vitai-mikor-es-hogyan-avatkozzunk-be-meddig-hagyjuk-es-mit-tanitsunk-konfliktuskezelesbol/" aria-label="Testvérek vitái: mikor és hogyan avatkozzunk be, meddig hagyjuk, és mit tanítsunk konfliktuskezelésből"> <span class="rb-iwrap pc-75"><img width="280" height="210" src="https://5letes.hu/wp-content/uploads/2026/03/testverek-vitai-mikor-es-hogyan-avatkozzunk-be-meddig-hagyjuk-es-mit-tanitsunk-konfliktuskezelesbol-280x210.jpg" class="attachment-pixwell_280x210 size-pixwell_280x210 wp-post-image" alt="" decoding="async" /></span> </a> <aside class="p-cat-info is-absolute"> <a class="cat-info-el cat-info-id-3" href="https://5letes.hu/category/csalad/" rel="category">Család</a><a class="cat-info-el cat-info-id-97" href="https://5letes.hu/category/oktatas/" rel="category">Oktatás</a> </aside> </div> </div> <div class="p-header"><h4 class="entry-title"> <a class="p-url" href="https://5letes.hu/testverek-vitai-mikor-es-hogyan-avatkozzunk-be-meddig-hagyjuk-es-mit-tanitsunk-konfliktuskezelesbol/" rel="bookmark">Testvérek vitái: mikor és hogyan avatkozzunk be, meddig hagyjuk, és mit tanítsunk konfliktuskezelésből</a> <span class="read-it-later bookmark-item" data-title="Read it Later" data-bookmarkid="7371"> <i class="rbi rbi-bookmark" aria-hidden="true"></i></span> </h4></div> <div class="p-footer"> <aside class="p-meta-info"> <span class="meta-info-el meta-info-read"> 93 Min Read </span> <span class="meta-info-el mobile-bookmark"><span class="read-it-later bookmark-item" data-title="Read it Later" data-bookmarkid="7371"> <i class="rbi rbi-bookmark" aria-hidden="true"></i></span> </span></aside> </div> </div> </div><div class="rb-col-m6 rb-col-d3 rb-p15-gutter"> <div class="p-wrap p-grid p-grid-2 post-7339 no-avatar"> <div class="p-feat-holder"> <div class="p-feat"> <a class="p-flink" href="https://5letes.hu/damil-csere-fuszegelynyiroban-lepesrol-lepesre-utmutato-meretvalasztas-es-biztonsagi-tippek/" aria-label="Damil csere fűszegélynyíróban: lépésről lépésre útmutató, méretválasztás és biztonsági tippek"> <span class="rb-iwrap pc-75"><img width="280" height="210" src="https://5letes.hu/wp-content/uploads/2026/03/damil-csere-fuszegelynyiroban-lepesrol-lepesre-utmutato-meretvalasztas-es-biztonsagi-tippek-280x210.jpg" class="attachment-pixwell_280x210 size-pixwell_280x210 wp-post-image" alt="" decoding="async" /></span> </a> <aside class="p-cat-info is-absolute"> <a class="cat-info-el cat-info-id-10" href="https://5letes.hu/category/otthon-kert/" rel="category">Otthon, kert</a><a class="cat-info-el cat-info-id-100" href="https://5letes.hu/category/szamitastechnika-muszaki-cikkek/" rel="category">Számítástechnika, műszaki cikkek</a> </aside> </div> </div> <div class="p-header"><h4 class="entry-title"> <a class="p-url" href="https://5letes.hu/damil-csere-fuszegelynyiroban-lepesrol-lepesre-utmutato-meretvalasztas-es-biztonsagi-tippek/" rel="bookmark">Damil csere fűszegélynyíróban: lépésről lépésre útmutató, méretválasztás és biztonsági tippek</a> <span class="read-it-later bookmark-item" data-title="Read it Later" data-bookmarkid="7339"> <i class="rbi rbi-bookmark" aria-hidden="true"></i></span> </h4></div> <div class="p-footer"> <aside class="p-meta-info"> <span class="meta-info-el meta-info-read"> 37 Min Read </span> <span class="meta-info-el mobile-bookmark"><span class="read-it-later bookmark-item" data-title="Read it Later" data-bookmarkid="7339"> <i class="rbi rbi-bookmark" aria-hidden="true"></i></span> </span></aside> </div> </div> </div><div class="rb-col-m6 rb-col-d3 rb-p15-gutter"> <div class="p-wrap p-grid p-grid-2 post-7291 no-avatar"> <div class="p-feat-holder"> <div class="p-feat"> <a class="p-flink" href="https://5letes.hu/penzkereses-youtube-on-monetizacio-algoritmus-niche-valasztas-es-beveteli-modellek/" aria-label="Pénzkeresés YouTube‑on: monetizáció, algoritmus, niche választás és bevételi modellek"> <span class="rb-iwrap pc-75"><img width="280" height="210" src="https://5letes.hu/wp-content/uploads/2026/03/penzkereses-youtube-on-monetizacio-algoritmus-niche-valasztas-es-beveteli-modellek-280x210.jpg" class="attachment-pixwell_280x210 size-pixwell_280x210 wp-post-image" alt="" decoding="async" /></span> </a> <aside class="p-cat-info is-absolute"> <a class="cat-info-el cat-info-id-20" href="https://5letes.hu/category/internet/" rel="category">Internet</a><a class="cat-info-el cat-info-id-67" href="https://5letes.hu/category/marketing/" rel="category">Marketing</a><a class="cat-info-el cat-info-id-85" href="https://5letes.hu/category/vallalkozas/" rel="category">Vállalkozás</a> </aside> </div> </div> <div class="p-header"><h4 class="entry-title"> <a class="p-url" href="https://5letes.hu/penzkereses-youtube-on-monetizacio-algoritmus-niche-valasztas-es-beveteli-modellek/" rel="bookmark">Pénzkeresés YouTube‑on: monetizáció, algoritmus, niche választás és bevételi modellek</a> <span class="read-it-later bookmark-item" data-title="Read it Later" data-bookmarkid="7291"> <i class="rbi rbi-bookmark" aria-hidden="true"></i></span> </h4></div> <div class="p-footer"> <aside class="p-meta-info"> <span class="meta-info-el meta-info-read"> 29 Min Read </span> <span class="meta-info-el mobile-bookmark"><span class="read-it-later bookmark-item" data-title="Read it Later" data-bookmarkid="7291"> <i class="rbi rbi-bookmark" aria-hidden="true"></i></span> </span></aside> </div> </div> </div><div class="rb-col-m6 rb-col-d3 rb-p15-gutter"> <div class="p-wrap p-grid p-grid-2 post-8122 sticky no-avatar"> <div class="p-feat-holder"> <div class="p-feat"> <a class="p-flink" href="https://5letes.hu/autoszerelo-2026-ban-hogyan-talalj-profi-szakembert-online/" aria-label="Autószerelő 2026-ban: hogyan találj profi szakembert online?"> <span class="rb-iwrap pc-75"><img width="280" height="210" src="https://5letes.hu/wp-content/uploads/2026/03/provendoautoszerelesmegbizhatoautoszerelokolcson-280x210.png" class="attachment-pixwell_280x210 size-pixwell_280x210 wp-post-image" alt="" decoding="async" /></span> </a> <aside class="p-cat-info is-absolute"> <a class="cat-info-el cat-info-id-85" href="https://5letes.hu/category/vallalkozas/" rel="category">Vállalkozás</a><a class="cat-info-el cat-info-id-100" href="https://5letes.hu/category/szamitastechnika-muszaki-cikkek/" rel="category">Számítástechnika, műszaki cikkek</a><a class="cat-info-el cat-info-id-99" href="https://5letes.hu/category/uzlet-jog/" rel="category">Üzlet, jog</a> </aside> </div> </div> <div class="p-header"><h4 class="entry-title"> <a class="p-url" href="https://5letes.hu/autoszerelo-2026-ban-hogyan-talalj-profi-szakembert-online/" rel="bookmark">Autószerelő 2026-ban: hogyan találj profi szakembert online?</a> <span class="read-it-later bookmark-item" data-title="Read it Later" data-bookmarkid="8122"> <i class="rbi rbi-bookmark" aria-hidden="true"></i></span> </h4></div> <div class="p-footer"> <aside class="p-meta-info"> <span class="meta-info-el meta-info-read"> 4 Min Read </span> <span class="meta-info-el mobile-bookmark"><span class="read-it-later bookmark-item" data-title="Read it Later" data-bookmarkid="8122"> <i class="rbi rbi-bookmark" aria-hidden="true"></i></span> </span></aside> </div> </div> </div><div class="rb-col-m6 rb-col-d3 rb-p15-gutter"> <div class="p-wrap p-grid p-grid-2 post-7216 no-avatar"> <div class="p-feat-holder"> <div class="p-feat"> <a class="p-flink" href="https://5letes.hu/facebook-fiok-vegleges-torlese-es-adatmentes-lepesrol-lepesre-utmutato-hataridok-es-visszaallitasi-lehetosegek/" aria-label="Facebook fiók végleges törlése és adatmentés: lépésről lépésre útmutató, határidők és visszaállítási lehetőségek"> <span class="rb-iwrap pc-75"><img width="280" height="210" src="https://5letes.hu/wp-content/uploads/2026/03/facebook-fiok-vegleges-torlese-es-adatmentes-lepesrol-lepesre-utmutato-hataridok-es-visszaallitasi-lehetosegek-280x210.jpg" class="attachment-pixwell_280x210 size-pixwell_280x210 wp-post-image" alt="" decoding="async" /></span> </a> <aside class="p-cat-info is-absolute"> <a class="cat-info-el cat-info-id-20" href="https://5letes.hu/category/internet/" rel="category">Internet</a><a class="cat-info-el cat-info-id-81" href="https://5letes.hu/category/szoftver/" rel="category">Szoftver</a> </aside> </div> </div> <div class="p-header"><h4 class="entry-title"> <a class="p-url" href="https://5letes.hu/facebook-fiok-vegleges-torlese-es-adatmentes-lepesrol-lepesre-utmutato-hataridok-es-visszaallitasi-lehetosegek/" rel="bookmark">Facebook fiók végleges törlése és adatmentés: lépésről lépésre útmutató, határidők és visszaállítási lehetőségek</a> <span class="read-it-later bookmark-item" data-title="Read it Later" data-bookmarkid="7216"> <i class="rbi rbi-bookmark" aria-hidden="true"></i></span> </h4></div> <div class="p-footer"> <aside class="p-meta-info"> <span class="meta-info-el meta-info-read"> 29 Min Read </span> <span class="meta-info-el mobile-bookmark"><span class="read-it-later bookmark-item" data-title="Read it Later" data-bookmarkid="7216"> <i class="rbi rbi-bookmark" aria-hidden="true"></i></span> </span></aside> </div> </div> </div><div class="rb-col-m6 rb-col-d3 rb-p15-gutter"> <div class="p-wrap p-grid p-grid-2 post-7230 no-avatar"> <div class="p-feat-holder"> <div class="p-feat"> <a class="p-flink" href="https://5letes.hu/mit-jelent-hogy-influencer-tartalomkeszites-egyuttmukodesek-es-beveteli-modellek/" aria-label="Mit jelent, hogy influencer? Tartalomkészítés, együttműködések és bevételi modellek"> <span class="rb-iwrap pc-75"><img width="280" height="210" src="https://5letes.hu/wp-content/uploads/2026/03/mit-jelent-hogy-influencer-tartalomkeszites-egyuttmukodesek-es-beveteli-modellek-280x210.jpg" class="attachment-pixwell_280x210 size-pixwell_280x210 wp-post-image" alt="" decoding="async" /></span> </a> <aside class="p-cat-info is-absolute"> <a class="cat-info-el cat-info-id-20" href="https://5letes.hu/category/internet/" rel="category">Internet</a><a class="cat-info-el cat-info-id-67" href="https://5letes.hu/category/marketing/" rel="category">Marketing</a> </aside> </div> </div> <div class="p-header"><h4 class="entry-title"> <a class="p-url" href="https://5letes.hu/mit-jelent-hogy-influencer-tartalomkeszites-egyuttmukodesek-es-beveteli-modellek/" rel="bookmark">Mit jelent, hogy influencer? Tartalomkészítés, együttműködések és bevételi modellek</a> <span class="read-it-later bookmark-item" data-title="Read it Later" data-bookmarkid="7230"> <i class="rbi rbi-bookmark" aria-hidden="true"></i></span> </h4></div> <div class="p-footer"> <aside class="p-meta-info"> <span class="meta-info-el meta-info-read"> 29 Min Read </span> <span class="meta-info-el mobile-bookmark"><span class="read-it-later bookmark-item" data-title="Read it Later" data-bookmarkid="7230"> <i class="rbi rbi-bookmark" aria-hidden="true"></i></span> </span></aside> </div> </div> </div><div class="rb-col-m6 rb-col-d3 rb-p15-gutter"> <div class="p-wrap p-grid p-grid-2 post-7183 no-avatar"> <div class="p-feat-holder"> <div class="p-feat"> <a class="p-flink" href="https://5letes.hu/negyzetmeter-szamitasa-kepletek-osszetett-alaprajzok-merese-es-gyors-peldak/" aria-label="Négyzetméter számítása: képletek, összetett alaprajzok mérése és gyors példák"> <span class="rb-iwrap pc-75"><img width="280" height="210" src="https://5letes.hu/wp-content/uploads/2026/03/negyzetmeter-szamitasa-kepletek-osszetett-alaprajzok-merese-es-gyors-peldak-280x210.jpg" class="attachment-pixwell_280x210 size-pixwell_280x210 wp-post-image" alt="" decoding="async" /></span> </a> <aside class="p-cat-info is-absolute"> <a class="cat-info-el cat-info-id-21" href="https://5letes.hu/category/ingatlan/" rel="category">Ingatlan</a><a class="cat-info-el cat-info-id-97" href="https://5letes.hu/category/oktatas/" rel="category">Oktatás</a> </aside> </div> </div> <div class="p-header"><h4 class="entry-title"> <a class="p-url" href="https://5letes.hu/negyzetmeter-szamitasa-kepletek-osszetett-alaprajzok-merese-es-gyors-peldak/" rel="bookmark">Négyzetméter számítása: képletek, összetett alaprajzok mérése és gyors példák</a> <span class="read-it-later bookmark-item" data-title="Read it Later" data-bookmarkid="7183"> <i class="rbi rbi-bookmark" aria-hidden="true"></i></span> </h4></div> <div class="p-footer"> <aside class="p-meta-info"> <span class="meta-info-el meta-info-read"> 41 Min Read </span> <span class="meta-info-el mobile-bookmark"><span class="read-it-later bookmark-item" data-title="Read it Later" data-bookmarkid="7183"> <i class="rbi rbi-bookmark" aria-hidden="true"></i></span> </span></aside> </div> </div> </div><div class="rb-col-m6 rb-col-d3 rb-p15-gutter"> <div class="p-wrap p-grid p-grid-2 post-7141 no-avatar"> <div class="p-feat-holder"> <div class="p-feat"> <a class="p-flink" href="https://5letes.hu/mit-jelent-a-world-wide-web-www-rovid-tortenet-mukodes-es-kulcsfogalmak/" aria-label="Mit jelent a World Wide Web (WWW)? Rövid történet, működés és kulcsfogalmak"> <span class="rb-iwrap pc-75"><img width="280" height="210" src="https://5letes.hu/wp-content/uploads/2026/03/mit-jelent-a-world-wide-web-www-rovid-tortenet-mukodes-es-kulcsfogalmak-280x210.jpg" class="attachment-pixwell_280x210 size-pixwell_280x210 wp-post-image" alt="" decoding="async" /></span> </a> <aside class="p-cat-info is-absolute"> <a class="cat-info-el cat-info-id-20" href="https://5letes.hu/category/internet/" rel="category">Internet</a><a class="cat-info-el cat-info-id-97" href="https://5letes.hu/category/oktatas/" rel="category">Oktatás</a> </aside> </div> </div> <div class="p-header"><h4 class="entry-title"> <a class="p-url" href="https://5letes.hu/mit-jelent-a-world-wide-web-www-rovid-tortenet-mukodes-es-kulcsfogalmak/" rel="bookmark">Mit jelent a World Wide Web (WWW)? Rövid történet, működés és kulcsfogalmak</a> <span class="read-it-later bookmark-item" data-title="Read it Later" data-bookmarkid="7141"> <i class="rbi rbi-bookmark" aria-hidden="true"></i></span> </h4></div> <div class="p-footer"> <aside class="p-meta-info"> <span class="meta-info-el meta-info-read"> 27 Min Read </span> <span class="meta-info-el mobile-bookmark"><span class="read-it-later bookmark-item" data-title="Read it Later" data-bookmarkid="7141"> <i class="rbi rbi-bookmark" aria-hidden="true"></i></span> </span></aside> </div> </div> </div><div class="rb-col-m6 rb-col-d3 rb-p15-gutter"> <div class="p-wrap p-grid p-grid-2 post-7147 no-avatar"> <div class="p-feat-holder"> <div class="p-feat"> <a class="p-flink" href="https://5letes.hu/mi-kell-a-wi-fi-hez-router-szolgaltatoi-adatok-csatornavalasztas-es-halozatbiztonsag/" aria-label="Mi kell a Wi‑Fi‑hez? Router, szolgáltatói adatok, csatornaválasztás és hálózatbiztonság"> <span class="rb-iwrap pc-75"><img width="280" height="210" src="https://5letes.hu/wp-content/uploads/2026/03/mi-kell-a-wi-fi-hez-router-szolgaltatoi-adatok-csatornavalasztas-es-halozatbiztonsag-280x210.jpg" class="attachment-pixwell_280x210 size-pixwell_280x210 wp-post-image" alt="" decoding="async" /></span> </a> <aside class="p-cat-info is-absolute"> <a class="cat-info-el cat-info-id-20" href="https://5letes.hu/category/internet/" rel="category">Internet</a><a class="cat-info-el cat-info-id-100" href="https://5letes.hu/category/szamitastechnika-muszaki-cikkek/" rel="category">Számítástechnika, műszaki cikkek</a> </aside> </div> </div> <div class="p-header"><h4 class="entry-title"> <a class="p-url" href="https://5letes.hu/mi-kell-a-wi-fi-hez-router-szolgaltatoi-adatok-csatornavalasztas-es-halozatbiztonsag/" rel="bookmark">Mi kell a Wi‑Fi‑hez? Router, szolgáltatói adatok, csatornaválasztás és hálózatbiztonság</a> <span class="read-it-later bookmark-item" data-title="Read it Later" data-bookmarkid="7147"> <i class="rbi rbi-bookmark" aria-hidden="true"></i></span> </h4></div> <div class="p-footer"> <aside class="p-meta-info"> <span class="meta-info-el meta-info-read"> 37 Min Read </span> <span class="meta-info-el mobile-bookmark"><span class="read-it-later bookmark-item" data-title="Read it Later" data-bookmarkid="7147"> <i class="rbi rbi-bookmark" aria-hidden="true"></i></span> </span></aside> </div> </div> </div><div class="rb-col-m6 rb-col-d3 rb-p15-gutter"> <div class="p-wrap p-grid p-grid-2 post-7116 no-avatar"> <div class="p-feat-holder"> <div class="p-feat"> <a class="p-flink" href="https://5letes.hu/hogyan-szuletik-a-csiga-szaporodas-pete-fejlodese-es-erdekessegek/" aria-label="Hogyan születik a csiga? Szaporodás, pete fejlődése és érdekességek"> <span class="rb-iwrap pc-75"><img width="280" height="210" src="https://5letes.hu/wp-content/uploads/2026/03/hogyan-szuletik-a-csiga-szaporodas-pete-fejlodese-es-erdekessegek-280x210.jpg" class="attachment-pixwell_280x210 size-pixwell_280x210 wp-post-image" alt="" decoding="async" /></span> </a> <aside class="p-cat-info is-absolute"> <a class="cat-info-el cat-info-id-2" href="https://5letes.hu/category/allatok/" rel="category">Állatok</a><a class="cat-info-el cat-info-id-97" href="https://5letes.hu/category/oktatas/" rel="category">Oktatás</a> </aside> </div> </div> <div class="p-header"><h4 class="entry-title"> <a class="p-url" href="https://5letes.hu/hogyan-szuletik-a-csiga-szaporodas-pete-fejlodese-es-erdekessegek/" rel="bookmark">Hogyan születik a csiga? Szaporodás, pete fejlődése és érdekességek</a> <span class="read-it-later bookmark-item" data-title="Read it Later" data-bookmarkid="7116"> <i class="rbi rbi-bookmark" aria-hidden="true"></i></span> </h4></div> <div class="p-footer"> <aside class="p-meta-info"> <span class="meta-info-el meta-info-read"> 24 Min Read </span> <span class="meta-info-el mobile-bookmark"><span class="read-it-later bookmark-item" data-title="Read it Later" data-bookmarkid="7116"> <i class="rbi rbi-bookmark" aria-hidden="true"></i></span> </span></aside> </div> </div> </div><div class="rb-col-m6 rb-col-d3 rb-p15-gutter"> <div class="p-wrap p-grid p-grid-2 post-7074 no-avatar"> <div class="p-feat-holder"> <div class="p-feat"> <a class="p-flink" href="https://5letes.hu/otthoni-projektor-fenyero-kontraszt-felbontas-vetitesi-tavolsag-es-vaszonvalasztas/" aria-label="Otthoni projektor: fényerő, kontraszt, felbontás, vetítési távolság és vászonválasztás"> <span class="rb-iwrap pc-75"><img width="280" height="210" src="https://5letes.hu/wp-content/uploads/2026/03/otthoni-projektor-fenyero-kontraszt-felbontas-vetitesi-tavolsag-es-vaszonvalasztas-280x210.jpg" class="attachment-pixwell_280x210 size-pixwell_280x210 wp-post-image" alt="" decoding="async" /></span> </a> <aside class="p-cat-info is-absolute"> <a class="cat-info-el cat-info-id-100" href="https://5letes.hu/category/szamitastechnika-muszaki-cikkek/" rel="category">Számítástechnika, műszaki cikkek</a><a class="cat-info-el cat-info-id-26" href="https://5letes.hu/category/szorakozas/" rel="category">Szórakozás</a> </aside> </div> </div> <div class="p-header"><h4 class="entry-title"> <a class="p-url" href="https://5letes.hu/otthoni-projektor-fenyero-kontraszt-felbontas-vetitesi-tavolsag-es-vaszonvalasztas/" rel="bookmark">Otthoni projektor: fényerő, kontraszt, felbontás, vetítési távolság és vászonválasztás</a> <span class="read-it-later bookmark-item" data-title="Read it Later" data-bookmarkid="7074"> <i class="rbi rbi-bookmark" aria-hidden="true"></i></span> </h4></div> <div class="p-footer"> <aside class="p-meta-info"> <span class="meta-info-el meta-info-read"> 29 Min Read </span> <span class="meta-info-el mobile-bookmark"><span class="read-it-later bookmark-item" data-title="Read it Later" data-bookmarkid="7074"> <i class="rbi rbi-bookmark" aria-hidden="true"></i></span> </span></aside> </div> </div> </div> </div> </div> </div> </div> </aside> </div> </div> <aside class="top-footer-wrap fw-widget-section"> <div class="inner"> <div id="rbmc-1" class="widget w-sidebar widget-mc"> <div class="rb-mailchimp" style="background-color:#fafafa;"> <div class="rbc-container inner rb-p20-gutter"> <h5 class="mc-title h2">5letes hírlevél</h5> <div class="mc-desc"><span>Kapja meg heti legjobb ötleteinket egyenesen a postaládájába.</span></div> <div class="mc-form">[mc4wp_form]</div> </div> </div> </div> </div> </aside> <footer class="footer-wrap"> <div class="footer-widget footer-section footer-style-1"> <div class="rbc-container rb-p20-gutter"> <div class="footer-widget-inner rb-n20-gutter"> <div class="footer-col-1 rb-p20-gutter"> <div id="social_icon-2" class="widget w-sidebar w-footer widget-social-icon"><h2 class="widget-title h4">5letes.hu</h2> <div class="about-bio"> Hasznos tippekkel, trükkökkel és tanácsokkal látjuk el olvasóinkat számos témakörben, hogy mindennapjaikat könnyebbé és sikeresebbé tehessék. Magazinunkban inspirációt és útmutatót találhat, legyen szó életről, munkáról, hobbiról vagy akár utazásról. </div> <div class="social-icon-wrap clearfix tooltips-n"> <a class="social-link-facebook" title="Facebook" aria-label="Facebook" href="#" target="_blank" rel="noopener nofollow"><i class="rbi rbi-facebook" aria-hidden="true"></i></a><a class="social-link-twitter" title="Twitter" aria-label="Twitter" href="#" target="_blank" rel="noopener nofollow"><i class="rbi rbi-x-twitter" aria-hidden="true"></i></a><a class="social-link-pinterest" title="Pinterest" aria-label="Pinterest" href="#" target="_blank" rel="noopener nofollow"><i class="rbi rbi-pinterest-i" aria-hidden="true"></i></a><a class="social-link-instagram" title="Instagram" aria-label="Instagram" href="#" target="_blank" rel="noopener nofollow"><i class="rbi rbi-instagram" aria-hidden="true"></i></a> </div> </div> </div> <div class="footer-col-2 rb-p20-gutter"> </div> <div class="footer-col-3 rb-p20-gutter"> </div> <div class="footer-col-4 rb-p20-gutter"> <div id="sb_post-3" class="widget w-sidebar w-footer widget-post"><h2 class="widget-title h4">5letes posztok</h2> <div class="widget-post-content"> <div class="rb-row widget-post-3"> <div class="rb-col-m12"> <div class="p-wrap p-list p-list-5 post-7426 rb-hf no-avatar"> <div class="p-header"> <span class="p-cat-dot"> <i class="cat-dot-el cat-info-id-97"></i> </span> <h3 class="entry-title h6"> <a class="p-url" href="https://5letes.hu/henger-terfogat-szamitasa-kepletek-mertekegyseg-atvaltas-es-gyakorlo-peldak/" rel="bookmark">Henger térfogat számítása: képletek, mértékegység‑átváltás és gyakorló példák</a> </h3> </div> <div class="p-footer"> </div> </div> </div> <div class="rb-col-m12"> <div class="p-wrap p-list p-list-5 post-7439 rb-hf no-avatar"> <div class="p-header"> <span class="p-cat-dot"> <i class="cat-dot-el cat-info-id-3"></i> </span> <h3 class="entry-title h6"> <a class="p-url" href="https://5letes.hu/karacsonyi-ajandek-atadasa-mikor-szokas-kulturalis-kulonbsegek-es-meglepetes-strategiak/" rel="bookmark">Karácsonyi ajándék átadása: mikor szokás, kulturális különbségek és meglepetés‑stratégiák</a> </h3> </div> <div class="p-footer"> </div> </div> </div> <div class="rb-col-m12"> <div class="p-wrap p-list p-list-5 post-7412 rb-hf no-avatar"> <div class="p-header"> <span class="p-cat-dot"> <i class="cat-dot-el cat-info-id-5"></i> </span> <h3 class="entry-title h6"> <a class="p-url" href="https://5letes.hu/air-fryer-receptek-es-tippek-mit-keszithetunk-benne-hofok-idok-es-ropogos-vegeredmeny/" rel="bookmark">Air Fryer receptek és tippek: mit készíthetünk benne, hőfok‑idők és ropogós végeredmény</a> </h3> </div> <div class="p-footer"> </div> </div> </div> <div class="rb-col-m12"> <div class="p-wrap p-list p-list-5 post-7433 rb-hf no-avatar"> <div class="p-header"> <span class="p-cat-dot"> <i class="cat-dot-el cat-info-id-13"></i> </span> <h3 class="entry-title h6"> <a class="p-url" href="https://5letes.hu/horgaszat-kezdoknek-engedelyek-felszereles-csalizas-es-alap-technikak/" rel="bookmark">Horgászat kezdőknek: engedélyek, felszerelés, csalizás és alap technikák</a> </h3> </div> <div class="p-footer"> </div> </div> </div> <div class="rb-col-m12"> <div class="p-wrap p-list p-list-5 post-7419 rb-hf no-avatar"> <div class="p-header"> <span class="p-cat-dot"> <i class="cat-dot-el cat-info-id-21"></i> </span> <h3 class="entry-title h6"> <a class="p-url" href="https://5letes.hu/hany-cserep-kell-egy-tetore-felulet-szamitasa-fedesi-egyseg-es-vesztesegtervezes/" rel="bookmark">Hány cserép kell egy tetőre? Felület számítása, fedési egység és veszteségtervezés</a> </h3> </div> <div class="p-footer"> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> <div class="footer-logo footer-section"> <div class="rbc-container footer-logo-inner rb-p20-gutter"> <div class="footer-logo-wrap"> <a href="https://5letes.hu/" class="footer-logo"> <img loading="lazy" loading="lazy" decoding="async" height="686" width="1185" src="https://5letes.hu/wp-content/uploads/2025/03/logo.png" alt="5letes ötletek"> </a> </div> <ul id="footer-menu" class="footer-menu-inner"><li id="menu-item-681" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-681"><a href="https://5letes.hu/adatvedelmi-szabalyzat/"><span>Adatvédelmi szabályzat</span></a></li> <li id="menu-item-680" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-680"><a href="https://5letes.hu/felhasznalasi-feltetelek/"><span>Felhasználási feltételek</span></a></li> <li id="menu-item-682" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-682"><a href="https://5letes.hu/kapcsolat/"><span>Kapcsolat</span></a></li> </ul> </div> </div><div class="footer-copyright footer-section"> <div class="rbc-container"> <div class="copyright-inner rb-p20-gutter">©2025 5letes.hu. Minden jog fenntartva. <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-3581477582676872" crossorigin="anonymous"></script></div> </div> </div> </footer> </div> </div> <script> (function () { const darkModeID = 'RubyDarkMode'; const currentMode = navigator.cookieEnabled ? (localStorage.getItem(darkModeID) || 'default') : 'default'; const selector = currentMode === 'dark' ? '.mode-icon-dark' : '.mode-icon-default'; const icons = document.querySelectorAll(selector); if (icons.length) { icons.forEach(icon => icon.classList.add('activated')); } })(); </script> <script type="speculationrules"> {"prefetch":[{"source":"document","where":{"and":[{"href_matches":"/*"},{"not":{"href_matches":["/wp-*.php","/wp-admin/*","/wp-content/uploads/*","/wp-content/*","/wp-content/plugins/*","/wp-content/themes/pixwell/*","/*\\?(.+)"]}},{"not":{"selector_matches":"a[rel~=\"nofollow\"]"}},{"not":{"selector_matches":".no-prefetch, .no-prefetch a"}}]},"eagerness":"conservative"}]} </script> <script src="https://5letes.hu/wp-includes/js/imagesloaded.min.js?ver=5.0.0" id="imagesloaded-js"></script> <script src="https://5letes.hu/wp-content/plugins/pixwell-core/assets/jquery.isotope.min.js?ver=3.0.6" id="jquery-isotope-js"></script> <script src="https://5letes.hu/wp-content/plugins/pixwell-core/assets/rbcookie.min.js?ver=1.0.3" id="rbcookie-js"></script> <script src="https://5letes.hu/wp-content/plugins/pixwell-core/assets/jquery.mp.min.js?ver=1.1.0" id="jquery-magnific-popup-js"></script> <script id="pixwell-core-script-js-extra"> var pixwellCoreParams = {"ajaxurl":"https://5letes.hu/wp-admin/admin-ajax.php","darkModeID":"RubyDarkMode"}; //# sourceURL=pixwell-core-script-js-extra </script> <script src="https://5letes.hu/wp-content/plugins/pixwell-core/assets/core.js?ver=10.8" id="pixwell-core-script-js"></script> <script src="https://5letes.hu/wp-content/themes/pixwell/assets/js/jquery.waypoints.min.js?ver=3.1.1" id="jquery-waypoints-js"></script> <script src="https://5letes.hu/wp-content/themes/pixwell/assets/js/owl.carousel.min.js?ver=1.8.1" id="owl-carousel-js"></script> <script src="https://5letes.hu/wp-content/themes/pixwell/assets/js/rbsticky.min.js?ver=1.0" id="pixwell-sticky-js"></script> <script src="https://5letes.hu/wp-content/themes/pixwell/assets/js/jquery.tipsy.min.js?ver=1.0" id="jquery-tipsy-js"></script> <script src="https://5letes.hu/wp-content/themes/pixwell/assets/js/jquery.ui.totop.min.js?ver=v1.2" id="jquery-uitotop-js"></script> <script id="pixwell-global-js-extra"> var pixwellParams = {"ajaxurl":"https://5letes.hu/wp-admin/admin-ajax.php"}; var themeSettings = ["{\"sliderPlay\":0,\"sliderSpeed\":5550,\"textNext\":\"NEXT\",\"textPrev\":\"PREV\",\"sliderDot\":1,\"sliderAnimation\":0,\"embedRes\":0}"]; //# sourceURL=pixwell-global-js-extra </script> <script src="https://5letes.hu/wp-content/themes/pixwell/assets/js/global.js?ver=10.8" id="pixwell-global-js"></script> <script src="https://5letes.hu/wp-includes/js/comment-reply.min.js?ver=6.9.4" id="comment-reply-js" async data-wp-strategy="async" fetchpriority="low"></script> <script id="wp-emoji-settings" type="application/json"> {"baseUrl":"https://s.w.org/images/core/emoji/17.0.2/72x72/","ext":".png","svgUrl":"https://s.w.org/images/core/emoji/17.0.2/svg/","svgExt":".svg","source":{"concatemoji":"https://5letes.hu/wp-includes/js/wp-emoji-release.min.js?ver=6.9.4"}} </script> <script type="module"> /*! This file is auto-generated */ const a=JSON.parse(document.getElementById("wp-emoji-settings").textContent),o=(window._wpemojiSettings=a,"wpEmojiSettingsSupports"),s=["flag","emoji"];function i(e){try{var t={supportTests:e,timestamp:(new Date).valueOf()};sessionStorage.setItem(o,JSON.stringify(t))}catch(e){}}function c(e,t,n){e.clearRect(0,0,e.canvas.width,e.canvas.height),e.fillText(t,0,0);t=new Uint32Array(e.getImageData(0,0,e.canvas.width,e.canvas.height).data);e.clearRect(0,0,e.canvas.width,e.canvas.height),e.fillText(n,0,0);const a=new Uint32Array(e.getImageData(0,0,e.canvas.width,e.canvas.height).data);return t.every((e,t)=>e===a[t])}function p(e,t){e.clearRect(0,0,e.canvas.width,e.canvas.height),e.fillText(t,0,0);var n=e.getImageData(16,16,1,1);for(let e=0;e<n.data.length;e++)if(0!==n.data[e])return!1;return!0}function u(e,t,n,a){switch(t){case"flag":return n(e,"\ud83c\udff3\ufe0f\u200d\u26a7\ufe0f","\ud83c\udff3\ufe0f\u200b\u26a7\ufe0f")?!1:!n(e,"\ud83c\udde8\ud83c\uddf6","\ud83c\udde8\u200b\ud83c\uddf6")&&!n(e,"\ud83c\udff4\udb40\udc67\udb40\udc62\udb40\udc65\udb40\udc6e\udb40\udc67\udb40\udc7f","\ud83c\udff4\u200b\udb40\udc67\u200b\udb40\udc62\u200b\udb40\udc65\u200b\udb40\udc6e\u200b\udb40\udc67\u200b\udb40\udc7f");case"emoji":return!a(e,"\ud83e\u1fac8")}return!1}function f(e,t,n,a){let r;const o=(r="undefined"!=typeof WorkerGlobalScope&&self instanceof WorkerGlobalScope?new OffscreenCanvas(300,150):document.createElement("canvas")).getContext("2d",{willReadFrequently:!0}),s=(o.textBaseline="top",o.font="600 32px Arial",{});return e.forEach(e=>{s[e]=t(o,e,n,a)}),s}function r(e){var t=document.createElement("script");t.src=e,t.defer=!0,document.head.appendChild(t)}a.supports={everything:!0,everythingExceptFlag:!0},new Promise(t=>{let n=function(){try{var e=JSON.parse(sessionStorage.getItem(o));if("object"==typeof e&&"number"==typeof e.timestamp&&(new Date).valueOf()<e.timestamp+604800&&"object"==typeof e.supportTests)return e.supportTests}catch(e){}return null}();if(!n){if("undefined"!=typeof Worker&&"undefined"!=typeof OffscreenCanvas&&"undefined"!=typeof URL&&URL.createObjectURL&&"undefined"!=typeof Blob)try{var e="postMessage("+f.toString()+"("+[JSON.stringify(s),u.toString(),c.toString(),p.toString()].join(",")+"));",a=new Blob([e],{type:"text/javascript"});const r=new Worker(URL.createObjectURL(a),{name:"wpTestEmojiSupports"});return void(r.onmessage=e=>{i(n=e.data),r.terminate(),t(n)})}catch(e){}i(n=f(s,u,c,p))}t(n)}).then(e=>{for(const n in e)a.supports[n]=e[n],a.supports.everything=a.supports.everything&&a.supports[n],"flag"!==n&&(a.supports.everythingExceptFlag=a.supports.everythingExceptFlag&&a.supports[n]);var t;a.supports.everythingExceptFlag=a.supports.everythingExceptFlag&&!a.supports.flag,a.supports.everything||((t=a.source||{}).concatemoji?r(t.concatemoji):t.wpemoji&&t.twemoji&&(r(t.twemoji),r(t.wpemoji)))}); //# sourceURL=https://5letes.hu/wp-includes/js/wp-emoji-loader.min.js </script> <svg style="width:0;height:0;position:absolute; visibility:hidden" focusable="false"> <linearGradient id="gangry" xmlns="http://www.w3.org/2000/svg" gradientTransform="matrix(1 0 0 -1 -290 -347)" gradientUnits="userSpaceOnUse" x1="306" x2="306" y1="-378.9995" y2="-347"> <stop offset="0" style="stop-color:#FFE254"/> <stop offset="0.1174" style="stop-color:#FFDC54"/> <stop offset="0.2707" style="stop-color:#FECC55"/> <stop offset="0.4439" style="stop-color:#FCB156"/> <stop offset="0.6318" style="stop-color:#FA8B57"/> <stop offset="0.8291" style="stop-color:#F85B59"/> <stop offset="1" style="stop-color:#F52C5B"/> </linearGradient> <linearGradient gradientUnits="userSpaceOnUse" id="gcry" x1="25.001" x2="8.9985" y1="2.1416" y2="29.8586"> <stop offset="0" style="stop-color:#FFE254"/> <stop offset="1" style="stop-color:#FFB255"/> </linearGradient> <linearGradient gradientUnits="userSpaceOnUse" id="gdead" x1="24.001" x2="7.9985" y1="2.1416" y2="29.8586"> <stop offset="0" style="stop-color:#FFE254"/> <stop offset="1" style="stop-color:#FFB255"/> </linearGradient> <linearGradient gradientUnits="userSpaceOnUse" id="gembarrass" x1="24.001" x2="7.9985" y1="2.1416" y2="29.8586"> <stop offset="0" style="stop-color:#FFE254"/> <stop offset="1" style="stop-color:#FFB255"/> </linearGradient> <linearGradient gradientTransform="matrix(1 0 0 -1 -290 -347)" gradientUnits="userSpaceOnUse" id="ghappy" x1="314.001" x2="297.998" y1="-349.1416" y2="-376.8595"> <stop offset="0" style="stop-color:#FFE254"/> <stop offset="1" style="stop-color:#FFB255"/> </linearGradient> <linearGradient gradientTransform="matrix(-1 0 0 1 69.8398 0.3862)" gradientUnits="userSpaceOnUse" id="gjoy_1" x1="45.8389" x2="61.8413" y1="1.7559" y2="29.4729"> <stop offset="0" style="stop-color:#FFE254"/> <stop offset="1" style="stop-color:#FFB255"/> </linearGradient> <radialGradient cx="44.998" cy="20" gradientTransform="matrix(-1 0 0 1 69.998 -7)" gradientUnits="userSpaceOnUse" id="gjoy_2" r="5"> <stop offset="0" style="stop-color:#F52C5B;stop-opacity:0.6"/> <stop offset="0.1526" style="stop-color:#F5305B;stop-opacity:0.5389"/> <stop offset="0.3108" style="stop-color:#F63D5A;stop-opacity:0.4757"/> <stop offset="0.4715" style="stop-color:#F75159;stop-opacity:0.4114"/> <stop offset="0.6341" style="stop-color:#F96E58;stop-opacity:0.3464"/> <stop offset="0.798" style="stop-color:#FB9456;stop-opacity:0.2808"/> <stop offset="0.961" style="stop-color:#FEC155;stop-opacity:0.2156"/> <stop offset="1" style="stop-color:#FFCD54;stop-opacity:0.2"/> </radialGradient> <radialGradient cx="62.9473" cy="3.689" gradientTransform="matrix(-0.9189 0 0 0.9189 64.8423 15.6108)" gradientUnits="userSpaceOnUse" id="gjoy_3" r="5.4414"> <stop offset="0" style="stop-color:#F52C5B;stop-opacity:0.6"/> <stop offset="0.1526" style="stop-color:#F5305B;stop-opacity:0.5389"/> <stop offset="0.3108" style="stop-color:#F63D5A;stop-opacity:0.4757"/> <stop offset="0.4715" style="stop-color:#F75159;stop-opacity:0.4114"/> <stop offset="0.6341" style="stop-color:#F96E58;stop-opacity:0.3464"/> <stop offset="0.798" style="stop-color:#FB9456;stop-opacity:0.2808"/> <stop offset="0.961" style="stop-color:#FEC155;stop-opacity:0.2156"/> <stop offset="1" style="stop-color:#FFCD54;stop-opacity:0.2"/> </radialGradient> <linearGradient gradientTransform="matrix(-1 0 0 1 69.8398 0.3862)" gradientUnits="userSpaceOnUse" id="glove" x1="45.8389" x2="61.8413" y1="2.9731" y2="30.6902"> <stop offset="0" style="stop-color:#FFE254"/> <stop offset="1" style="stop-color:#FFB255"/> </linearGradient> <linearGradient gradientUnits="userSpaceOnUse" id="gsad" x1="24.001" x2="7.9984" y1="2.1416" y2="29.8589"> <stop offset="0" style="stop-color:#FFE254"/> <stop offset="1" style="stop-color:#FFB255"/> </linearGradient> <linearGradient gradientUnits="userSpaceOnUse" id="gsleepy" x1="24.001" x2="7.9985" y1="2.1416" y2="29.8586"> <stop offset="0" style="stop-color:#FFE254"/> <stop offset="1" style="stop-color:#FFB255"/> </linearGradient> <linearGradient gradientUnits="userSpaceOnUse" id="gwink" x1="24.001" x2="7.9985" y1="2.1416" y2="29.8586"> <stop offset="0" style="stop-color:#FFE254"/> <stop offset="1" style="stop-color:#FFB255"/> </linearGradient> <linearGradient gradientTransform="matrix(1 0 0 -1 -290 -347)" gradientUnits="userSpaceOnUse" id="gsurprise" x1="314.001" x2="297.998" y1="-349.1416" y2="-376.8595"> <stop offset="0" style="stop-color:#FFE254"/> <stop offset="1" style="stop-color:#FFB255"/> </linearGradient> </svg> <svg style="display:none; visibility:hidden"> <symbol id="symbol-angry" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"> <circle cx="16" cy="16" r="16" fill="url(#gangry)"/> <circle cx="9.5" cy="19.5" r="1.5" fill="#212731"/> <circle cx="22.5" cy="19.5" r="1.5" fill="#212731"/> <path d="M5 16c1 1 4.025 3 9 3M27 16c-1 1-4.025 3-9 3" fill="none" stroke="#212731" stroke-miterlimit="10"/> <path fill="#212731" d="M12 25h8v1h-8z"/> </symbol> <symbol id="symbol-cry" viewBox="0 0 34 32" xmlns="http://www.w3.org/2000/svg"> <circle cx="17" cy="16" r="16" fill="url(#gcry)"/> <path d="M27.85 13.38a.512.512 0 0 1-.64.33l-4.81-1.47c-.271-.08-.4-.36-.4-.62v-.24c0-.26.13-.54.4-.62l4.84-1.47c.27-.08.55.06.63.33.08.26-.07.54-.341.62L23.45 11.5l4.079 1.26c.261.08.401.36.321.62zM6.041 9.62a.513.513 0 0 1 .641-.33l4.864 1.47c.27.08.454.36.454.62v.24c0 .26-.184.54-.454.62l-4.867 1.47a.513.513 0 0 1-.644-.33.493.493 0 0 1 .334-.62l4.076-1.26-4.082-1.26a.496.496 0 0 1-.322-.62z" fill="#212731"/> <path d="M.525 15.598a2 2 0 0 0 2.949 2.703C4.221 17.486 4.703 14 4.703 14s-3.432.783-4.178 1.598zM33.475 15.648a2 2 0 0 1-2.949 2.703c-.746-.814-1.229-4.301-1.229-4.301s3.432.784 4.178 1.598z" fill="#2667c6"/> <ellipse cx="17" cy="22" rx="10" ry="5" fill="#f52c5b"/> <path d="M17 17c-5.523 0-10 2.239-10 5 0 1.183.826 2.268 2.199 3.123C9.998 23.337 13.185 22 17 22s7.001 1.337 7.801 3.123C26.174 24.268 27 23.183 27 22c0-2.761-4.477-5-10-5z" fill="#212731"/> </symbol> <symbol id="symbol-dead" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"> <circle cx="16" cy="16" r="16" fill="url(#gdead)"/> <path d="M23 23a2 2 0 0 1-2 2H11a2 2 0 0 1 0-4h10a2 2 0 0 1 2 2z" fill="#f52c5b"/> <path d="M21 21H11a2 2 0 0 0 0 4h.307c.688-.581 2.52-1 4.693-1s4.005.419 4.693 1H21a2 2 0 0 0 0-4zM26.529 12.76l-2.537-1.093c.001-.016.008-.031.008-.047v-.24c0-.016-.007-.031-.008-.047l2.537-1.093a.497.497 0 0 0-.289-.95l-3.269 1.296-3.29-1.296a.513.513 0 0 0-.64.33c-.08.26.062.54.322.62l2.638 1.123-.002.017v.24l.002.017-2.633 1.123a.493.493 0 0 0-.334.62c.08.271.374.41.644.33l3.291-1.296 3.24 1.296c.261.08.56-.06.64-.33a.492.492 0 0 0-.32-.62zM12.529 12.76l-2.537-1.093c.001-.016.008-.031.008-.047v-.24c0-.016-.007-.031-.008-.047l2.537-1.093a.497.497 0 0 0-.289-.95l-3.269 1.296L5.682 9.29a.513.513 0 0 0-.64.33c-.08.26.062.54.322.62l2.638 1.123L8 11.38v.24l.002.017-2.633 1.123a.493.493 0 0 0-.334.62c.08.271.374.41.644.33l3.291-1.296 3.24 1.296c.261.08.56-.06.64-.33a.494.494 0 0 0-.321-.62z" fill="#212731"/> </symbol> <symbol id="symbol-embarrass" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"> <circle cx="16" cy="16" r="16" fill="url(#gembarrass)"/> <path d="M24 22c1.952 1.952-2.477 5-8 5s-9.952-3.048-8-5c2-2 2.477 1 8 1s6-3 8-1z" fill="#f52c5b"/> <path d="M6.538 15.078c.94-4.015 5.941-3.985 7 0M19.537 15.078c.941-4.014 5.941-3.984 7 0" fill="none" stroke="#212731" stroke-miterlimit="10"/> <path d="M24 22c-2-2-2.477 1-8 1s-6-3-8-1c-1.212 1.212.038 2.846 2.481 3.911C11.397 25.376 13.522 25 16 25s4.603.376 5.519.911C23.962 24.846 25.213 23.212 24 22z" fill="#212731"/> <path d="M24 22c-2-2-2.477 1-8 1s-6-3-8-1c-1.212 1.212.038 2.846 2.481 3.911C11.397 25.376 13.522 25 16 25s4.603.376 5.519.911C23.962 24.846 25.213 23.212 24 22z" fill="#212731"/> <path d="M30 8a2 2 0 0 1-4 0c0-1.104 2-4 2-4s2 2.896 2 4z" fill="#2667c6"/> </symbol> <symbol id="symbol-happy" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"> <circle cx="16" cy="16" r="16" fill="url(#ghappy)"/> <path d="M16 27c6.075 0 11-4.925 11-11H5c0 6.075 4.925 11 11 11z" fill="#f52c5b"/> <path d="M16 19c3.416 0 6.468 1.557 8.484 4A10.944 10.944 0 0 0 27 16H5c0 2.659.944 5.098 2.515 7 2.017-2.443 5.069-4 8.485-4zM26.85 13.38a.512.512 0 0 1-.64.33l-4.81-1.47c-.271-.08-.4-.36-.4-.62v-.24c0-.26.13-.54.4-.62l4.84-1.47c.27-.08.55.06.63.33.08.26-.07.54-.341.62L22.45 11.5l4.079 1.26c.261.08.401.36.321.62zM5.042 9.62c.08-.271.38-.41.64-.33l4.864 1.47c.27.08.454.36.454.62v.24c0 .26-.184.54-.454.62l-4.867 1.47a.513.513 0 0 1-.644-.33.493.493 0 0 1 .333-.62l4.076-1.26-4.082-1.26a.494.494 0 0 1-.32-.62z" fill="#212731"/> </symbol> <symbol id="symbol-joy" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"> <circle cx="16" cy="16" r="16" fill="url(#gjoy_1)"/> <path d="M20 13.001A5.004 5.004 0 0 0 25 18c2.757 0 5-2.242 5-5s-2.24-5-5-5c-2.758 0-5 2.243-5 5.001z" opacity=".6" fill="url(#gjoy_2)"/> <circle cx="7" cy="19" r="5" opacity=".6" fill="url(#gjoy_3)"/> <path d="M22 15c0 4-6 7-10 4M16.293 8.222c0-2.828 3.535-4.949 6.364-2.121M5.687 11.758c0-2.829 3.535-4.95 6.363-2.122" fill="none" stroke="#212731" stroke-miterlimit="10"/> </symbol> <symbol id="symbol-love" viewBox="0 0 32 33.217" xmlns="http://www.w3.org/2000/svg"> <circle cx="16" cy="17.217" r="16" fill="url(#glove)"/> <path d="M17.63 25.049c5.947-1.237 9.766-7.062 8.528-13.01L4.619 16.521c1.238 5.947 7.063 9.766 13.011 8.528z" fill="#f52c5b"/> <path d="M16 17.217a10.975 10.975 0 0 1 9.121 2.188 10.947 10.947 0 0 0 1.037-7.366L4.619 16.521a10.95 10.95 0 0 0 3.889 6.341A10.971 10.971 0 0 1 16 17.217z" fill="#212731"/> <path d="M11.096 3.674c2.043 2.603-3.6 6.933-3.6 6.933S.595 8.887 1.431 5.684c.802-3.071 4.802-1.15 4.802-1.15s2.903-3.357 4.863-.86zM23.822 1.026c2.044 2.604-3.599 6.934-3.599 6.934s-6.901-1.721-6.065-4.923c.802-3.071 4.802-1.15 4.802-1.15s2.903-3.357 4.862-.861z" fill="#f52c5b"/> </symbol> <symbol id="symbol-sad" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"> <circle cx="16" cy="16" r="16" fill="url(#gsad)"/> <circle cx="9" cy="16" r="2" fill="#212731"/> <circle cx="23" cy="16" r="2" fill="#212731"/> <path d="M21 24c-2.211-2.212-7.789-2.212-10 0" fill="none" stroke="#212731" stroke-width="1.28" stroke-miterlimit="10"/> <path d="M25 27a2 2 0 0 1-4 0c0-1.104 2-4 2-4s2 2.896 2 4z" fill="#2667c6"/> <path d="M27 14c-1-2-3-3-5-3M5 14c1-2 3-3 5-3" fill="none" stroke="#212731" stroke-miterlimit="10"/> </symbol> <symbol id="symbol-sleepy" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"> <circle cx="16" cy="16" r="16" fill="url(#gsleepy)"/> <path d="M26 22c0 2.761-4.477 5-10 5S6 24.761 6 22s4.477-3 10-3 10 .239 10 3z" fill="#f52c5b"/> <path d="M16 19c-5.523 0-10 .239-10 3 0 1.183.826 2.268 2.199 3.123C8.998 23.337 12.185 22 16 22s7.001 1.337 7.801 3.123C25.174 24.268 26 23.183 26 22c0-2.761-4.477-3-10-3z" fill="#212731"/> <path d="M26 11c-.94 4.015-5.941 3.985-7 0M13 11c-.941 4.014-5.941 3.984-7 0" fill="none" stroke="#212731" stroke-miterlimit="10"/> <path d="M23.098 21.845a.349.349 0 0 1-.348.348h-1.752a.353.353 0 0 1-.317-.204.319.319 0 0 1-.03-.149c0-.078.023-.156.078-.223L22 20.094h-1.002a.349.349 0 0 1-.348-.348.35.35 0 0 1 .348-.354h1.752c.137 0 .258.078.317.204.018.048.03.096.03.144a.355.355 0 0 1-.078.229l-1.271 1.523h1.002a.348.348 0 0 1 .348.353zM26.926 20.286a.464.464 0 0 1-.464.464h-2.335a.475.475 0 0 1-.424-.271.439.439 0 0 1-.039-.2c0-.104.031-.208.104-.296l1.695-2.031h-1.336a.463.463 0 0 1-.463-.463c0-.265.207-.473.463-.473h2.335c.185 0 .344.104.424.272.024.063.04.128.04.191a.468.468 0 0 1-.104.304l-1.695 2.031h1.335c.256 0 .464.208.464.472zM31.582 18.42c0 .32-.26.58-.58.58h-2.918a.59.59 0 0 1-.529-.34.522.522 0 0 1-.051-.25c0-.13.041-.26.131-.37l2.118-2.538h-1.669a.58.58 0 0 1-.58-.58c0-.329.26-.589.58-.589h2.918c.23 0 .43.13.53.34.03.079.05.159.05.239 0 .14-.04.27-.13.38l-2.118 2.539h1.668c.32 0 .58.26.58.589z" fill="#43af20"/> </symbol> <symbol id="symbol-wink" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"> <circle cx="16" cy="16" r="16" fill="url(#gwink)"/> <path d="M16 27c6.075 0 11-4.925 11-11H5c0 6.075 4.925 11 11 11z" fill="#212731"/> <path d="M10.129 21.975A9.06 9.06 0 0 0 10 23.5c0 4.142 2.686 7.5 6 7.5s6-3.358 6-7.5a9.06 9.06 0 0 0-.129-1.525c-.092-.544-.668-.975-1.22-.975h-9.303c-.551 0-1.127.431-1.219.975z" fill="#f52c5b"/> <path d="M6.042 8.62c.08-.271.38-.41.64-.33l4.864 1.47c.27.08.454.36.454.62v.24c0 .26-.184.54-.454.62l-4.867 1.47a.513.513 0 0 1-.644-.33.493.493 0 0 1 .333-.62l4.076-1.26-4.081-1.26a.494.494 0 0 1-.321-.62z" fill="#212731"/> <circle cx="24" cy="11" r="2" fill="#212731"/> </symbol> <symbol id="symbol-surprise" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"> <circle cx="16" cy="16" r="16" fill="url(#gsurprise)"/> <ellipse cx="9" cy="12" rx="2" ry="3" fill="#212731"/> <ellipse cx="23" cy="12" rx="2" ry="3" fill="#212731"/> <ellipse cx="16" cy="22.5" rx="5" ry="6.5" fill="#212731"/> <path d="M7 4c1-2 4-2 5 0M20 4c1-2 4-2 5 0" fill="none" stroke="#212731" stroke-miterlimit="10"/> </symbol> </svg> </body> </html>

Archívum

Kategóriák

Meta

Mi az a HTML? A web alapköve

Hogyan értelmezik a böngészők a HTML-t? A DOM

Alapvető HTML fogalmak

Tag és elem

Attribútumok

Dokumentumtípus deklaráció

A HTML dokumentum szerkezete: head és body

A „ szekció