Szkielet strony HTML stanowi podstawową strukturę każdego dokumentu HTML i określa, jak przeglądarka powinna wyświetlać zawartość strony. Poprawnie zbudowany szkielet jest fundamentem pod rozwój nawet najbardziej zaawansowanych witryn.
Kluczowe elementy szkieletu HTML
Każda strona HTML powinna zawierać następujące elementy:
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="utf-8">
<meta name="description" content="Krótki, atrakcyjny opis treści strony">
<meta name="keywords" content="słowa kluczowe, oddzielone, przecinkami">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tytuł strony widoczny w przeglądarce i wynikach wyszukiwania</title>
<!-- Linki do arkuszy stylów CSS lub skryptów JS -->
</head>
<body>
<header>
<!-- Logo, menu nawigacyjne lub slogan -->
</header>
<nav>
<!-- Menu strony lub nawigacja -->
</nav>
<main>
<section>
<h1>Nagłówek pierwszego stopnia (H1)</h1>
<p>Główna treść tej sekcji — tekst, obrazy, multimedia.</p>
</section>
<!-- Dodatkowe sekcje strony -->
</main>
<footer>
<!-- Informacje kontaktowe, linki do mediów społecznościowych, polityka prywatności -->
</footer>
</body>
</html>
Opis i funkcja poszczególnych elementów
- <!DOCTYPE html> – deklaracja typu dokumentu, która informuje przeglądarkę, że dokument jest napisany w HTML5;
- <html lang=”pl”> – otwiera główny element strony i ustawia język dokumentu (w tym przypadku polski);
- <head> – sekcja niewidoczna dla użytkownika, zawiera:
- <meta charset=”utf-8″> – ustawia kodowanie znaków, aby poprawnie wyświetlać np. polskie znaki;
- <meta name=”viewport”> – umożliwia responsywność (dostosowanie strony do urządzeń mobilnych);
- <title> – tytuł strony, pojawia się na karcie przeglądarki;
- <meta name=”description”> i <meta name=”keywords”> – opis oraz słowa kluczowe strony, istotne pod kątem SEO;
- <link> lub <script> – odwołania do arkuszy styli CSS lub skryptów JavaScript;
- <body> – główna część dokumentu, widoczna dla użytkownika:
- <header> – górna sekcja strony, zawiera zwykle logo i menu główne;
- <nav> – nawigacja po stronie, menu odsyłające do innych podstron lub sekcji;
- <main> – główna zawartość strony, zgodna z wymaganiami SEO;
- <section> – wydzielone sekcje tematyczne. Ułatwiają porządkowanie większych stron;
- <footer> – stopka, często zawiera dane kontaktowe, linki do polityki prywatności.
Przykłady praktycznych zastosowań
- Strona wizytówka – w nagłówku można umieścić nazwę firmy i logo, sekcja
navposłuży do przejścia między sekcjami typu „O nas”, „Oferta”, „Kontakt”, główna sekcja (np.main > section) zawiera opis usług, a stopka istotne dane kontaktowe; - Blog lub portal informacyjny – w sekcji
headerznajdzie się logo oraz pasek wyszukiwania, nawigacja prowadzi do kategorii wpisów, każdy artykuł to osobna sekcja, w stopce umieszczony jest np. newsletter i linki do social media; - Sklep internetowy –
headeroraznavodpowiadają za koszyk, kategorie produktów i logowanie,mainprezentuje produkty w różnych sekcjach tematycznych, stopka zawiera informacje o dostawie, regulamin i kontakt.
Najczęstsze dobre praktyki
- Zawsze deklaruj kodowanie znaków (najlepiej
UTF-8), by zapewnić poprawne wyświetlanie wszystkich znaków, - używaj semantycznych znaczników takich jak
<header>,<nav>,<main>,<section>,<footer>, by poprawić dostępność strony i SEO, - dodaj deklarację viewport, jeśli planujesz, by strona była responsywna,
- porządkuj i komentuj kod, ułatwi to rozwój projektu w przyszłości.
Prawidłowy szkielet HTML jest niezbędny dla działania, bezpieczeństwa, pozycjonowania i rozwoju każdej strony internetowej. Rozumienie i stosowanie semantycznych znaczników od samego początku to najlepsza inwestycja w przyszłość witryny.
