Znaczniki w HTML ujmujemy w ostre nawiasy – < oraz >. To właśnie te znaki są kluczowym elementem budowy każdego znacznika HTML i pozwalają przeglądarce rozpoznać, które fragmenty kodu mają specjalne znaczenie – opisują strukturę i zawartość strony.
Budowa znacznika HTML
Każdy znacznik HTML to fragment tekstu ujęty w ostre nawiasy. Podstawowe rodzaje znaczników to:
- Znaczniki otwierające rozpoczynają dany element, np. <p>;
- Znaczniki zamykające kończą element i mają dodatkowo ukośnik, np. </p>;
- Samozamykające się znaczniki – pojedyncze, nie wymagają zamknięcia (np. <img> lub <br>).
Warto wiedzieć – w HTML5 nie jest już wymagane zamykanie znaczników pojedynczych poprzez /> (choć taka składnia jest poprawna), wystarczy <img>.
Przykłady zastosowań znaczników HTML
Tworzenie paragrafu (akapit tekstu)
<p>To jest przykładowy akapit tekstu na stronie internetowej.</p>
Znacznik <p> otwiera paragraf, a </p> go zamyka. Tekst między nimi będzie wyświetlony jako osobny akapit.
Nagłówki o różnym poziomie ważności
<h1>Tytuł główny</h1>
<h2>Podtytuł</h2>
<h3>Sekcja</h3>
Nagłówki od <h1> do <h6> porządkują treść, wskazując, które fragmenty tekstu są najważniejsze.
Wstawianie obrazka
<img src="przyklad.jpg" alt="Opis obrazka">
<img> to znacznik pojedynczy (nie wymaga </img>), pozwala na umieszczenie obrazu na stronie. Atrybut src definiuje ścieżkę do pliku, alt – alternatywny opis.
Tworzenie odnośnika (linku)
<a href="https://example.com">Kliknij tutaj</a>
<a> to znacznik otwierający odnośnik, href określa adres docelowy, tekst pomiędzy znacznikami to treść linku.
Wstawianie komentarzy w kodzie HTML
Komentarz nie jest wyświetlany na stronie:
<!-- To jest komentarz w kodzie HTML -->
Wszystko pomiędzy <!– oraz –> będzie zignorowane przez przeglądarkę.
Rozbudowane przykłady zastosowania znaczników
Struktura podstawowego dokumentu HTML
<!DOCTYPE html>
<html>
<head>
<title>Przykładowa strona</title>
<meta charset="UTF-8">
</head>
<body>
<h1>Witaj na mojej stronie!</h1>
<p>Ta strona została napisana z użyciem znaczników HTML.</p>
<img src="obrazek.jpg" alt="Grafika przykładowa">
<a href="https://twojserwis.pl">Odwiedź naszą stronę</a>
</body>
</html>
W powyższym przykładzie każda sekcja strony (nagłówek, treść, obraz, link) została opisana odpowiednimi znacznikami HTML, ujętymi w ostre nawiasy.
Podsumowanie
- Znaczniki HTML zawsze zapisujemy w ostrych nawiasach < oraz >;
- Mogą występować jako znaczniki otwierające (<p>), zamykające (</p>) lub pojedyncze / samozamykające się (<img>, <br>);
- Wnętrze znaczników może zawierać atrybuty określające dodatkowe informacje (np. src, alt, href) lub inne znaczniki HTML, co pozwala na zagnieżdżanie struktury strony.
Poprawne stosowanie ostrych nawiasów i znajomość struktury znaczników HTML to podstawa każdej strony internetowej i klucz do sprawnej pracy z kodem.
