# 3. Listák HTML-ben

2025. november 13. • 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:

5. Ötödik lépés
6. Hatodik lépés
7. 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:

- Főoldal navigáció - Rendezetlen lista (ul) a menü elemekhez
- Alkatrészek oldal - Beágyazott listák a dropdown menühöz
- Processzor oldal - Rendezett listák (ol) lépésenkénti útmutatókhoz

#### 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!