Znaczniki, które nie służą do definiowania struktury strony HTML, to przede wszystkim znaczniki prezentacyjne oraz znaczniki do osadzania treści lub formatowania zawartości, np. <b>, <i>, <span>, <img>, <a>, <br>, <hr>, <strong>, <em>, <mark>. Poniżej znajdziesz szczegółowy poradnik wyjaśniający ich rolę oraz przykłady użycia, aby jasno odróżnić je od znaczników strukturalnych.
1. Czym są znaczniki strukturalne HTML?
Znaczniki strukturalne budują logiczną strukturę strony internetowej i pomagają przeglądarkom oraz narzędziom wspomagającym zrozumieć układ i hierarchię treści. Typowe przykłady to:
- <header>;
- <footer>;
- <nav>;
- <main>;
- <section>;
- <article>;
- <aside>;
- <html>, <head>, <body> – zastosowanie takich znaczników ułatwia nie tylko edycję strony, ale także jej optymalizację pod kątem SEO i dostępności dla osób korzystających z czytników ekranu.
Przykład:
<body>
<header>
<h1>Witamy na stronie!</h1>
</header>
<main>
<section>
<article>
<h2>Ważna treść</h2>
<p>Opis artykułu...</p>
</article>
</section>
<aside>
<p>Linki dodatkowe</p>
</aside>
</main>
<footer>
<p>Copyright © 2025</p>
</footer>
</body>
2. Które znaczniki nie służą do definiowania struktury strony?
Znaczniki z poniższej grupy nie budują logicznej struktury dokumentu, a jedynie służą do wyświetlania, wstawiania elementów lub formatowania tekstu:
a) Znaczniki prezentacyjne (formatowania tekstu)
- <b> – pogrubienie tekstu, bez wskazania ważności;
- <i> – tekst kursywą, bez dodatkowego znaczenia;
- <u> – podkreślenie.
Przykład:
<p>To jest <b>ważne</b> słowo, ale to tylko pogrubienie.</p>
b) Znaczniki logiczne tekstu
- <strong> – mocne podkreślenie ważności;
- <em> – tekst emfatyczny (nacisk), wyświetlany kursywą;
- <mark> – podświetlenie fragmentu tekstu.
Przykład:
<p><strong>Uwaga!</strong> Zamkniemy sklep wcześniej.</p>
c) Znaczniki liniowe (inline)
- <span> – uniwersalny pojemnik do stylowania, nie niesie znaczenia semantycznego;
- <a> – link (hiperłącze).
Przykład:
<p>Produkt: <span class="nowy-produkt">Nowość</span></p>
d) Znaczniki do osadzania i łamania linii
- <img> – wstawianie obrazu;
- <br> – wymusza przejście do nowej linii;
- <hr> – wstawia poziomą linię oddzielającą.
Przykład:
<p>Linia górna<hr>Linia dolna</p>
3. Różnica – znaczniki strukturalne vs. znaczniki prezentacyjne – tabela porównawcza
| Znaczniki strukturalne | Znaczniki niestrukturalne (prezentacyjne, wstawiające, formatowanie) |
|---|---|
<header>, <footer> |
<b>, <i>, <span>, <img>, <a>, <br>, <hr>, <strong> |
<nav>, <main> |
<em>, <mark>, <u> |
<section>, <article> |
|
<aside> |
4. Dlaczego ważne jest rozróżnienie tych znaczników?
- Struktura strony budowana jest wyłącznie przez znaczniki strukturalne – to one określają główne sekcje, nagłówki i hierarchię treści;
- Znaczniki niestrukturalne (prezentacyjne, formatowania, osadzające) wpływają tylko na wygląd lub zachowanie elementów, nie wnosząc dodatkowej informacji o układzie strony.
Kiedy nie używać znaczników prezentacyjnych do budowy struktury?
Nie powinno się tworzyć układu strony wyłącznie przez np. <b> czy <span>. Zadbaj, by podział na podstrony, sekcje czy działy odbywał się wyłącznie za pomocą znaczników strukturalnych.
Podsumowanie praktyczne – jeśli budujesz strukturę strony HTML, sięgaj po znaczniki takie jak <header>, <nav>, <main>, <section>, <article>, <aside>, <footer>, <html>, <body>. Do stylowania tekstu, wstawiania obrazków czy linków używaj tylko niestrukturalnych znaczników, takich jak <b>, <i>, <span>, <img>, <a>, <br>, <hr>, <strong>, <em>, <mark>. To rozróżnienie zagwarantuje prawidłowe działanie strony i jej zgodność ze standardami HTML.
