Podstawowe znaczniki: <html>, <head>, <body>

Lekcja 1.4: Podstawowe znaczniki: <html>, <head>, <body>

Strona główna > Rozdział 1: Wprowadzenie do HTML > Podstawowe znaczniki: <html>, <head>, <body>

Struktura dokumentu HTML

Każdy dokument HTML składa się z trzech głównych elementów strukturalnych: <html>, <head> i <body>. Te trzy znaczniki tworzą podstawowy szkielet każdej strony internetowej. Zrozumienie ich roli i prawidłowego użycia jest kluczowe dla tworzenia poprawnych dokumentów HTML.

Poniżej przedstawiamy podstawową strukturę dokumentu HTML z tymi trzema elementami:

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tytuł strony</title>
</head>
<body>
    <h1>Nagłówek strony</h1>
    <p>Treść strony widoczna dla użytkownika.</p>
</body>
</html>

Element <html>

Element <html> jest elementem głównym (root element) dokumentu HTML. Wszystkie inne elementy muszą być zawarte wewnątrz tego znacznika. Oznacza on początek i koniec dokumentu HTML.

Atrybuty elementu <html>:

lang - określa język zawartości dokumentu, co jest ważne dla dostępności, wyszukiwarek i narzędzi czytających. Dla języka polskiego używamy lang="pl".
dir - określa kierunek tekstu (ltr - od lewej do prawej, rtl - od prawej do lewej). Dla języków europejskich, w tym polskiego, domyślnie jest to ltr.

Przykład:

<html lang="pl" dir="ltr">
    <!-- Zawartość dokumentu HTML -->
</html>

Element <head>

Element <head> zawiera metadane dokumentu, czyli informacje o stronie, które nie są bezpośrednio wyświetlane użytkownikowi. Metadane mogą wpływać na sposób wyświetlania zawartości lub zachowanie strony, a także dostarczać informacji dla wyszukiwarek i innych usług.

Co umieszczamy w sekcji <head>:

<title> - tytuł strony, wyświetlany na karcie przeglądarki i w wynikach wyszukiwania
<meta> - różne metainformacje, takie jak kodowanie znaków, opis strony, słowa kluczowe
<link> - powiązania z zewnętrznymi zasobami, najczęściej arkuszami stylów CSS
<style> - wewnętrzne arkusze stylów CSS
<script> - skrypty JavaScript (choć często umieszcza się je również na końcu sekcji body)
<base> - bazowy URL dla wszystkich względnych adresów URL w dokumencie

Przykład sekcji <head>:

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Opis mojej strony dla wyszukiwarek">
    <meta name="keywords" content="słowa, kluczowe, strona">
    <title>Tytuł mojej strony</title>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
</head>

Najważniejsze elementy sekcji <head>:

1. Element <title>

Element <title> definiuje tytuł dokumentu, który jest wyświetlany na karcie przeglądarki. Jest to jedyny obowiązkowy element w sekcji <head>. Tytuł jest również używany przez wyszukiwarki do identyfikacji strony w wynikach wyszukiwania.

<title>Moja pierwsza strona HTML</title>

2. Element <meta>

Elementy <meta> dostarczają różnych metadanych o dokumencie HTML. Najczęściej używane atrybuty to:

charset - określa kodowanie znaków dokumentu
name i content - definiują różne metainformacje
http-equiv - może być użyty do symulowania nagłówków HTTP

<meta charset="UTF-8">
<meta name="description" content="Opis mojej strony">
<meta name="keywords" content="HTML, CSS, JavaScript">
<meta name="author" content="Jan Kowalski">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

3. Element <link>

Element <link> definiuje relację między bieżącym dokumentem a zewnętrznym zasobem. Najczęściej jest używany do linkowania arkuszy stylów CSS.

<link rel="stylesheet" href="style.css">
<link rel="icon" href="favicon.ico" type="image/x-icon">

4. Element <style>

Element <style> zawiera informacje o stylach dla dokumentu lub jego części. Pozwala na umieszczenie kodu CSS bezpośrednio w dokumencie HTML.

<style>
    body {
        font-family: Arial, sans-serif;
        background-color: #f0f0f0;
    }
    h1 {
        color: blue;
    }
</style>

5. Element <script>

Element <script> służy do osadzania lub linkowania skryptów JavaScript. Może być umieszczony zarówno w sekcji <head>, jak i w sekcji <body>.

<script src="script.js"></script>
<script>
    function powitanie() {
        alert("Witaj na mojej stronie!");
    }
</script>

Element <body>

Element <body> zawiera całą widoczną zawartość strony internetowej, czyli wszystko to, co użytkownik widzi w oknie przeglądarki. Tutaj umieszczamy tekst, obrazy, linki, tabele, formularze i inne elementy, które chcemy zaprezentować użytkownikowi.

Co umieszczamy w sekcji <body>:

Nagłówki (<h1> do <h6>)
Paragrafy tekstu (<p>)
Listy (<ul>, <ol>, <li>)
Linki (<a>)
Obrazy (<img>)
Tabele (<table>)
Formularze (<form>)
Elementy strukturalne (<div>, <span>)
Elementy semantyczne HTML5 (<header>, <nav>, <main>, <section>, <article>, <footer>)
Multimedia (<audio>, <video>)
Skrypty JavaScript (<script>), często umieszczane na końcu sekcji body

Przykład sekcji <body>:

<body>
    <header>
        <h1>Moja strona internetowa</h1>
        <nav>
            <ul>
                <li><a href="#">Strona główna</a></li>
                <li><a href="#">O nas</a></li>
                <li><a href="#">Kontakt</a></li>
            </ul>
        </nav>
    </header>
    
    <main>
        <section>
            <h2>O nas</h2>
            <p>Witamy na naszej stronie! Jesteśmy firmą zajmującą się...</p>
            <img src="firma.jpg" alt="Nasza firma">
        </section>
        
        <section>
            <h2>Nasze usługi</h2>
            <ul>
                <li>Usługa 1</li>
                <li>Usługa 2</li>
                <li>Usługa 3</li>
            </ul>
        </section>
    </main>
    
    <footer>
        <p>© 2025 Moja Firma. Wszelkie prawa zastrzeżone.</p>
    </footer>
    
    <script src="script.js"></script>
</body>

Zagnieżdżanie elementów

W HTML elementy mogą być zagnieżdżane wewnątrz innych elementów, tworząc hierarchiczną strukturę dokumentu. Ważne jest, aby elementy były prawidłowo zagnieżdżane i zamykane w odpowiedniej kolejności.

Prawidłowe zagnieżdżanie:

<div>
    <p>To jest paragraf wewnątrz diva. <strong>Ten tekst jest pogrubiony.</strong></p>
</div>

Nieprawidłowe zagnieżdżanie:

<div>
    <p>To jest paragraf wewnątrz diva. <strong>Ten tekst jest pogrubiony.</p></strong>
</div>

W drugim przykładzie znaczniki <strong> i <p> są zamknięte w niewłaściwej kolejności, co jest błędem składniowym.

Zadanie praktyczne

Zadanie: Stwórz kompletny dokument HTML z prawidłową strukturą, zawierający tytuł, metadane, nagłówek, paragraf tekstu i listę.

Rozwiązanie:

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Moja strona o programowaniu">
    <meta name="keywords" content="HTML, CSS, programowanie, web development">
    <title>Moja strona o programowaniu</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
            margin: 0;
            padding: 20px;
            background-color: #f5f5f5;
        }
        h1 {
            color: #333;
            border-bottom: 2px solid #ddd;
            padding-bottom: 10px;
        }
        ul {
            background-color: #fff;
            padding: 15px 15px 15px 35px;
            border-radius: 5px;
        }
    </style>
</head>
<body>
    <h1>Nauka programowania webowego</h1>
    <p>Witaj na mojej stronie poświęconej nauce programowania stron internetowych. Poniżej znajdziesz listę technologii, które warto poznać:</p>
    <ul>
        <li>HTML - struktura strony</li>
        <li>CSS - stylizacja</li>
        <li>JavaScript - interaktywność</li>
        <li>PHP - programowanie po stronie serwera</li>
        <li>SQL - bazy danych</li>
    </ul>
</body>
</html>

Dodatkowe zadania do samodzielnego wykonania:

Dodaj do sekcji <head> link do zewnętrznego arkusza stylów (możesz utworzyć pusty plik CSS).
Dodaj do sekcji <body> element <footer> z informacją o prawach autorskich.
Dodaj do sekcji <head> element <script> z prostą funkcją JavaScript, która wyświetla alert po załadowaniu strony.
Zmodyfikuj dokument, dodając elementy semantyczne HTML5, takie jak <header>, <main> i <section>.

Najczęściej zadawane pytania

Czy element <html> jest obowiązkowy w dokumencie HTML?

Tak, element <html> jest obowiązkowy w poprawnym dokumencie HTML. Jest to element główny (root), który zawiera cały dokument i informuje przeglądarkę, że treść jest napisana w języku HTML.

Co się stanie, jeśli pominę atrybut lang w elemencie <html>?

Dokument będzie działać, ale może to wpłynąć negatywnie na dostępność strony, tłumaczenia automatyczne i SEO. Atrybut lang pomaga przeglądarkom, wyszukiwarkom i czytelnikom ekranowym poprawnie interpretować zawartość.

Czy mogę umieścić więcej niż jeden element <title> w sekcji <head>?

Nie, w poprawnym dokumencie HTML może istnieć tylko jeden element <title> w sekcji <head>. Jeśli umieścisz więcej, przeglądarka zazwyczaj użyje tylko pierwszego napotkanego.

Czy mogę umieścić elementy <head> w sekcji <body>?

Nie, elementy przeznaczone dla sekcji <head> (jak <title>, <meta>) powinny być umieszczone wyłącznie w sekcji <head>. Umieszczenie ich w <body> jest niepoprawne składniowo i może prowadzić do nieprzewidywalnych rezultatów.

Dlaczego warto używać elementów semantycznych HTML5 w sekcji <body>?

Elementy semantyczne HTML5 (jak <header>, <nav>, <main>) nadają strukturze strony znaczenie, co poprawia dostępność, SEO i czytelność kodu. Pomagają przeglądarkom i wyszukiwarkom lepiej zrozumieć zawartość strony.