3. Listák HTML-ben

• 11 perc olvasás • HTML5 alapok

A listák az egyik leggyakrabban használt HTML elem a weboldalak strukturálásához. Ebben a cikkben megismerkedhetsz a rendezett és rendezetlen listákkal, azok tulajdonságaival és a beágyazott listák helyes használatával.

Érettségi információ

Ez a lecke EMELT SZINTŰ érettségi anyag!

A listák (ul, ol, li) használata alapvető érettségi követelmény. Ismerned kell a listák megadásának módját HTML-ben.

Miért fontosak a listák? EMELT SZINT

A listák segítenek a tartalom logikus felépítésében:

  • Olvashatóság: Könnyebb áttekinteni a felsorolt elemeket
  • Szemantika: Jelentéssel bírnak a keresőmotorok számára
  • Akadálymentesség: Képernyőolvasók külön jelzik őket
  • Stílusozhatóság: CSS-sel sokféleképpen testreszabhatóak

Rendezetlen listák: <ul> EMELT SZINT

A <ul> (unordered list) rendezetlen listát hoz létre, ahol az elemek sorrendje nem számít. Alapértelmezetten pontokkal (bullet) jelöli az elemeket.

Alapvető használat

HTML - Rendezetlen lista
<ul> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> </ul>

Élő példa - Rendezetlen lista:

  • HTML
  • CSS
  • JavaScript

Fontos szabályok

  • A <ul> elem csak <li> elemeket tartalmazhat közvetlenül
  • Minden lista elem <li> (list item) tag-gel kezdődik
  • Az <li> elemben tetszőleges HTML elem elhelyezhető (szöveg, kép, link, stb.)

Lista elemek tartalma

A lista elemekben bármilyen HTML tartalmat elhelyezhetsz:

HTML - Komplex lista elemek
<ul> <li> <strong>HTML</strong> - Strukturálási nyelv </li> <li> <strong>CSS</strong> - Stílusozási nyelv <p>Reszponzív design, animációk, layoutok</p> </li> <li> <a href="https://developer.mozilla.org">JavaScript</a> - Programozási nyelv </li> </ul>

Élő példa - Komplex lista elemek:

  • HTML - Strukturálási nyelv
  • CSS - Stílusozási nyelv

    Reszponzív design, animációk, layoutok

  • JavaScript - Programozási nyelv

Rendezett listák: <ol> EMELT SZINT

Az <ol> (ordered list) rendezett listát hoz létre, ahol az elemek sorrendje fontos. Alapértelmezetten számokkal jelöli az elemeket.

Alapvető használat

HTML - Rendezett lista
<ol> <li>Nyisd meg a Visual Studio Code-ot</li> <li>Hozz létre egy új fájlt</li> <li>Mentsd el .html kiterjesztéssel</li> <li>Írd meg a HTML kódot</li> <li>Nyisd meg böngészőben</li> </ol>

Élő példa - Rendezett lista:

  1. Nyisd meg a Visual Studio Code-ot
  2. Hozz létre egy új fájlt
  3. Mentsd el .html kiterjesztéssel
  4. Írd meg a HTML kódot
  5. Nyisd meg böngészőben

Lista típusok - type attribútum

A type attribútummal módosíthatod a számozás stílusát:

Type érték Számozás típusa Példa
type="1" Számok (alapértelmezett) 1, 2, 3, 4, 5...
type="A" Nagy betűk A, B, C, D, E...
type="a" Kis betűk a, b, c, d, e...
type="I" Nagy római számok I, II, III, IV, V...
type="i" Kis római számok i, ii, iii, iv, v...
HTML - Lista típusok
<!-- Római számok --> <ol type="I"> <li>Első fejezet</li> <li>Második fejezet</li> <li>Harmadik fejezet</li> </ol> <!-- Betűk --> <ol type="A"> <li>A opció</li> <li>B opció</li> <li>C opció</li> </ol>

Élő példa - Különböző lista típusok:

Római számok (I):

  1. Első fejezet
  2. Második fejezet
  3. Harmadik fejezet

Betűk (A):

  1. A opció
  2. B opció
  3. C opció

Kis betűk (a):

  1. a verzió
  2. b verzió
  3. c verzió

Start attribútum - Kezdő érték megadása

A start attribútummal beállíthatod, melyik számtól kezdődjön a számozás:

HTML - Start attribútum
<ol start="5"> <li>Ötödik lépés</li> <li>Hatodik lépés</li> <li>Hetedik lépés</li> </ol>

Élő példa - Start attribútum:

  1. Ötödik lépés
  2. Hatodik lépés
  3. Hetedik lépés

Reversed attribútum - Fordított sorrend

A reversed attribútum fordított sorrendben számolja az elemeket:

HTML - Reversed attribútum
<ol reversed> <li>Bronz érmes</li> <li>Ezüst érmes</li> <li>Arany érmes</li> </ol>

Élő példa - Visszafelé számolás:

  1. Bronz érmes
  2. Ezüst érmes
  3. Arany érmes

Beágyazott (nested) listák EMELT SZINT

A listákat egymásba lehet ágyazni, ami hierarchikus struktúrát eredményez. Ez különösen hasznos tartalomjegyzékek, menük vagy összetett felsorolások esetén.

Beágyazott rendezetlen listák

HTML - Beágyazott UL lista
<ul> <li>Frontend technológiák <ul> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> </ul> </li> <li>Backend technológiák <ul> <li>Node.js</li> <li>Python</li> <li>PHP</li> </ul> </li> <li>Adatbázisok <ul> <li>MySQL</li> <li>MongoDB</li> <li>PostgreSQL</li> </ul> </li> </ul>

Élő példa - Beágyazott rendezetlen lista:

  • Frontend technológiák
    • HTML
    • CSS
    • JavaScript
  • Backend technológiák
    • Node.js
    • Python
    • PHP
  • Adatbázisok
    • MySQL
    • MongoDB
    • PostgreSQL

Beágyazás szabályai

  • A beágyazott lista az <li> elemen belül helyezkedik el
  • Nincs korlátozva a beágyazási mélység (de ne vidd túlzásba!)
  • A beágyazott lista lehet <ul> vagy <ol>, bármilyen kombinációban
  • A böngésző automatikusan más bullet stílust vagy behúzást alkalmaz a szintekhez

Beágyazott rendezett listák

HTML - Beágyazott OL lista
<ol> <li>Weboldal tervezés <ol> <li>Wireframe készítés</li> <li>Design mockup</li> <li>Prototípus</li> </ol> </li> <li>Fejlesztés <ol> <li>HTML struktúra</li> <li>CSS stílusok</li> <li>JavaScript interaktivitás</li> </ol> </li> <li>Tesztelés és publikálás <ol> <li>Böngésző kompatibilitás</li> <li>Teljesítmény optimalizálás</li> <li>Deployment</li> </ol> </li> </ol>

Élő példa - Beágyazott rendezett lista:

  1. Weboldal tervezés
    1. Wireframe készítés
    2. Design mockup
    3. Prototípus
  2. Fejlesztés
    1. HTML struktúra
    2. CSS stílusok
    3. JavaScript interaktivitás
  3. Tesztelés és publikálás
    1. Böngésző kompatibilitás
    2. Teljesítmény optimalizálás
    3. Deployment

Vegyes beágyazás - OL és UL kombinálva

Kombinálhatod a rendezett és rendezetlen listákat a tartalomtól függően:

HTML - Vegyes beágyazott listák
<ol> <li>Reggeli feladatok <ul> <li>E-mailek ellenőrzése</li> <li>Napi terv áttekintése</li> <li>Stand-up meeting</li> </ul> </li> <li>Projekt munka <ul> <li>Frontend fejlesztés</li> <li>Code review</li> <li>Testing</li> </ul> </li> <li>Nap zárása <ul> <li>Commit és push</li> <li>Dokumentáció frissítés</li> <li>Holnapi teendők</li> </ul> </li> </ol>

Élő példa - Vegyes listák:

  1. Reggeli feladatok
    • E-mailek ellenőrzése
    • Napi terv áttekintése
    • Stand-up meeting
  2. Projekt munka
    • Frontend fejlesztés
    • Code review
    • Testing
  3. Nap zárása
    • Commit és push
    • Dokumentáció frissítés
    • Holnapi teendők

Gyakori használati esetek EMELT SZINT

Navigációs menü

HTML - Navigációs menü listával
<nav> <ul> <li><a href="index.html">Főoldal</a></li> <li><a href="about.html">Rólunk</a></li> <li><a href="services.html">Szolgáltatások</a> <ul> <li><a href="webdesign.html">Webdesign</a></li> <li><a href="seo.html">SEO</a></li> </ul> </li> <li><a href="contact.html">Kapcsolat</a></li> </ul> </nav>

Lépésenkénti útmutató

HTML - Útmutató rendezett listával
<h2>Hogyan készíts weboldalt?</h2> <ol> <li>Telepítsd a szükséges eszközöket <ul> <li>Szövegszerkesztő (VS Code, Sublime)</li> <li>Modern böngésző (Chrome, Firefox)</li> </ul> </li> <li>Készítsd el az HTML vázat</li> <li>Add hozzá a CSS stílusokat</li> <li>Teszteld böngészőben</li> <li>Publikáld az oldalt</li> </ol>

Gyakori hibák

  • ❌ Lista elem nélkül: Ne tegyél szöveget közvetlenül az <ul> vagy <ol> elembe, csak <li> elemeket!
  • ❌ Rosszul beágyazva: A belső lista az <li> elemen belül legyen, ne kívül!
  • ❌ Nem megfelelő használat: Ne használj listát csak a behúzás miatt - arra CSS szolgál!

Összefoglalás

Ebben a cikkben megismerkedtél a HTML listák használatával:

  • Rendezetlen listák (<ul>): Pont jelölőkkel, sorrendtől független elemek
  • Rendezett listák (<ol>): Számozott vagy betűzött elemek, sorrend fontos
  • Lista attribútumok: type, start, reversed tulajdonságok
  • Beágyazott listák: Hierarchikus struktúra többszintű tartalomhoz
  • Gyakorlati használat: Navigáció, útmutatók, tartalomjegyzékek

Példák a weboldalunkon

Nézd meg, hogyan használjuk a listákat a gyakorlatban:

Következő lépések

Gyakorold az itt tanultakat: készíts egy tartalomjegyzéket beágyazott listákkal, vagy egy lépésről-lépésre útmutatót rendezett listákkal!

Következő cikk: Hivatkozások és navigáció HTML-ben - Ismerd meg a linkeket részletesen: belső és külső hivatkozások, anchor elemek, relatív és abszolút útvonalak. Tanuld meg a target és rel attribútumok használatát!