# 1. HTML-oldalak felépítése

2025. november 13. • 10 perc olvasás • HTML5 alapok

A HTML (HyperText Markup Language) a modern weboldalak alapja. Ebben a cikkben megismerkedhetsz a HTML dokumentumok alapszerkezetével, a kötelező elemekkel és a szemantikus HTML használatával.

#### Érettségi információ

Ez a lecke VEGYES tartalmú!

- Érettségi anyag: HTML dokumentum szerkezete (DOCTYPE, html, head, body, meta elemek)
- Bónusz: Szemantikus HTML elemek (header, main, footer)

Az alapszerkezet kötelező érettségi anyag. A szemantikus elemek hasznos tudás, de nem követelmény.

## Alapszerkezet: A HTML dokumentum váza EMELT SZINT

Minden HTML dokumentum egy jól definiált struktúrát követ. Az alábbi elemek nélkülözhetetlenek minden HTML oldalon:

### 1. DOCTYPE deklaráció

A `<!DOCTYPE html>` deklaráció közli a böngészővel, hogy HTML5 dokumentummal van dolga. Ez mindig a dokumentum legelső sora kell legyen.

#### Miért fontos?

A DOCTYPE nélkül a böngésző "quirks mode"-ba kapcsol, ami inkonzisztens megjelenítést eredményezhet. A HTML5 DOCTYPE egyszerű és univerzális.

### 2. HTML elem

A `<html>` elem a gyökér (root) elem, amely az összes többi HTML elemet tartalmazza. A `lang` attribútum megadása fontos a keresőmotorok és képernyőolvasók számára:

HTML - Nyelv attribútum
`<html lang="hu"> <!-- A teljes oldal tartalma ide kerül --> </html>`

### 3. HEAD elem - Metainformációk

A `<head>` elem olyan információkat tartalmaz, amelyek nem jelennek meg közvetlenül az oldalon, de fontosak a böngésző és a keresőmotorok számára.

### 4. BODY elem - Látható tartalom

A `<body>` elem tartalmazza az oldal összes látható tartalmát: szövegeket, képeket, linkeket, stb.

## Teljes példa: Minimális HTML dokumentum EMELT SZINT

HTML - Alapszerkezet
`<!DOCTYPE html> <html lang="hu"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Az oldal címe</title> </head> <body> <h1>Üdvözöllek az oldalon!</h1> <p>Ez egy egyszerű HTML dokumentum.</p> </body> </html>`

## Metaelemek: Fontos információk a HEAD-ben EMELT SZINT

A `<head>` elemben különböző metaelemek helyezkednek el, amelyek az oldal működését és megjelenítését befolyásolják:

### Karakterkódolás (charset)

A `<meta charset="UTF-8">` elem biztosítja, hogy az ékezetes betűk és speciális karakterek helyesen jelenjenek meg:

HTML - Karakterkódolás
`<meta charset="UTF-8">`

#### UTF-8 előnyei

Az UTF-8 univerzális karakterkódolás, amely támogatja az összes nyelv karaktereit: magyar ékezetes betűk, emoji-k, kínai karakterek, stb.

### Viewport beállítás (reszponzív design)

A viewport meta tag nélkülözhetetlen a mobilbarát weboldalakhoz:

HTML - Viewport meta tag
`<meta name="viewport" content="width=device-width, initial-scale=1.0">`

- width=device-width: Az oldal szélessége igazodik az eszköz képernyőjéhez
- initial-scale=1.0: Az alapértelmezett zoom szint 100%

### Title elem - Az oldal címe

A `<title>` elem szövege jelenik meg a böngésző fülén és a keresési találatokban:

HTML - Title elem
`<title>HTML-oldalak felépítése - HTML5 Blog</title>`

Fontos tudnivalók:

- Maximális hossz: 50-60 karakter (hosszabb címet levágja a Google)
- Legyen egyedi minden oldalon
- Tartalmazza a főbb kulcsszavakat
- Segíti a SEO-t (keresőoptimalizálást)

### Description meta tag - Oldal leírása

A description meta tag rövid leírása az oldalról, amely megjelenik a keresési találatok alatt:

HTML - Description meta tag
`<meta name="description" content="Tanuld meg a HTML oldalak alapszerkezetét: DOCTYPE, html, head, body elemek, metaadatok és szemantikus struktúra.">`

Legjobb gyakorlatok:

- Maximális hossz: 150-160 karakter
- Vonzó, informatív szöveg
- Befolyásolja a kattintási arányt (CTR)

### CSS stíluslap belinkelése - A LINK tag

A `<link>` tag külső erőforrásokat kapcsol be a HTML dokumentumba. Leggyakrabban CSS stíluslapok belinkelésére használjuk, de más célokra is alkalmas (favicon, betűtípusok, stb.).

#### CSS fájl belinkelése

A `<link rel="stylesheet">` tag segítségével kapcsolhatjuk be a CSS stíluslapot, amely az oldal megjelenését szabályozza:

HTML - CSS belinkelése
`<link rel="stylesheet" type="text/css" href="style.css">`

A LINK tag legfontosabb attribútumai:

- rel="stylesheet": Meghatározza, hogy CSS stíluslapot linkelünk be (relationship = kapcsolat típusa)
- href="style.css": A CSS fájl elérési útvonala (relatív vagy abszolút)
- type="text/css": A fájl MIME típusa (opcionális, alapértelmezett érték)

#### Miért fontos a CSS belinkelése?

A CSS (Cascading Style Sheets) felelős az oldal vizuális megjelenéséért: színek, betűtípusok, elrendezés, reszponzív design. A külső CSS fájl használata:

- Szétválasztja a tartalmat (HTML) és a megjelenést (CSS)
- Több oldalon is újrafelhasználható
- Gyorsabb betöltés (a böngésző cache-eli a CSS fájlt)
- Könnyebb karbantartás (egy helyen módosíthatjuk a stílusokat)

#### A LINK tag elhelyezése és sorrendje

A `<link>` tagek mindig a `<head>` részben helyezkednek el. Az ajánlott sorrend:

HTML - Ajánlott sorrend a HEAD-ben
`<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Oldal címe</title> <meta name="description" content="Oldal leírása"> <!-- CSS stíluslap - ezt érdemes a favicon ELŐTT belinkelni --> <link rel="stylesheet" type="text/css" href="style.css"> <!-- Favicon - később is betöltődhet --> <link rel="icon" type="image/png" href="favicon.png"> </head>`

Miért fontos a sorrend?

- A böngésző sorban dolgozza fel a HTML elemeket
- A CSS betöltése fontosabb az oldal megjelenítéséhez, mint a favicon
- Ha a CSS későn töltődik be, villoghat az oldal (FOUC - Flash of Unstyled Content)
- A favicon később is betöltődhet anélkül, hogy zavarna a felhasználói élményt

#### Több CSS fájl belinkelése

Ha több CSS fájlunk van (pl. külön fájl a responsív designhoz vagy animációkhoz), azokat egymás után linkelhetjük:

HTML - Több CSS fájl
`<link rel="stylesheet" type="text/css" href="style.css"> <link rel="stylesheet" type="text/css" href="responsive.css"> <link rel="stylesheet" type="text/css" href="animations.css">`

A CSS fájlok felülről lefelé haladva töltődnek be és alkalmazódnak. Ha ugyanaz a CSS szabály többször is szerepel, az utolsó érvényes (ezért "Cascading" = lépcsőzetes).

#### Relatív és abszolút elérési útvonalak

A `href` attribútumban különböző típusú útvonalakat használhatunk:

HTML - Különböző útvonal típusok
`<!-- Relatív útvonal (ugyanabban a mappában) --> <link rel="stylesheet" type="text/css" href="style.css"> <!-- Relatív útvonal (almappában) --> <link rel="stylesheet" type="text/css" href="css/style.css"> <!-- Gyökér relatív útvonal (a domain gyökerétől) --> <link rel="stylesheet" type="text/css" href="/css/style.css"> <!-- Abszolút URL (külső szerverről, pl. CDN) --> <link rel="stylesheet" type="text/css" href="https://cdn.example.com/style.css">`

### Favicon - Az oldal ikonja

A favicon a kis ikon, amely a böngésző fülön és a könyvjelzőkben jelenik meg:

HTML - Favicon link
`<link rel="icon" type="image/png" sizes="32x32" href="images/favicon.png">`

Ajánlott méretek: 16x16, 32x32 vagy 64x64 pixel PNG vagy ICO formátumban.

## Szemantikus HTML: Header, Main, Footer BÓNUSZ

A szemantikus HTML elemek jelentéssel bíró címkék, amelyek segítik a böngészőket, keresőmotorokat és képernyőolvasókat az oldal struktúrájának megértésében.

### Header - Fejléc szakasz

A `<header>` elem az oldal vagy egy szakasz fejlécét tartalmazza (logó, navigáció):

HTML - Header elem
`<header> <h1>Weboldal címe</h1> <nav> <ul> <li><a href="index.html">Főoldal</a></li> <li><a href="about.html">Rólunk</a></li> <li><a href="contact.html">Kapcsolat</a></li> </ul> </nav> </header>`

### Main - Fő tartalom

A `<main>` elem az oldal fő tartalmát jelöli. Oldalanként csak egy `<main>` elem lehet:

HTML - Main elem
`<main> <article> <h2>Cikk címe</h2> <p>A cikk tartalma...</p> </article> </main>`

### Footer - Lábléc szakasz

A `<footer>` elem az oldal vagy egy szakasz lábléc információit tartalmazza (copyright, linkek):

HTML - Footer elem
`<footer> <p>© 2025 Weboldal neve. Minden jog fenntartva.</p> <nav> <a href="privacy.html">Adatvédelem</a> <a href="terms.html">Felhasználási feltételek</a> </nav> </footer>`

## Teljes példa: Szemantikus HTML oldal BÓNUSZ

Íme egy komplett példa, amely egyesíti az összes eddig tanult elemet:

HTML - Teljes szemantikus oldal
`<!DOCTYPE html> <html lang="hu"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content="Modern HTML5 weboldal szemantikus elemekkel"> <title>Példa weboldal - HTML5 struktúra</title> <link rel="icon" type="image/png" href="favicon.png"> <link rel="stylesheet" href="style.css"> </head> <body> <header> <h1>Weboldal címe</h1> <nav> <ul> <li><a href="index.html">Főoldal</a></li> <li><a href="blog.html">Blog</a></li> <li><a href="contact.html">Kapcsolat</a></li> </ul> </nav> </header> <main> <article> <h2>Cikk címe</h2> <p>Ez egy bekezdés a cikkben. A szemantikus HTML segít a keresőmotoroknak és a böngészőknek megérteni az oldal struktúráját.</p> <p>További tartalom itt...</p> </article> <aside> <h3>Kapcsolódó tartalom</h3> <p>Oldalsó információk és hivatkozások.</p> </aside> </main> <footer> <p>© 2025 Weboldal neve. Minden jog fenntartva.</p> </footer> <script src="script.js"></script> </body> </html>`

## Összefoglalás

Ebben a cikkben megismerkedtél a HTML dokumentumok alapvető felépítésével:

- DOCTYPE, html, head, body: Az alapszerkezet kötelező elemei
- Meta elemek: charset, viewport, description, title
- Favicon: Az oldal ikonja
- Szemantikus HTML: header, main, footer elemek használata

A következő cikkben részletesebben megismerkedünk a szemantikus HTML elemekkel és azok szerepével az akadálymentességben és a SEO-ban.

#### Példák a weboldalunkon

Nézd meg, hogyan használjuk a HTML alapszerkezetet a gyakorlatban:

- Főoldal - Teljes HTML5 dokumentum szerkezet
- Processzor oldal - Metaadatok és SEO optimalizálás
- Kapcsolat oldal - Szemantikus elemek használata

#### Következő lépések

Gyakorold az itt tanultakat: hozz létre egy egyszerű HTML oldalt a fenti példa alapján, és nyisd meg egy böngészőben!

Következő cikk: Szöveges elemek HTML-ben - Ismerd meg a címsorokat (h1-h6), bekezdéseket, valamint a szemantikus és vizuális kiemelések közötti különbségeket. Tanuld meg a span elem használatát inline formázáshoz!