Jeśli stawiasz pierwsze kroki w tworzeniu stron internetowych lub po prostu chcesz upewnić się, że stosujesz najlepsze praktyki, znajomość poprawnej struktury dokumentu HTML5 jest kluczowa. Zobaczmy, jak powinien wyglądać profesjonalnie przygotowany, podstawowy szkielet strony internetowej:
<!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">
<title>Tytuł strony widoczny w przeglądarce i wynikach wyszukiwania</title>
</head>
<body>
<header>
<!-- Tutaj umieść logo, menu nawigacyjne lub slogan -->
</header>
<section>
<h1>Nagłówek pierwszego stopnia (H1) – najważniejszy temat strony</h1>
<p>Tutaj zamieszczamy treść sekcji tematycznej, może to być tekst, obraz, film lub inne elementy multimedialne.</p>
</section>
<footer>
<!-- Informacje kontaktowe, linki do mediów społecznościowych, polityka prywatności -->
</footer>
</body>
</html>
Deklaracja typu dokumentu
Każdy dokument HTML5 musi rozpoczynać się od deklaracji typu dokumentu:
<!DOCTYPE html>Deklaracja ta informuje przeglądarkę, że ma do czynienia ze standardem HTML5. Warto zauważyć, że w porównaniu ze starszymi wersjami HTML, deklaracja ta została znacząco uproszczona.
Element <html>
Element ten obejmuje całą treść strony i pozwala określić podstawowe ustawienia językowe. Dla polskojęzycznej strony stosujemy:
<html lang="pl">Sekcja <head>
W tej części umieszczamy metadane strony, które nie są widoczne bezpośrednio na stronie, ale mają kluczowe znaczenie dla SEO oraz wyświetlania witryny w wyszukiwarkach. Podstawowe elementy sekcji <head> to:
-
<meta charset="utf-8">– określa kodowanie znaków, dzięki czemu strona poprawnie wyświetla m.in. polskie znaki. -
<meta name="description">– opis strony, który pojawia się w wynikach wyszukiwania. -
<meta name="keywords">– słowa kluczowe, wspierające optymalizację strony pod kątem SEO. -
<title>– tytuł widoczny na karcie przeglądarki oraz w wynikach wyszukiwania Google.
Sekcja <body> – treść strony
Zawiera właściwą treść, którą użytkownik widzi na stronie internetowej. HTML5 dostarcza wielu znaczników o charakterze semantycznym, pomagających tworzyć jasną i logiczną strukturę strony. Najważniejsze z nich to:
-
<header>– górna część strony, zazwyczaj zawiera menu, logo lub slogan. -
<section>– poszczególne sekcje tematyczne, pomagają uporządkować treść. -
<footer>– stopka strony, zawierająca najczęściej informacje kontaktowe, linki do polityki prywatności lub mediów społecznościowych.
Znaczenie nagłówka pierwszego stopnia <h1>
Znacznik <h1> jest wymagany i wskazuje główny temat strony. Każda profesjonalnie przygotowana strona powinna mieć dokładnie jeden nagłówek pierwszego stopnia, by zapewnić dobrą strukturę semantyczną oraz efektywne indeksowanie przez wyszukiwarki.