Znaczniki w języku HTML umieszczamy w nawiasach ostrokątnych: < oraz >. Przykładem prostego znacznika jest <p>, który odpowiada za akapit w kodzie HTML.
Szczegółowe wyjaśnienie
Budowa znacznika HTML
Każdy znacznik HTML składa się z:
- Otwierający nawias ostrokątny
<; - Nazwa znacznika (np. p, h1, div);
- Opcjonalne atrybuty (np. class, id, style);
- Zamykający nawias ostrokątny
>.
Przykładowo:
<p>To jest przykładowy akapit tekstu.</p>
Typy znaczników
- Znaczniki otwierające – np.
<h1>,<div>,<a>; - Znaczniki zamykające – postać jak otwierającego, ale z
/na początku nazwy, np.</h1>,</div>,</a>; - Znaczniki pojedyncze (samo-zamykające) – nie mają treści, mogą być zapisane w formie
<br>lub<img src="obrazek.jpg" alt="Opis">.
Przykład kodu:
<h1>Tytuł główny strony</h1>
<p><strong>To jest pogrubiony tekst.</strong></p>
<img src="logo.png" alt="Logo strony">
<br>
<hr>
Znaczniki specjalne
- Komentarz HTML umieszczamy w innym typie nawiasów;
<!-- To jest komentarz, nie wyświetli się na stronie -->
- Encje znaków specjalnych również zamykamy innymi znakami (np.
<dla<), ale nie są to typowe znaczniki HTML.
Przykłady zastosowania znaczników w nawiasach ostrokątnych
Struktura podstawowej strony HTML
<!DOCTYPE html>
<html lang="pl">
<head>
<title>Przykładowa strona</title>
<meta charset="utf-8">
</head>
<body>
<h1>Witaj w poradniku HTML!</h1>
<p>Ten tekst znajduje się w akapicie.</p>
<img src="przyklad.jpg" alt="Przykładowy obrazek">
<br>
<p>Kolejny wiersz tekstu.</p>
</body>
</html>
Wyjaśnienie zastosowanych znaczników:
<html>– początek i koniec dokumentu HTML,<head>i<body>– sekcja nagłówkowa oraz treść strony,<title>,<meta>– tytuł i metadane strony,<h1>,<p>,<img>,<br>– najczęściej używane elementy treści.
Najpopularniejsze znaczniki HTML
Oto kilka przykładów najczęściej używanych znaczników wraz z opisem:
| Znacznik | Zastosowanie | Przykład użycia |
|---|---|---|
<p> |
Akapit tekstu | <p>Akapit tekstu</p> |
<h1> ... <h6> |
Nagłówki od najważniejszego do najmniej ważnego | <h1>Tytuł</h1> |
<strong> |
Pogrubienie tekstu | <strong>Ważne!</strong> |
<em> |
Kursywa/wyeksponowanie tekstu | <em>Zwróć uwagę!</em> |
<a> |
Link do innej strony | <a href="adres">Kliknij tutaj</a> |
<img> |
Wstawianie obrazu | <img src="logo.png" alt="Logo"> |
<ul>, <ol>, <li> |
Listy punktowane i numerowane | <ul><li>Punkt</li></ul> |
<br> |
Złamanie linii | Pierwszy wiersz<br>Drugi wiersz |
<table>, <tr>, <td> |
Tabele | <table><tr><td>Komórka</td></tr></table> |
Podsumowanie
Znaczniki HTML zawsze ujmujemy w znaki mniejszości i większości – <NazwaZnacznika> oraz (dla zamykających) </NazwaZnacznika>. Dzięki temu przeglądarka dokładnie wie, jak interpretować zawartość i strukturę strony. Znajomość tej podstawowej zasady pozwala swobodnie tworzyć i edytować strony internetowe od najprostszych po zaawansowane.
