# HTML elemek
## Gyökérelem
A `html` elem az összes többi elem szülője. Ebbe kerül az oldal teljes tartalma.
```markup
```
Jellemző, hogy az oldalak nyelvét a `html` elemen a `lang` (nyelv) tulajdonsággal határozhatjuk meg.
```markup
```
## HTML dokumentum fejléce
A `head` a dokumentum fejléce, a dokumentum **metaadatait**, és egyéb állományokra való hivatkozásokat tartalmaz, ezeket **nem jeleníti meg a böngésző vizuálisan** (jellemzően ezek általános információk, amit a böngésző program, internetes keresők dolgoznak fel).
```markup
...
```
A `head` elemet közvetlenül a `html` elemben kell elhelyezni.
## HTML elemek a fejlécben
### **Az oldal címe**
A `title` elemben megadott szöveg azonosítja a HTML dokumentumot, és ez jelenik meg a böngészőablak címsorában. Kötelezően szerepelnie kell a `head` elemben.
```markup
Az oldal címe
```
{% hint style="info" %}
A `title` fontos azonosítója az adott oldalnak, az internetes keresők ezt jelenítik meg kiemelve a találati listájukban. Ha lementünk a böngészőnkbe, vagy a számítógépünkre egy weboldal linket, a `title` alapján jön létre a mentett link neve.
{% endhint %}
### **Az oldal meta adatai**
A `meta` elemben helyezhetünk el információkat a weboldalunkról (ez nem jelenik meg a látható tartalomban). A `meta` elemeknek egy `name` (név) és egy `content` (tartalom) tulajdonsága van. A `name` határozza meg a **meta** információ típusát, a `content` pedig a hozzá rendelt információt.
```markup
```
Kivétel a `charset` amivel az oldal karakter kódolását határozhatjuk meg, ez csak egy `charset` tulajdonsággal rendelkezik.
```markup
```
**Példák meta információra:**
| meta `name` | Leírás |
| ------------- | --------------------------------------------------------- |
| `description` | Rövid leírás az oldalról |
| `keywords` | Az oldalhoz kapcsolódó kulcsszavak |
| `author` | Az oldal szerzője |
| `viewport` | Utasítás a böngészőnek az oldal megjelenítésének módjáról |
```markup
```
### **Linkek**
A `link` elemmel hivatkozhatunk külső állományokra, ezek egy részét be fogja tölteni a böngésző. A `link` elemmel köthetünk be például egy CSS állományt a dokumentumunkba.
```markup
```
### Stílus
A `style` elemben a HTML dokumentum megjelenését szabályozó [CSS](/digitalis-kiadvanyok/css/mi-a-css.md) stílusokat helyezhetünk el. A `style` nyitó és záró eleme által közrefogott részen a [CSS nyelv szabályai](/digitalis-kiadvanyok/css/css-stilusok-felepitese.md) érvényesek.
```markup
```
## HTML dokumentum törzse
A `body` a dokumentum törzse, ezt jeleníti meg a böngésző vizuálisan, ennek az elemnek a gyermeke az összes böngészőben megjelenő elem. A `body` elemet közvetlenül a `html` elemben a `head` elem után kell elhelyezni.
```markup
...
...
```
## Szöveges elemek
### **Címek**
A HTML dokumentum tartalmát 6 cím mélységig lehet fejezetekre, alfejezetekre bontani, ezt a `h1` `h2` `h3` `h4` `h5` `h6` elemekkel tehetjük meg.
```markup
1-es cím
2-es cím
3-as cím
4-es cím
5-ös cím
6-os cím
```
### **Bekezdések**
Az oldal szöveges tartalmát bekezdésekben `p` helyezhetjük el.
```markup
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Praesent et ligula magna.
Aliquam vestibulum fringilla tincidunt.
Etiam in leo mi. Nunc magna quam,
consectetur eget elit in, cursus lacinia
justo. Aenean condimentum suscipit lectus
sit amet pharetra. Maecenas varius ac
libero nec varius. Praesent aliquam
tincidunt tortor, nec imperdiet nisi
pharetra a.
```
### **Listák**
Két típusát különböztetjük meg, számozott lista `ol`, és pontozott lista `ul`, mindkettőnek gyermekei a lista elemek `li`.
#### **Számozott lista:**
```markup
Ez egy lista elem
Ez is egy lista elem
És ez is
```
#### **Pontozott lista:**
```markup
Ez egy lista elem
Ez is egy lista elem
És ez is
```
A listákat egymásba is lehet ágyazni, így lehet több szintű listákat létrehozni.
```markup
Ez egy lista elem
Ez is egy lista elem
És ez is, de ennek vannak gyermekei
Ez egy lista elem
Ez is egy lista elem
És ez is
```
{% hint style="info" %}
[ Kódpélda](https://codepen.io/_lacus/pen/qPXBjQ)
{% endhint %}
## Képek
Képeket a HTML dokumentumba az `img` (kép) elem segítségével tudunk beilleszteni. Két *kötelező* tulajdonsága van, az `src` (forrás), ami a behivatkozott kép elérési útvonala, és az `alt` (alternatív szöveg), a kép tartalmának szöveges leirata.
```markup
```
Ha a képünk csak dekorációs célokat szolgál, és nem kapcsolódik szorosan a dokumentum szöveges tartalmához, akkor is kötelező az `alt` tulajdonság, de üresen hagyhatjuk az értékét.
```markup
```
A képeket a böngésző megpróbálja eredeti méretükben megjeleníteni, amennyiben a megfelelő ablakméret rendelkezésre áll. A `width` (szélesség) és a `height` (magasság) tulajdonságokkal ezt felülbírálhatjuk. Ha csak az egyik értéket adjuk meg a böngésző az oldalarányok megtartásával számolja ki a másikat. Az értékek pixelben értendőek.
```markup
```
{% hint style="warning" %}
Fontos kitölteni a képek alternatív leírását, mert ha a kép nem tud betöltődni ez a szöveg fog megjelenni a felhasználóknak, illetve a gyengén látó felhasználók csak ezt "látják", ezt olvassa fel nekik a szövegfelolvasó programjuk. Az internetes keresők (a szövegkörnyezet mellett) az `alt` tulajdonság alapján kategorizálják be a honlapokon található képeket (ennek hiányában nem fog megjelenni a kép a képkeresőkben).
{% endhint %}
## Szövegközi elemek
A HTML elemekben lévő szöveget szövegközi (inline) elemekkel módosíthatjuk. A szövegközi elemek teljes szöveges blokkok, vagy szövegrészletek megjelenését, viselkedését módosítják.
```markup
A Web alapelveit Tim Berners-Lee, a
CERN részecskefizikai kutatóközpont munkatársa dolgozta ki
1989-ben. Eredeti célja a különböző intézményekben világszerte
dolgozó kutatók közötti automatizált információmegosztás
volt.
```
A fenti példakódban a bekezdés egyes szakaszai fontosként (\), vagy hangsúlyosként (\) vannak megjelölve.
{% hint style="warning" %}
E helyen fontos megjegyezni a szövegközi elemekkel kapcsolatos korlátozást, hogy **szövegközi** (inline) elemben nem lehet elhelyezni **blokkos** (block) elemet, az elemek e módon történő [egymásba ágyazása](/digitalis-kiadvanyok/html/html-allomany-felepitese.md#html-cimkek-tag) nem szabványos. Például egy `b` elembe nem kerülhet bekezdés elem (`p`). Ennek a fejezetnek a végén az itt felsorolt [elemek listájában](/digitalis-kiadvanyok/html/html-elemek.md#felsorolt-elemek-listaja) megtaláljuk, hogy mely elemek rendelkeznek blokkos, vagy szövegközi megjelenítési móddal.
{% endhint %}
| elem | leírás |
| -------- | ----------------------------------------------------- |
| `b` | Vastagon szedett szöveg, szemantikus jelentése nincs. |
| `strong` | Fontos szövegrészlet, vastagon jelenik meg. |
| `i` | Dőlt betűs szöveg, szemantikus jelentése nincs. |
| `em` | Hangsúlyos szöveg, dőlt betűvel jelenik meg. |
| `mark` | Megjelölt szöveg, sárga háttérrel jelenik meg |
```markup
Vastagon szedett szöveg Fontos szöveg Dőlt betűs szöveg Hangsúlyos szöveg
Kiemelt szöveg
```
| **elem** | leírás |
| -------- | -------------------------------------------------------- |
| `small` | Csökkenti a font méretet. |
| `time` | Időt, dátumot jeleníthetünk meg vele. |
| `sup` | Felső index, megemeli a szöveget |
| `sub` | Alsó index, lesüllyeszti a szöveget |
| `s` | Elavult információt jelöl, vonallal áthúzva jelenik meg. |
```markup
Kis méretű szöveg
E=mc2
H2O Elavult imformáció
```
{% hint style="info" %}
Egyes szövegközi elemek csak vizuális hatást érnek el, egyes elemek jelentésbeni külömbséget is hordoznak. Például a `strong` elemben található szöveget nagyobb súllyal veszi figyelembe a Google kereső, vagy az `em` elemben lévő szöveget más hangsúllyal ejtik ki a szövegfelolvasó programok. Ezek az elemek elsősorban a webalkalmazás szövegét feldolgozó programoknak szolgáltatnak fontos információkat.
{% endhint %}
{% hint style="info" %}
[Kódpélda](https://codepen.io/_lacus/pen/aLyybM)
{% endhint %}
### Hiperlink
A hiperlinkek, vagy linkek kattinthatóvá teszik a bennük foglalt szöveget. Linket az `a` elemmel lehet létrehozni. Van egy kötelező tulajdonsága a `href` ami azt a címet tartalmazza, amit a böngésző be fog tölteni kattintás esetén. Ez a cím lehet egy másik HTML dokumentum vagy egyéb állomány, internetes cím (URL), vagy e-mail cím.
```markup
Ebben a szövegben egy szó kattintható,
rákattintva a böngésző betölt egy másik HTML dokumentumot.
```
A linkek módosítják a szöveg megjelenését is, a böngésző kék szövegszínnel, és aláhúzva jeleníti meg a kattintható szöveget, így könnyű a linkeket felismerni.
### Span
Van egy szövegközi elem, ami nem hordoz jelentéstartalmat, és nem módosítja a bele foglalt szöveget vizuálisan, ez a `span` elem (szabad fordításban dirib-darab).
```markup
Ebben a szövegben van egy szakasz, aminek
nem módosul a kinézete, és a szemantikai jelentése
```
{% hint style="info" %}
Felmerül a kérdés, hogy mi az értelme egy elemnek, ami nem ad jelentést konteksztustól függően, és megjelenésben sem okoz érzékelhető változást. Több okból is előnyös lehet: segíti a dokumentum tartalmának strukturálását, illetve CSS segítségével módosíthatjuk a megjelenését.
{% endhint %}
## Dekorációs elemek
### **Sortörés**
A `br` (sortörés) elem új sorba töri a szöveget, amiben elhelyezzük, úgy hogy a `br` elem után következő szöveg már új sorba törik.
```markup
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Donec facilisis sit amet nisi nec mattis.
```
### **Vízszintes vonal**
A `hr` (vízszintes vonal) elem egy vízszintes vonalat hoz létre. Célja a tartalom tagolása.
```markup
```
## Strukturális elemek
### **Általános konténer elem**
A `div` (csoport, rész) elemmel hozhatunk létre általános gyűjtőelemeket, úgynevezett konténereket. A `div` nem hordoz semmilyen jelentéstartalmat, és a megjelenése is teljesen semleges, hasonlóan a korábban tárgyalt `span` elemhez, csak amíg a `span` szövegközi elem, addig a `div` blokkos elem.
Ezzel az elemmel foghatunk össze egy csoportba több elemet (ha úgy tetszik részekre bonthatjuk `div` elemekkel egy oldal tartalmát). A `div`-ekben bármilyen *tartalom típusú* elemet elhelyezhetünk, például címeket, szöveget, listákat, képet, linket, más `div`-eket, vagy egyéb strukturális elemeket.
```markup
```
### **A div szemantikus variációi**
A HTML korábbi verzióiban a `div` elemet ruháztuk fel szerepekkel a `role` (szerep) tulajdonság segítségével, ez a lehetőség most is megvan, de megjelentek a HTML5-ben új elemek amik kiváltják ezt az igényt.
#### Navigáció
A `nav` elem kifejezetten egy weboldalon belüli (aloldalak közötti) navigációra szolgál, így [linkeket](/digitalis-kiadvanyok/html/html-elemek.md#linkek) helyezhetünk el benne.
```markup
```
Bonyolultabb navigáció, például egy weboldal főmenüje esetében a [linkeket](/digitalis-kiadvanyok/html/html-elemek.md#linkek) [lista elemekben](/digitalis-kiadvanyok/html/html-elemek.md#listak) csoportosíthatjuk a `nav` elemen belül.
```markup
```
A menü linkek [listába](/digitalis-kiadvanyok/html/html-elemek.md#listak) helyezése lehetővé teszi több szintű almenü struktúra létrehozását.
```markup
```
#### Fejléc elem
A `header` elem használható egy weboldal fejléceként (ebbe kerül például az oldal logója, főmenüje), vagy kisebb tartalmi egységek fejléceként is szolgálhat. Nem összekeverendő a [`head`](/digitalis-kiadvanyok/html/html-elemek.md#html-dokumentum-fejlece) elemmel!
#### Fő tartalmi egység
A `main` elembe kerül a lényegi tartalom egy oldalon, minden ami nem a tartalommal közvetlenül kapcsolatos (például [navigáció](/digitalis-kiadvanyok/html/html-elemek.md#navigacio)), az ezen az elemen kívül helyezendő el. Egy **HTML** dokumentumban csak egy `main` elem helyezhető el.
#### **Másodlagos tartalom**
Másodlagos, a fő tartalomhoz csak kapcsolódó tartalmaz az `aside` elemben helyezhetünk el. Jellemző, hogy a weboldalak oldalsávjait (sidebar) `aside` elemekből építjük.
#### **Lábléc elem**
A `footer` elem a `header` elem párja, értelemszerűen vizuálisan a dokumentum (vagy a dokumentum egy alegységének) alján alkalmazandó.
#### **Szekció**
Egy nagyobb szerkezeti egységet tagolhatunk a `section` elemekkel kisebb egységekre.
#### **Cikk**
Az `article` egy nagyobb *összefüggő* szöveges tartalmi egység. Egy ilyen tartalmi egység lehet egy blogbejegyzés, hír, recept, fórum hozzászólás, közlemény... Egy HTML dokumentumban több `article` is lehet.
## Űrlapok
### **Az űrlap elem**
Űrlapokat a `form` elemmel hozhatunk létre, az összes kitölthető űrlap mező (pár kivételtől eltekintve) ebben az elemben helyezendő el. A `form` elem képes a tartalmát elküldeni a webszervernek.
```markup
```
### **A beviteli elem**
Az űrlap mezőit az `input` (beviteli mező) elemmel hozhatjuk létre. Az `input` elem viselkedését, kinézetét meghatározza a `type` (típus) tulajdonsága.
```markup
```
```markup
```
### **Címke elem**
Az űrlap beviteli mezőit a `label` elem látja el feliratokkal. A `label` elem `for` tulajdonságában megadott egyedi azonosító összeköti a `label`-t az azonosítóval ellátott beviteli mezővel. Ekkor ha a címkére kattintunk, a kurzor automatikusan beáll a beviteli mezőbe.
```markup
```
Ez a kötés létrejön akkor is, ha a beviteli mező a `label` gyermeke:
```markup
```
### **Szövegdoboz**
A `textarea` hasonló a szöveges beviteli mezőhöz, csak ez egy több soros, és átméretezhető beviteli eszköz.
A `rows` és `cols` (sorok és oszlopok) tulajdonságaival meghatározhatjuk a kiinduló méretét is.
```markup
```
### **Lenyíló lista**
A `select` elem `option` elemeket tartalmaz, ezek a lenyíló lista választható opciói.\
Az `option` elemek közül az lesz az alapértelmezett, amelyik rendelkezik a kiválasztott (selected) tulajdonsággal.
```markup
```
## Táblázatok
### **Táblázat**
A `table` elem a táblázat szülőeleme, a sorokat a `tr` elemek képzik, az oszlopokat, vagy cellákat a `td` elemek.
```markup
Első sor, első oszlop
Első sor, második oszlop
Első sor, harmadik oszlop
Második sor, első oszlop
Második sor, második oszlop
Második sor, harmadik oszlop
```
Minden sorban egyező számú oszlopot kell elhelyezni.
### **Táblázat fejléc**
Táblázat cella helyett lehet táblázat fejléc cellát alkalmazni, ez a `th` elem. A táblázat fejléc cellában lévő tartalom vizuálisan hangsúlyosabban jelenik meg.
```markup
Fejléc
Fejléc
Fejléc
Cella
Cella
Cella
Fejléc
Cella
Cella
Fejléc
Cella
Cella
```
{% hint style="info" %}
**Elavult elemek**\
\
Az idők során az újabb és újabb HTML verziókban számos korábbi elem került kivezetésre. Jellemzően ennek az oka, hogy a JavaScript, és a CSS átvett bizonyos HTML funkciókat, például a `center` elem korábban középre rendezte a szöveget, ezt mostmár CSS segítségével végezzük el, hasonló a `frame` vagy keret, amivel görgethető felületeket lehetett kialakítani az oldalakon.\
\
Példák elavult elemekre: `acronim`, `applet`, `basefont`, `big`, `center`, `dir`, `font`, `frame`, `frameset`, `isindex`, `layer`, `menu`
{% endhint %}
## Felsorolt elemek listája
| Elem | Hosszú név | Megjelenítési mód |
| ----------------------------- | ----------------- | ----------------- |
| `html` | Root element | block |
| `head` | Document header | none |
| `title` | Title | none |
| `meta` | Metadata | none |
| `link` | Link | none |
| `style` | Style information | none |
| `body` | Document body | block |
| `h1` `h2` `h3` `h4` `h5` `h6` | Heading | block |
| `p` | Paragraph | block |
| `ul` | Unordered list | block |
| `ol` | Ordered list | block |
| `li` | List item | list-item |
| `a` | Hiperlink | inline |
| `img` | Image | inline |
| `b` | Bold | inline |
| `strong` | Strong | inline |
| `i` | Italic | inline |
| `em` | Emphasis | inline |
| `small` | Small text | inline |
| `time` | Time | inline |
| `sup` | Superscript | inline |
| `sub` | Subscript | inline |
| `s` | Strikethrough | inline |
| `span` | Span | inline |
| `br` | Break line | inline |
| `hr` | Horisontal line | block |
| `div` | Division | block |
| `nav` | Navigation | block |
| `header` | Header | block |
| `main` | Main content | block |
| `aside` | Aside | block |
| `footer` | Footer | block |
| `section` | Section | block |
| `article` | Article | block |
| `form` | Form | block |
| `input` | Input field | inline-block |
| `textarea` | Text area | inline-block |
| `button` | Button | inline-block |
| `label` | Label | inline |
| `table` | Table | table |
| `tr` | Table row | table-row |
| `td` | Table cell | table-cell |
| `th` | Table cell header | table-cell |
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://digikiad.gitbook.io/digitalis-kiadvanyok/html/html-elemek.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
```
Ha a képünk csak dekorációs célokat szolgál, és nem kapcsolódik szorosan a dokumentum szöveges tartalmához, akkor is kötelező az `alt` tulajdonság, de üresen hagyhatjuk az értékét.
```markup
```
A képeket a böngésző megpróbálja eredeti méretükben megjeleníteni, amennyiben a megfelelő ablakméret rendelkezésre áll. A `width` (szélesség) és a `height` (magasság) tulajdonságokkal ezt felülbírálhatjuk. Ha csak az egyik értéket adjuk meg a böngésző az oldalarányok megtartásával számolja ki a másikat. Az értékek pixelben értendőek.
```markup
```
{% hint style="warning" %}
Fontos kitölteni a képek alternatív leírását, mert ha a kép nem tud betöltődni ez a szöveg fog megjelenni a felhasználóknak, illetve a gyengén látó felhasználók csak ezt "látják", ezt olvassa fel nekik a szövegfelolvasó programjuk. Az internetes keresők (a szövegkörnyezet mellett) az `alt` tulajdonság alapján kategorizálják be a honlapokon található képeket (ennek hiányában nem fog megjelenni a kép a képkeresőkben).
{% endhint %}
## Szövegközi elemek
A HTML elemekben lévő szöveget szövegközi (inline) elemekkel módosíthatjuk. A szövegközi elemek teljes szöveges blokkok, vagy szövegrészletek megjelenését, viselkedését módosítják.
```markup