2. fejezet¶

Ebben a részben folytatjuk a HTML dokumentum törzsrészében (body) használatos tagekkel való ismerkedést.

Szakaszok¶

HTML-ben lehetőségünk van a weboldal tartalmának strukturálására is. Ezt szakaszok, tartalmi egységek kialakításával tehetjük meg.

A <div>...</div> egy általános célú blokkszintű (block) szakasz. A blokkszintű elemek mindig új sorban kezdődnek, és kihasználják a teljes rendelkezésre álló szélességet.

A <span>...</span> egy átalános célú sorszintű (inline) szakasz. A sorszintű elemek nem kezdődnek új sorban, illetve szélességük csak akkora, mint amekkora helyre szükségük van.

Szabály

Egy sorszintű (inline) HTML elem nem tartalmazhat blokkszintű (block) elemet.

Példa: A <span> és <div> tagek használata. A kód kimenetében a szemléletesség kedvéért a <div>-ek által meghatározott szakaszokat világoskék, míg a <span> által meghatározott szakaszt sárga háttérrel jelöltük

<!DOCTYPE html>
<html lang="hu">
  <head>
    <title>Szakaszok</title>
    <meta charset="UTF-8"/>
  </head>
  <body>
    <div>
      <h2>1. tartalmi egység</h2>
      <p>Ez egy bekezdés.</p>
      <p>Ez egy másik bekezdés.</p>
    </div>
    <div>
      <h2>2. tartalmi egység</h2>
      <p>Ez egy olyan bekezdés, ami egy <span>span elemet</span> tartalmaz.</p>
    </div>
  </body>
</html>

A kód kimenete, színezéssel kiegészítve

Listák¶

A HTML listák lehetőséget biztosítanak arra, hogy egymáshoz kapcsolódó információkat egy csoportba gyűjtve sorolhassunk fel. Két fontos listatípus:

<ul>...</ul>: rendezetlen (számozatlan) lista
- akkor használjuk, ha a listaelemek között nincs megállapítható sorrend
- a listaelemeket a <li>...</li> taggel adhatjuk meg
<ol>...</ol>: rendezett (számozott) lista
- akkor használjuk, ha számít a listaelemek sorrendje
- a listaelemeket a <li>...</li> taggel adhatjuk meg
- fontosabb attribútumok:
  - reversed: fordított számozás
  - start: számozás kezdősorszáma
  - type: felsorolásjel típusa
    - lehetséges értékei: 1: arab szám, i: "kisbetűs" római szám, I: "nagybetűs" római szám, a: kisbetű, A: nagybetű

Példa: Rendezetlen és rendezett lista

<!-- Rendezetlen (számozatlan) lista -->
<ul>
  <li>Kenyér</li>
  <li>Tej</li>
  <li>Felvágott</li>
</ul>

<!-- Rendezett (számozott) lista -->
<ol>
  <li>Nyisd ki a szemed!</li>
  <li>Nyomd ki az ébresztőt!</li>
  <li>Aludj vissza!</li>
</ol>

A kód kimenete

A fenti listatípusokból készíthetünk többszintű listát is. Ennek a lényege, hogy egy listaelembe egy másik listát ágyazunk be.

Példa: Többszintű lista

<ol>
  <li>Első listaelem</li>
  <li>
    Második listaelem
    <ol type="a">
      <li>Első allista elem</li>
      <li>Második allista elem</li>
    </ol>
  </li>
  <li>Harmadik listaelem</li>
</ol>

A kód kimenete

Táblázatok¶

A <table>...</table> taggel egy táblázatot szúrhatunk be a weboldalunkra. A táblázat egy sorát a <tr>...</tr> tag segítségével adhatjuk meg. Az egyes sorokon belül létrehozhatunk fejléccellákat (<th>...</th> tag), illetve adatcellákat (<td>...</td> tag).

Ha szeretnénk egy táblázatnak címet adni, akkor ezt a <caption>...</caption> taggel tehetjük meg, amit mindig közvetlenül a <table> után kell írnunk.

Példa: Egy egyszerű táblázat

<table>
  <caption>Kínálatunk</caption>
  <tr>
    <th>Pizza neve</th>
    <th>Ár</th>
  </tr>
  <tr>
    <td>Sonkás-kukoricás</td>
    <td>1800 Ft</td>
  </tr>
  <tr>
    <td>Négysajtos</td>
    <td>2000 Ft</td>
  </tr>
</table>

Lehetőségünk van arra is, hogy egy táblázatban sor- és oszlopösszevonásokat végezzünk: a celláknak adott rowspan attribútummal megadhatjuk az összevonni kívánt sorok számát, a colspan attribútummal pedig az összevonni kívánt oszlopok számát.

Azt is meg tudjuk mondani, hogy egy táblázatcella mely fejléccellá(k)hoz tartozik. Ezt a következőképpen tehetjük meg:

a fejléccelláknak adunk egy-egy id attribútumot (egyedi azonosítót)
a cellák headers attribútumaként megadjuk azon fejléccellá(k)nak az id-értékét, ami(k)hez az adott cella tartozik.

Ha a headers attribútumot ennek megfelelően használjuk, akkor a képernyőolvasó programok a táblázatcellák esetén azt is felolvassák, hogy az adott cella melyik fejléccellá(k)hoz tartozik. Ezáltal a képernyőolvasókat használó felhasználói csoportok (pl. vakok, látássérültek) számára egyszerűbb lesz a táblázatban szereplő adatok értelmezése.

Példa: Az előző táblázat kiegészítése sor- és oszlopösszevonással, valamint fejléccella-társítással

<table>
  <caption>Kínálatunk</caption>
  <tr>
    <th id="nev">Pizza neve</th>
    <th id="ar">Ár</th>
    <th id="extra">Rendelés esetén jár még</th>
  </tr>
  <tr>
    <td headers="nev">Sonkás-kukoricás</td>
    <td headers="ar">1800 Ft</td>
    <td headers="extra" rowspan="2">Ajándék szósz és üdítő</td>
  </tr>
  <tr>
    <td headers="nev">Négysajtos</td>
    <td headers="ar">2000 Ft</td>
  </tr>
  <tr>
    <td headers="nev">Hawaii</td>
    <td headers="ar extra" colspan="2">NEM RENDELHETŐ!</td>
  </tr>
</table>

A HTML táblázatok sorait 3 fő egységre bonthatjuk:

<thead>...</thead>: fejlécsorok csoportja
<tbody>...</tbody>: adatsorok csoportja, a táblázat törzse
<tfoot>...</tfoot>: láblécsorok csoportja.

A fenti tagek használata opcionális, nem kötelező. Használatuk esetén, ha papírra nyomtatjuk ki a weboldal tartalmát, akkor a hosszabb, több lapon átívelő táblázatoknál a <thead> és a <tfoot> minden nyomtatott oldalon megjelenik.

Ha szeretnénk a táblázat oszlopait csoportosítani (pl. formázás céljából), akkor ezt a <colgroup>...</colgroup> taggel tehetjük meg. Ezt közvetlenül a <caption> után (ha van caption) és a <thead> elé (ha van thead) írjuk. Az oszlopcsoportosításon belül a <col/> páratlan tag jelöl egy oszlopot. Ha egyszerre több, mondjuk N darab oszlopot szeretnénk kijelölni a csoportosításban, akkor ezt a <col span="N"/> segítségével tudjuk megtenni.

Példa: Az előző táblázat kiegészítése a sorok és oszlopok csoportosításával

<table>
  <caption>Kínálatunk</caption>
  <colgroup>
    <!-- az első oszlop világospiros háttérszínű lesz -->
    <col style="background-color: salmon;"/>
    <!-- a következő 2 oszlop világoszöld háttérszínt kap -->
    <col style="background-color: lightgreen;" span="2"/>
  </colgroup>
  <thead>
    <tr>
      <th id="nev">Pizza neve</th>
      <th id="ar">Ár</th>
      <th id="extra">Rendelés esetén jár még</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td headers="nev">Sonkás-kukoricás</td>
      <td headers="ar">1800 Ft</td>
      <td headers="extra" rowspan="2">Ajándék szósz és üdítő</td>
    </tr>
    <tr>
      <td headers="nev">Négysajtos</td>
      <td headers="ar">2000 Ft</td>
    </tr>
    <tr>
      <td headers="nev">Hawaii</td>
      <td headers="ar extra" colspan="2">NEM RENDELHETŐ!</td>
    </tr>
  </tbody>
  <!-- itt még lehetne akár egy <tfoot> is, viszont ez opcionális... -->
</table>

A kód kimenete

Utolsó frissítés: 2025-08-10 20:20:45