Znaczniki HTML są podstawowymi elementami używanymi do tworzenia struktury i zawartości stron internetowych. Poza tym znacznik (tag) to element kodu, który definiuje, jak przeglądarka powinna wyświetlać zawartość strony. Co więcej każdy znacznik ma określone zastosowanie i może zawierać różne atrybuty, które modyfikują jego działanie.
W tym artykule omówimy najważniejsze znaczniki HTML, przedstawiając ich zastosowanie i przykłady kodu. Zaczniemy od podstawowych znaczników, a następnie przejdziemy do bardziej zaawansowanych.
Znaczniki strukturalne
<html> otacza całą zawartość dokumentu HTML i wskazuje przeglądarce, że wszystko wewnątrz tego znacznika jest częścią dokumentu HTML
<!DOCTYPE html>
<html>
<!-- Cała zawartość strony HTML -->
</html><head> zawiera metadane o dokumencie, takie jak tytuł strony, meta tagi, linki do stylów CSS i skryptów JavaScript
<head>
<meta charset="UTF-8">
<title>Moja Strona</title>
</head><body> zawiera główną zawartość strony internetowej, która jest wyświetlana w przeglądarce
<body>
<h1>Witaj na mojej stronie!</h1>
<p>To jest paragraf tekstu.</p>
</body>Znaczniki nagłówków
Przede wszystkim nagłówki HTML są używane do tworzenia hierarchii tytułów na stronie. Dodatkowo HTML oferuje sześć poziomów nagłówków, od <h1> (najważniejszy) do <h6> (najmniej ważny).
<h1>Główny Nagłówek</h1>
<h2>Podnagłówek</h2>
<h3>Pod-podnagłówek</h3>
<!-- I tak dalej do <h6> -->Znaczniki tekstu
<p> tworzy paragraf tekstu
<p>To jest przykładowy paragraf.</p><a> tworzy hiperłącze do innej strony lub zasobu
<a href="https://kurshtmlcss.pl">Odwiedź kurshtmlcss.pl</a><strong> oznacza ważny tekst (zazwyczaj wyświetlany jako pogrubiony)
<em> oznacza tekst akcentowany (zazwyczaj wyświetlany jako kursywa)
<p>To jest <strong>ważny</strong> tekst i to jest <em>akcentowany</em> tekst.</p><br> wstawia przerwę w linii
<hr> wstawia poziomą linię, służącą do oddzielania treści
<p>To jest tekst.<br>To jest tekst w nowej linii.</p>
<hr>
<p>Tekst po poziomej linii.</p>Znaczniki list
<ul> tworzy listę nieuporządkowaną (z punktami)
<ol> tworzy listę uporządkowaną (z numerami)
Elementy listy są oznaczane znacznikiem <li>
<ul>
<li>Element listy 1</li>
<li>Element listy 2</li>
<li>Element listy 3</li>
</ul>
<ol>
<li>Element listy 1</li>
<li>Element listy 2</li>
<li>Element listy 3</li>
</ol>Znaczniki multimedialne
<img> wstawia obraz do strony, wymaga atrybutu src (źródło obrazu) i alt (opis alternatywny)
<img src="obrazek.jpg" alt="Opis Obrazka"><audio> wstawia plik dźwiękowy
<video> dodaje plik wideo
Oba znaczniki mogą mieć atrybut controls, który dodaje kontrolki odtwarzania.
<audio controls>
<source src="dzwiek.mp3" type="audio/mpeg">
Twoja przeglądarka nie obsługuje elementu audio.
</audio>
<video controls>
<source src="film.mp4" type="video/mp4">
Twoja przeglądarka nie obsługuje elementu wideo.
</video>Znaczniki formularzy
<form> definiuje formularz HTML. Natomiast wewnątrz formularza HTML znajdują się różne elementy formularza, takie jak pola tekstowe, przyciski, itd.
<form action="/submit-form" method="post">
<label for="name">Imię:</label>
<input type="text" id="name" name="name">
<label for="email">Email:</label>
<input type="email" id="email" name="email">
<label for="message">Wiadomość:</label>
<textarea id="message" name="message"></textarea>
<button type="submit">Wyślij</button>
</form><input> tworzy różne typy pól wejściowych, takie jak pola tekstowe, pola hasła, pola wyboru, itd.
<label for="username">Nazwa użytkownika:</label>
<input type="text" id="username" name="username"><textarea> tworzy większe pole tekstowe, które może zawierać więcej tekstu
<label for="comments">Komentarze:</label>
<textarea id="comments" name="comments"></textarea><button> i <input type="submit"> tworzą przyciski w formularzach
<button type="submit">Wyślij</button>
<input type="submit" value="Wyślij">Znaczniki tabel
<table> definiuje tabelę HTML. Wewnątrz tabeli znajdują się wiersze (<tr>), komórki (<td>) i nagłówki tabeli (<th>)
<table>
<tr>
<th>Imię</th>
<th>Nazwisko</th>
</tr>
<tr>
<td>Jan</td>
<td>Kowalski</td>
</tr>
<tr>
<td>Anna</td>
<td>Nowak</td>
</tr>
</table>Znaczniki skryptów i stylów
<script> jest używany do osadzia skryptów JavaScript w dokumencie HTML
<script>
alert("Witaj, Świecie!");
</script><style> definiuje wewnętrzne reguły CSS dla dokumentu HTML
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
}
h1 {
color: blue;
}
</style>Znaczniki osadzania zasobów zewnętrznych
<link> służy do łączenia zewnętrznych zasobów, takich jak arkusze stylów CSS
<link rel="stylesheet" href="style.css"><script> może również służyć do łączenia zewnętrznych skryptów JavaScript
<script src="script.js"></script><iframe> umożliwia osadzanie treści z innych stron internetowych w aktualnym dokumencie
<iframe src="https://www.example.com" width="600" height="400"></iframe>Znaczniki semantyczne
HTML5 wprowadził znaczniki semantyczne, które poprawiają czytelność kodu i dostępność.
<header>, <footer>, <nav>, <main>, <section>, <article>, <aside>
Te znaczniki definiują różne części dokumentu i mają na celu poprawę struktury i nawigacji.
<header>
<h1>Moja Strona</h1>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<main>
<section>
<h2>Sekcja 1</h2>
<p>Treść sekcji 1.</p>
</section>
<article>
<h2>Artykuł 1</h2>
<p>Treść artykułu 1.</p>
</article>
<aside>
<h2>Aside</h2>
<p>Treść poboczna.</p>
</aside>
</main>
<footer>
<p>© 2024 Moja Strona</p>
</footer>Lista podstawowych znaczników HTML
Struktura dokumentu
<html>– Główny element HTML.<head>– Sekcja z metadanymi.<body>– Sekcja z widoczną zawartością.
Metadane
<title>– Tytuł strony.<meta>– Metadane, takie jak kodowanie znaków, opis strony.<link>– Połączenie z zewnętrznym zasobem (CSS, ikony).
Sekcja nagłówkowa
<h1>–<h6>– Nagłówki o różnym poziomie ważności.
Tekst i struktura
<p>– Akapit.<br>– Przerwa w linii (samo-zamykający).<hr>– Linia pozioma (samo-zamykający).
Formatowanie tekstu
<b>– Pogrubienie.<strong>– Ważne pogrubienie.<i>– Kursywa.<em>– Ważna kursywa.<mark>– Podświetlony tekst.<small>– Mniejszy tekst.<del>– Przekreślony tekst.<ins>– Podkreślony tekst, oznaczający dodanie.<sub>– Indeks dolny.<sup>– Indeks górny.<blockquote>– Cytat blokowy.<q>– Krótki cytat.<abbr>– Skrót.<cite>– Cytat z tytułu.<code>– Kod komputerowy.<pre>– Przedformatowany tekst.<kbd>– Dane wejściowe z klawiatury.<samp>– Przykłady wyjścia programu.<var>– Zmienna.
Listy
<ul>– Nienumerowana lista.<ol>– Numerowana lista.<li>– Element listy.<dl>– Lista definicji.<dt>– Termin definicyjny.<dd>– Opis definicyjny.
Linki i nawigacja
<a>– Hiperłącze.
Obrazy i multimedia
<img>– Obraz (samo-zamykający).<figure>– Ilustracja.<figcaption>– Podpis ilustracji.<audio>– Dźwięk.<video>– Wideo.<source>– Źródło multimediów (samo-zamykający).<track>– Ścieżki tekstowe w multimediach (samo-zamykający).<embed>– Wbudowany zasób, np. plik multimedialny (samo-zamykający).<object>– Osadzony obiekt.<param>– Parametry obiektu (samo-zamykający).
Tabele
<table>– Tabela.<caption>– Podpis tabeli.<thead>– Nagłówek tabeli.<tbody>– Ciało tabeli.<tfoot>– Stopka tabeli.<tr>– Wiersz tabeli.<th>– Nagłówek komórki tabeli.<td>– Komórka tabeli.<col>– Kolumna tabeli (samo-zamykający).<colgroup>– Grupa kolumn tabeli.
Formularze
<form>– Formularz.<input>– Pole wejściowe (samo-zamykający).<textarea>– Pole tekstowe.<button>– Przycisk.<select>– Lista rozwijana.<option>– Opcja w liście rozwijanej.<optgroup>– Grupa opcji w liście rozwijanej.<label>– Etykieta dla elementu formularza.<fieldset>– Grupa powiązanych elementów formularza.<legend>– Podpis grupy elementów formularza.<datalist>– Lista opcji dla elementu<input>.<output>– Wynik działania formularza.
Sekcje i artykuły
<section>– Sekcja dokumentu.<article>– Samodzielny artykuł.<aside>– Treść poboczna.<header>– Nagłówek sekcji lub artykułu.<footer>– Stopka sekcji lub artykułu.<nav>– Nawigacja strony.<main>– Główna treść dokumentu.
Skrypty i zasoby
<script>– Skrypt JavaScript.<noscript>– Zawartość dla przeglądarek bez obsługi JavaScript.<canvas>– Obszar do rysowania grafiki za pomocą JavaScript.
Ramki
<iframe>– Wbudowana ramka.
Styl i zasoby
<style>– Wewnętrzny styl CSS.
Inne znaczniki
<div>– Ogólny kontener blokowy.<span>– Ogólny kontener liniowy.<details>– Detale, które użytkownik może zobaczyć lub ukryć.<summary>– Podsumowanie dla elementu<details>.<dialog>– Okno dialogowe.<data>– Powiązanie danych z treścią.
Znaczniki HTML – podsumowanie
Podsumowując znaczniki HTML są podstawą budowy stron internetowych. Dlatego znajomość i zrozumienie podstawowych znaczników HTML umożliwia tworzenie stron internetowych, które są czytelne, funkcjonalne i dobrze zorganizowane. Co więcej opanowanie tych znaczników to kluczowy krok w nauce tworzenia stron internetowych. Pamiętaj, że HTML jest łatwy do nauki, ale jego możliwości są ogromne, a praktyka jest najlepszym sposobem na opanowanie tego języka.