Podstawowy szkielet dokumentu HTML
Deklaracja typu dokumentu (DOCTYPE)
Pierwszą linijką w pliku HTML powinna być deklaracja typu dokumentu, np.:
<!DOCTYPE html>To nie jest tag HTML sensu stricte — informuje przeglądarkę, że dokument jest w standardzie HTML5 i pozwala pracować w trybie standardowym.
Element <html>
Po deklaracji DOCTYPE następuje główny element <html>, który obejmuje całą zawartość strony. Zwykle dodajemy atrybut lang, np.:
<html lang="pl">Informacja o języku pomaga wyszukiwarkom i czytnikom ekranu poprawnie interpretować treść.
Sekcje: <head> i <body>
Wewnątrz elementu <html> znajdują się dwie główne sekcje:
-
<head> — zawiera meta‑informacje, które nie są bezpośrednio wyświetlane jako treść. W
<head>umieszczamy m.in.:<title>— tytuł strony widoczny na karcie przeglądarki,<meta charset="UTF-8">— deklaracja kodowania znaków (np. UTF‑8),- inne metadane (opis, słowa kluczowe,
meta viewportdla responsywności), - linki do zewnętrznych plików, np.
<link rel="stylesheet" href="style.css">.
- <body> — zawiera właściwą treść strony widoczną dla użytkownika: nagłówki, akapity, obrazy, linki, listy itp.
Podstawowe tagi używane w sekcji <body>
Nagłówki
HTML udostępnia sześć poziomów nagłówków: <h1> (najważniejszy) do <h6> (najmniej ważny). Nagłówki służą do dzielenia treści na sekcje i podsekcje.
Akapity
Znacznik <p> oznacza akapit. Przeglądarka wyświetla każdy akapit jako oddzielny blok tekstu z domyślnymi odstępami.
Linia pozioma
Tag <hr> wstawia poziomą linię przerywnikową. W HTML5 jest to element samozamykający.
Komentarze
W kodzie HTML możemy dodawać komentarze, które nie będą widoczne na stronie. Składnia:
<!-- To jest komentarz, którego nie zobaczy użytkownik -->Pamiętaj, żeby nie przechowywać w komentarzach wrażliwych informacji — każdy może podejrzeć kod źródłowy.
Formatowanie tekstu (wybrane znaczniki)
- <strong> — semantyczne pogrubienie (oznacza ważność fragmentu),
- <em> — semantyczne pochylenie (zaznaczenie emfatyczne),
<b>i<i>— należą do wariantów czysto prezentacyjnych (bez semantyki),<u>— podkreślenie (stosować ostrożnie, bo kojarzy się z linkami).
W nowoczesnym HTML preferuje się użycie <strong> i <em> tam, gdzie wyróżnienie niesie znaczenie.
Listy
HTML obsługuje listy uporządkowane i nieuporządkowane:
<ol>
<li>Pierwszy element</li>
<li>Drugi element</li>
</ol>
<ul>
<li>Pierwszy element</li>
<li>Drugi element</li>
</ul>Można również tworzyć listy zagnieżdżone, umieszczając <ul> lub <ol> wewnątrz elementu <li>.
Semantyczne elementy strukturalne
HTML5 wprowadza znaczniki ułatwiające opisywanie roli poszczególnych części strony, np.:
<header>— nagłówek strony lub sekcji,<nav>— nawigacja (menu),<main>— główna zawartość strony,<article>— samodzielny artykuł/treść,<aside>— treści poboczne (np. sidebar),<footer>— stopka strony lub sekcji.
Używanie semantycznych tagów poprawia dostępność (czytniki ekranu) i SEO — ułatwia maszynom zrozumienie struktury strony.
Przykładowy minimalny szkielet strony HTML
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Tytuł strony</title>
</head>
<body>
<!-- Tutaj umieszczamy widoczną treść strony -->
<h1>Przykładowy nagłówek</h1>
<p>Przykładowy akapit z tekstem na stronie.</p>
<hr>
<p>Kolejny akapit, poniżej linii poziomej.</p>
</body>
</html>Ta struktura to podstawowy punkt wyjścia do dalszej rozbudowy o style i skrypty.
