Znacznik HTML to podstawowy element języka HTML, służący do określania struktury oraz znaczenia treści na stronie internetowej. Umożliwia on przeglądarce rozpoznanie, jak poszczególne fragmenty tekstu, obrazów i multimediów mają być interpretowane, wyświetlane i zorganizowane.
Budowa znacznika HTML
Każdy znacznik (zwany też tagiem) składa się z dwóch elementów:
- Tag otwierający – np.
<p>; - Tag zamykający – np.
</p>.
Między tymi tagami umieszcza się treść, którą chcemy oznaczyć.
Często tagowi nadajemy także atrybuty – dodatkowe informacje modyfikujące właściwości elementu, np. styl, zachowanie czy identyfikator.
Przykład podstawowego znacznika HTML –
<p>Tutaj znajduje się przykładowy akapit tekstu.</p><p>– tag otwierający, wskazujący początek akapitu,</p>– tag zamykający, wskazujący jego zakończenie.
Znaczniki parzyste i nieparzyste
- Większość znaczników występuje w parach (otwierający i zamykający);
- Istnieją także znaczniki samozamykające (puste), które nie mają treści do objęcia, np.
<img />służący do wstawiania obrazka.
Przykłady i zastosowanie znaczników HTML
1. Tworzenie podstawowej struktury strony –
<!DOCTYPE html>
<html>
<head>
<title>Tytuł strony</title>
</head>
<body>
<h1>Witamy na stronie!</h1>
<p>To jest przykładowy tekst w akapicie.</p>
</body>
</html>
Znaczenie poszczególnych znaczników:
<html>– oznacza początek i koniec dokumentu HTML,<head>– sekcja z informacjami o stronie,<title>– tytuł wyświetlany na karcie przeglądarki,<body>– główna część strony widoczna dla użytkownika.
2. Tworzenie nagłówków i akapitów –
<h2>O nas</h2>
<p>Nasza firma istnieje od 2000 roku.</p>
<h1>do<h6>– nagłówki różnego poziomu (1 – najważniejszy, 6 – najmniej istotny),<p>– akapit tekstu.
3. Dodanie obrazka (znacznik pusty) –
<img src="logo.png" alt="Logo firmy" />src– adres pliku graficznego,alt– tekst alternatywny wyświetlany, gdy obrazek nie może zostać załadowany.
4. Tworzenie odnośnika –
<a href="https://example.com">Odwiedź naszą stronę</a><a>– znacznik linku,href– adres, pod który prowadzi link.
5. Wyróżnianie tekstu –
<b>Tekst pogrubiony</b>
<i>Tekst pochylony</i>
<strong>Istotny tekst</strong>
<em>Tekst zaznaczony emocjonalnie</em>
6. Tworzenie listy –
<ul>
<li>Punkt pierwszy</li>
<li>Punkt drugi</li>
</ul>
<ul>– lista nieuporządkowana (wypunktowana),<ol>– lista uporządkowana (numerowana),<li>– pojedynczy element listy.
Jak działają znaczniki HTML?
Znaczniki nie są widoczne bezpośrednio na stronie – przeglądarka na ich podstawie decyduje, jak wyświetlić zawartość. Dzięki temu treści mogą być nie tylko odpowiednio sformatowane (np. nagłówki, pogrubienia), ale też lepiej zrozumiałe dla wyszukiwarek, czytników ekranu i innych narzędzi.
Bez znaczników HTML strona byłaby tylko nieuporządkowanym ciągiem tekstu, bez struktury i formatowania, co utrudnia czytelność i odbiór przez użytkownika.
Podsumowanie najważniejszych zastosowań znaczników HTML
- Budowa i organizacja struktury strony (nagłówki, akapity, sekcje);
- Formatowanie i wyróżnianie treści (pogrubienia, kursywy, cytaty);
- Osadzanie multimediów (obrazki, filmy, dźwięk);
- Tworzenie nawigacji (linki, listy, menu);
- Dodawanie metadanych (tytuł, opis, słowa kluczowe w sekcji
<head>); - Tworzenie formularzy (inputy, przyciski, pola wyboru).
Znaczniki HTML są więc fundamentem każdej strony internetowej, umożliwiając nie tylko nadawanie odpowiedniego wyglądu, ale przede wszystkim klarowną organizację informacji oraz sprawną komunikację między użytkownikiem a serwisem.
