# HTML hibák, és javításuk

## Szintaktikai hibák

**Szintaktikai hibának** számít, ha a HTML dokumentum **forráskódja hibás**.

Ezt rendszerint nem vesszük észre, a hibák egy részének jelenléte nem okoz vizuális eltérést, vagy a böngészők sikeresen javítják a hibát az oldal betöltésénél.

A hibákat [HTML validátorral](https://validator.w3.org/), vagy fejlesztőeszközeink beépített [hibakeresőjével](https://marketplace.visualstudio.com/items?itemName=mkaufman.HTMLHint) tudjuk felderíteni.

### **Miért kell elkerülni a szintaktikai hibákat?**

Nem minden böngésző tudja kijavítani, egy kevésbé elterjedt böngészőben, amiben nem teszteltük jelentkezhet a hiba.

A fejlesztés későbbi fázisát akadályozza, eleve biztosabb mindent szabványosan felépíteni, hogy egy esetleges hiba miatt később ne ütközzünk nem várt akadályokba.

Akadályozza a keresőket az oldal feldolgozásában.

### **Jellemző hibák**

#### Kötelező elemek hiányoznak a dokumentumból.

Pédául nincs `!DOCTYPE`. Vagy hiányoznak az alapvető elemek: `html` `head` `body`.

{% hint style="info" %}
A dokumentum típus meghatározásának hiányában a böngésző pontos "tervrajz" nélkül próbálja összerakni a weboldalt, ez a **quirks mode**, ami egy erőforrás igényes működés, feleslegesen lassítja a felhasználó gépét.
{% endhint %}

{% hint style="info" %}
A modern böngészők hibajavító funkciói automatikusan létrehozzák `head` elemet, ha az nincs benne a HTML dokumentumban (a régebbi böngészők erre nem képesek).
{% endhint %}

#### Blokkos elem van [szövegközi](https://developer.mozilla.org/en-US/docs/Web/HTML/Inline_elements#Elements) elembe ágyazva.

```markup
<!-- Hibás: -->
<a href="#"><h1>Körtefa</h1></a>

<!-- Helyes: -->
<h1><a href="#">Körtefa</a></h1>
```

{% hint style="info" %}
A blokkos (block) és a szövegközi (inline) elemek megjelenítése nagyban eltér egymástól. A blokkos elemek 100%-ban kitöltik vízszintesen a böngésző ablakot, és maguk előtt, és után törést képeznek (mellettük nem lehet semmi). A szövegközi elemek úgy jelennek meg mint egy szó a folyóírásban, így ha szövegközi elembe ágyazunk blokkos elemet arra nincs egyértelmű és praktikus megjelenítési recept, így ezt a HTML szabványok tiltják.
{% endhint %}

#### Lezáró tag hiányzik, vagy a lezáró tag-ből hiányzik a "/".

```markup
<!-- Hibás: -->
<div>
    <p>Almafa
</div>

<!-- Helyes: -->
<div>
    <p>Almafa</p>
</div>
```

#### Elemek rosszul vannak egymásba ágyazva

```markup
<!-- Hibás: -->
<h1><span>Szilvafa</h1></span>

<!-- Helyes: -->
<h1><span>Szilvafa</span></h1>
```

**Kötelezően megadandó tulajdonságok hiányoznak a HTML elemekből.**

```markup
<!-- Hibás: -->
<img src="fa.jpg">

<!-- Helyes: -->
<img src="fa.jpg" alt="Virágos kőris, pompás lombkoronával">
```

[**Elavult elemek**](https://developer.mozilla.org/en-US/docs/Web/HTML/Element#Obsolete_and_deprecated_elements) **használata.**

```markup
<!-- Hibás: -->
<center>Középre igazított szöveg</center>

<!-- Hibás: -->
<blink>Villogó szöveg</blink>
```

{% hint style="info" %}
A HTML szabvány korai fejlődési szakaszában számos elem, és tulajdonság szolgált dekorációs, megjelenési célt, ma már szinte teljesen elszeparálódott a megjelenés a HTML-től, erre a célra a CSS szolgál, így egyes elemek elavulttá váltak. Lista az elavult elemekről: [MDN - ](https://developer.mozilla.org/en-US/docs/Web/HTML/Element#Obsolete_and_deprecated_elements)[Obsolete and deprecated elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Element#Obsolete_and_deprecated_elements)
{% endhint %}

## Szemantikai "hibák"

**Szemantikai hiba,** ha adott célra nem az annak megfelelő elemeket használjuk.

Például **szemantikus** jelentéstartalommal rendelkező elemek helyett jelentés, vagy szerepkör nélküli elemekből építkezünk.

Nem kapunk rá hibát a validátorban, viszont egyéb szempontokból tekintve nem optimális a megoldás.

### **Mik lehetnek ezek a szempontok?**

**SEO - Search Engine Optimalization**\
Legfontosabb a keresőprogramok megítélése, a szemantikus elemek megkönnyítik a tartalom feldolgozását a keresők számára, ezért honorálják a számukra könnyen olvasható tartalmakat.

**Usability - Akadálymentesítés**\
Szemantikus elemek könnyítik a tartalom gépi feldolgozását, így például a felolvasóprogramok is képesek értelmezni azt.

**Kód olvashatóság**\
Szemantikus elemekkel könnyebben olvasható a forráskód (tudjuk, minek mi a feladata), ami ebben a lényeges, hogy nem csak a szerző, de egy másik fejlesztő is érteni fogja az elemek szerepét.

### **Jellemző hibák**

#### Bekezdések helyett sortöréssel van tagolva a szöveg.

```markup
<!-- Hibás: -->
<p>Körtefa.
<br>
<br>
Almafa</p>

<!-- Helyes: -->
<p>Körtefa.</p>
<p>Almafa</p>
```

#### Lista elemek helyett sortörésekkel létrehozott lista.

```markup
<!-- Hibás: -->
<p>* Körtefa<br>
* Almafa<br>
* Barackfa<br>
* Narancsfa</p>
​
<!-- Helyes: -->
<ul>
    <li>Körtefa</li>
    <li>Almafa</li>
    <li>Barackfa</li>
    <li>Narancsfa</li>
</ul>
```

#### Nem szemantikus elemekkel létrehozott kiemelések a szövegben.

```markup
<!-- Hibás: -->
<p>Ez egy <b>fontos</b> szöveg.</p>
​
<!-- Helyes: -->
<p>Ez egy <strong>fontos</strong> szöveg.</p>
```

#### Címek nem cím elemekből felépítve, CSS-el cím szerűre formázva.

```markup
<!-- Hibás: -->
<div class="fo-cim">Ez a főcím</div>
​
<!-- Helyes: -->
<h1>Ez a főcím</h1>
```


---

# 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-hibak-es-javitasuk.md?ask=<question>
```

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.