Znaczniki HTML odgrywają kluczową rolę w tworzeniu i organizowaniu struktury strony internetowej, lecz nie wszystkie z nich są wykorzystywane do jej definiowania. W tym artykule prezentuję, które elementy odpowiadają za strukturę dokumentu HTML, a które pełnią inne funkcje. Zamieszczam również szczegółowe przykłady zastosowań.
Znaczniki stosowane do definiowania struktury strony HTML
Do budowania struktury strony używa się znaczników strukturalnych oraz znaczników semantycznych. Przykłady:
<html>– obejmuje cały dokument HTML;<head>– zawiera metadane strony;<body>– obejmuje całą treść wyświetlaną użytkownikowi;<header>– nagłówek strony lub sekcji;<nav>– nawigacja;<main>– główna część dokumentu;<section>– sekcja tematyczna treści;<article>– niezależny artykuł, wpis, post;<aside>– poboczna treść, np. boczny panel;<footer>– stopka dokumentu lub sekcji.
Te znaczniki organizują treść w logiczną całość oraz poprawiają dostępność i SEO.
Znaczniki, które nie są stosowane do definiowania struktury strony HTML
W praktyce występuje wiele znaczników, których podstawową rolą nie jest tworzenie struktury, lecz inne zadania – na przykład formatowanie tekstu, wstawianie obrazów, łączenie z innymi plikami czy interakcje z użytkownikiem.
Przykłady znaczników niestrukturalnych
-
<span>– stosowany do grupowania fragmentów tekstu w celu ich stylowania lub manipulowania skryptami. Nie wnosi żadnej struktury ani znaczenia semantycznego;
Przykład –<p>To jest <span style="color: red;">ważna</span> informacja.</p> -
<b>,<i>,<u>,<strong>,<em>– te znaczniki odpowiadają za wygląd i podkreślanie fragmentów tekstu (pogrubienie, kursywa, podkreślenie, nacisk), ale nie tworzą żadnej struktury strony;
Przykład –<p>Tutaj <b>ważne</b> słowo i <i>wyróżnienie</i>.</p> -
<img>– wstawia obrazy, nie ma wpływu na podział logiczny dokumentu;
Przykład –<img src="logo.png" alt="Logo firmy"> -
<a>– tworzy hiperłącza, nie organizuje treści w sekcje;
Przykład –<a href="kontakt.html">Kontakt</a> -
<form>,<input>,<button>,<textarea>– dotyczą formularzy i interakcji z użytkownikiem, nie struktury;
Przykład –<form> <input type="text" name="imie"> <button>Wyślij</button> </form> -
<div>– chociaż służy do grupowania elementów, to sam w sobie nie dodaje struktury semantycznej (nie określa roli czy znaczenia fragmentu dokumentu). Używany jest głównie do celów stylizacyjnych lub jako element kontenerowy, gdy nie jest dostępny odpowiedni znacznik semantyczny;
Przykład –<div class="panel-boczny">Treść panelu</div> <script>,<style>– służą do osadzania kodu JavaScript i CSS, nie mają wpływu na strukturę dokumentu.
Podsumowanie i praktyczne wskazówki
Znaczniki niestrukturalne – takie jak <span>, <b>, <i>, <img>, <a>, <form>, <div> (w sensie braku semantyki), <script> czy <style> – nie są stosowane do budowy logicznej czy semantycznej struktury strony. Pełnią inne, wyspecjalizowane funkcje i mogą być używane w środku sekcji strukturalnych w celu wzbogacenia treści albo zapewnienia interaktywności, jednak nie organizują dokumentu na poziomie bloków czy sekcji.
Dla lepszej czytelności, zgodności ze standardami oraz optymalizacji SEO zaleca się wykorzystywanie właściwych znaczników strukturalnych, a niesemantycznych używać tylko wtedy, gdy nie da się użyć innego, bardziej adekwatnego elementu. To zwiększy przejrzystość kodu i ułatwi jego dalszą rozbudowę oraz utrzymanie.
Opis przedstawiony na podstawie zasad stosowania znaczników HTML, uwzględniających rozróżnienie między rolą strukturalną a prezentacyjną oraz znaczenie dla dostępności i SEO.
