Struktura dokumentu HTML
Struktura dokumentu HTML jest podstawą tworzenia stron WWW i aplikacji webowych. Dokument HTML składa się z elementów, które są reprezentowane przez znaczniki. Znaczniki służą do definiowania struktury i wyglądu strony internetowej. Każdy prawidłowo napisany dokument HTML ma podstawową strukturę, która obejmuje kilka kluczowych elementów.
Przykład prostej struktury dokumentu HTML:
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Przykładowa strona</title>
</head>
<body>
<h1>Witaj świecie!</h1>
<p>To jest przykładowa strona internetowa.</p>
</body>
</html>W powyższym przykładzie można zidentyfikować następujące kluczowe elementy:
<!DOCTYPE html>– Deklaracja DOCTYPE informuje przeglądarkę o wersji HTML używanej w dokumencie. W przypadku najnowszego standardu HTML5 deklaracja ta wygląda zawsze tak samo.<html lang="pl">...</html>– Element<html>otacza cały kod strony i jest głównym kontenerem, który zawiera wszystkie inne elementy struktury HTML. Atrybutlangwskazuje język dokumentu – w naszym przypadku jest to język polski (pl).<head>...</head>– Element<head>zawiera metadane, które nie są bezpośrednio wyświetlane na stronie, ale są używane przez przeglądarki i inne usługi, takie jak wyszukiwarki. W sekcji<head>znajdują się między innymi:<meta charset="UTF-8">– Definiuje zestaw znaków używany w dokumencie. Współczesne strony internetowe zwykle używają “UTF-8”, który obsługuje większość języków świata.<meta name="viewport" content="width=device-width, initial-scale=1.0">– Ta linia kodu odpowiada za skalowanie strony na różnych urządzeniach, takich jak smartfony czy tablety.<title>...</title>– Element<title>zawiera tytuł strony, który jest wyświetlany na pasku tytułu przeglądarki, jest również niezwykle istotny w przypadku pozycjonowania w wyszukiwarkach.
<body>...</body>– Element<body>zawiera właściwą zawartość strony, która jest zwykle widoczna dla użytkowników. W sekcji<body>znajduję się cała zawartość strony, czyli np. nagłówki, akapity, listy, linki, obrazy, formularze i wiele innych, które razem tworzą treść i układ strony internetowej.
Ponadto w ramach elementu <body> można używać wielu różnych znaczników HTML, które definiują różne części zawartości strony. Poniżej znajdziesz kilka podstawowych przykładów:
<h1>...</h1>do<h6>...</h6>– Nagłówki o różnym stopniu ważności, gdzie<h1>jest najważniejszym nagłówkiem na stronie, a<h6>najmniej ważnym.<p>...</p>– Akapity do prezentowania tekstu.<a href="...">...</a>– Linki odsyłające do innych stron internetowych lub podstrony w obrębie tej samej witryny.<ul>...</ul>i<ol>...</ol>– Nieuporządkowane (wypunktowane) i uporządkowane (numerowane) listy, które zawierają elementy<li>...</li>reprezentujące poszczególne punkty listy.<img src="..." alt="...">– Obrazy, których źródło (URL) i alternatywny opis – dla czytników ekranowych lub w przypadku problemów z załadowaniem – są definiowane za pomocą atrybutówsrcialt.
W miarę jak będziesz się uczyć HTMLa, odkryjesz wiele innych znaczników i atrybutów, które służą do tworzenia różnorodnych rodzajów zawartości i funkcji na stronach internetowych.
Jaka jest struktura dokumentu HTML?
Warto zapamiętać kluczowe elementy struktury dokumentu HTML, takie jak <head> i <body>, oraz pozostałe znaczniki i atrybuty używane w dokumentach HTML. Znaczniki pozwalają na tworzenie złożonych stron internetowych, które mogą zawierać tekst, obrazy, multimedia, interakcje i wiele innych elementów. Zrozumienie podstawowej struktury dokumentu HTML jest pierwszym krokiem na drodze do opanowania tworzenia pięknych stron internetowych i korzystania z pełnych możliwości, jakie oferuje język HTML.
Czy ten poradnik był pomocny?
Mateusz Turek
Swoją przygodę z projektowaniem stron internetowych rozpocząłem z kursem od Komputer Świat wydanym w marcu 2003 roku w formie małej książeczki. Na przestrzeni 20 lat zaprojektowałem niezliczoną ilość witryn i aplikacji internetowych. Projektowałem dla małych i dużych firm takich jak Oriflame, Top Market, Bezpieczna Rodzina czy Helping Hand.
