# Szemantikus HTML

> A teszt azt nézi, hogy van-e az oldalon main elem, és legalább egy header, nav vagy footer. Ha hiányzik, a div-ek helyett használd ezeket.

A szemantikus elemek (`<header>`, `<nav>`, `<main>`, `<footer>`) megmondják a böngészőnek és a segédeszközöknek, mi micsoda az oldalon. A képernyőolvasóval böngészők ezekkel a tájékozódási pontokkal (landmarkokkal) ugorhatnak a lap részei között, például egyből a fő tartalomra. A WCAG 2.2 1.3.1-es sikerességi feltétele (Info and Relationships, A szint) azt kéri, hogy az oldal szerkezete programozottan kiolvasható legyen; a HTML-elemek ezt a feladatot látják el.

## Hogyan mérjük

A riport egy valódi böngészőben betölti az oldalt, és a betöltött DOM-ban megkeresi a szerkezeti elemeket.

- **Főtartalom:** van `<main>` elem vagy `role="main"` attribútumú elem.
- **Szerkezeti elemek:** van legalább egy `<header>` (vagy `role="banner"`), `<nav>` (vagy `role="navigation"`), vagy `<footer>` (vagy `role="contentinfo"`).

Az eredmény:

- **Megfelelő:** mindkét feltétel teljesül.
- **Hiba:** hiányzik a `main`, vagy a `header`, `nav`, `footer` hármas mindegyike. A riport jelzi, melyik hiányzik.

Figyelmeztető szint nincs; a teszt súlyossága alacsony.

A mérés megengedő: a három szerkezeti elemből elég egy, és a `<header>` bármilyen elhelyezésben számít, akkor is, ha egy cikken belül áll (a HTML szerint az ilyen nem az oldal fejléce, és nem lesz belőle oldalszintű tájékozódási pont). Azt sem vizsgálja, hogy a tartalom jól van-e csoportosítva, vagy hogy egy oldalon egynél több `<main>` van-e.

## Hogyan javítsd

Cseréld le a szerkezeti szerepet betöltő `<div>` elemeket a megfelelő szemantikus elemekre:

- `<header>`: az oldal fejléce (logó, főcím);
- `<nav>`: a fő navigáció (menü);
- `<main>`: az oldal fő tartalma, oldalanként egyszer;
- `<footer>`: az oldal lábléce.

### HTML

```html title="HTML"
<header>…</header>
<nav>…</nav>
<main>…</main>
<footer>…</footer>
```

Ha csak a `<main>` hiányzik, tedd köré a lap fő tartalmát. Ha csak a fejléc, a menü és a lábléc hiányzik, azokat a megfelelő blokkokra kell tenni.

### WordPress

Ezek az elemek a téma sablonfájljaiban vannak: a `header.php`, a `footer.php` és az oldal- vagy bejegyzéssablon. Egy jól elkészített téma eleve használja őket; ha nem, gyermektémában módosítsd a sablonokat. Blokkos témánál a webhelyszerkesztőben a sablon és a sablonrészek (fejléc, lábléc) kezelésénél nézd meg, hogy a blokkok milyen HTML-elemet írnak ki.

## Hogyan ellenőrizd

1. Az oldal Konzoljában (F12) futtasd:

   ```js title="Konzol"
   ['main', 'header', 'nav', 'footer'].map((s) => [s, document.querySelectorAll(s).length])
   ```

   A `main` értéke legyen 1, a másik háromból legalább az egyik legyen 1 vagy több.
2. A riportban futtasd újra a mérést.