Zagnieżdżanie znaczników HTML

Zagnieżdżanie znaczników HTML

Zagnieżdżanie znaczników HTML oznacza umieszczanie jednego elementu wewnątrz drugiego. Podstawowa zasada jest prosta: znacznik otwarty jako ostatni musi zostać zamknięty jako pierwszy. Działa to podobnie jak nawiasy w matematyce.

Poprawne zagnieżdżenie

<p>To jest <b>bardzo <i>ważny</i></b> tekst.</p>

Kolejność jest prawidłowa:

1. otwarto <b>,
2. otwarto <i>,
3. zamknięto </i>,
4. zamknięto </b>.

Błędne zagnieżdżenie

<p>To jest <b>bardzo <i>ważny</b></i> tekst.</p>

Tutaj występuje błąd, ponieważ znacznik <i> został otwarty wewnątrz <b>, więc powinien zostać zamknięty przed </b>. Poprawnie powinno być:

<p>To jest <b>bardzo <i>ważny</i></b> tekst.</p>

Przykład z pytania egzaminacyjnego

Fragment:

<b>ang.<i>Cascading Style Sheets</b></i>

jest niepoprawny, ponieważ </b> zamyka element <b>, zanim zostanie zamknięty wewnętrzny element <i>. Poprawna wersja:

<b>ang.<i>Cascading Style Sheets</i></b>

Dlaczego to ważne?

Niepoprawne zagnieżdżenie może powodować:

• błędy walidacji HTML,
• nieprzewidywalne formatowanie tekstu,
• problemy z interpretacją kodu przez przeglądarkę,
• gorszą dostępność strony.

Na egzaminie INF.03 warto zawsze sprawdzać kolejność otwierania i zamykania znaczników.