HTML (HyperText Markup Language) to język znaczników używany do tworzenia struktury i treści stron internetowych. Tagi HTML są używane do opisywania różnych elementów strony, takich jak nagłówki, akapity, obrazy, linki, formularze i inne interaktywne elementy. Każdy tag pełni określoną funkcję i ma swoją składnię, która pomaga przeglądarkom poprawnie interpretować i wyświetlać treści na stronach WWW.
Poniżej znajduje się spis najważniejszych tagów HTML, z krótkimi opisami ich funkcji. Dzięki tym tagom możesz tworzyć zarówno proste, jak i złożone struktury stron, zapewniając ich poprawne działanie i estetyczny wygląd.
Struktura dokumentu:
<html>| Główny element otaczający całą stronę HTML.<head>| Zawiera metadane strony, takie jak tytuł i linki do zasobów.<body>| Zawiera widoczną treść strony internetowej.<title>| Definiuje tytuł strony wyświetlany na karcie przeglądarki.<meta>| Dostarcza metadane, takie jak kodowanie znaków i opis strony.<link>| Łączy zewnętrzne zasoby, takie jak arkusze stylów CSS.<style>| Osadza arkusz stylów CSS w dokumencie HTML.<script>| Osadza lub odwołuje się do kodu JavaScript.
Nagłówki i tekst:
<h1>–<h6>| Definiują nagłówki, od najbardziej znaczącego<h1>do najmniej znaczącego<h6>.<p>| Tworzy akapit tekstu.<br>| Wstawia pojedynczy przełom w linii.<hr>| Wstawia poziomą linię jako element separujący treść.<strong>| Wyróżnia tekst, nadając mu semantycznie silniejsze znaczenie.<em>| Zaznacza tekst, nadając mu semantyczne podkreślenie (kursywę).<mark>| Oznacza tekst jako wyróżniony, zwykle z tłem.<small>| Wyświetla tekst jako mniejszy niż normalny.<del>| Zaznacza tekst jako usunięty (przekreślony).<ins>| Zaznacza tekst jako dodany (podkreślony).<sub>| Wyświetla tekst jako indeks dolny.<sup>| Wyświetla tekst jako indeks górny.
Listy:
<ul>| Tworzy listę nieuporządkowaną z punktami.<ol>| Tworzy listę uporządkowaną z numerami.<li>| Definiuje element listy.<dl>| Tworzy listę definicji.<dt>| Definiuje termin w liście definicji.<dd>| Definiuje opis terminu w liście definicji.
Tabele:
<table>| Tworzy tabelę danych.<thead>| Definiuje nagłówkową część tabeli.<tbody>| Definiuje ciało tabeli (główne dane tabeli).<tfoot>| Definiuje stopkę tabeli.<tr>| Tworzy wiersz tabeli.<th>| Tworzy komórkę nagłówkową tabeli.<td>| Tworzy komórkę danych w tabeli.<caption>| Dodaje tytuł lub opis do tabeli.
Formularze:
<form>| Tworzy formularz do zbierania danych od użytkownika.<input>| Tworzy różnorodne pola do wprowadzania danych (tekst, przyciski, itp.).<label>| Przypisuje etykietę do elementu formularza.<textarea>| Tworzy wielowierszowe pole tekstowe.<button>| Tworzy przycisk do wykonania akcji.<select>| Tworzy rozwijaną listę wyboru.<option>| Definiuje opcję w rozwijanym polu<select>.<optgroup>| Grupuje powiązane opcje w polu<select>.<fieldset>| Grupuje elementy formularza razem.<legend>| Tworzy tytuł grupy elementów formularza zdefiniowanych w<fieldset>.<datalist>| Tworzy listę sugerowanych opcji dla pól<input>.<output>| Wyświetla wynik działania formularza.
Obrazy i multimedia:
<img>| Osadza obraz w dokumencie HTML.<audio>| Osadza plik dźwiękowy w dokumencie HTML.<video>| Osadza plik wideo w dokumencie HTML.<source>| Definiuje różne pliki multimedialne dla elementów<audio>i<video>.<track>| Dodaje napisy lub metadane do elementu<video>.
Linki i nawigacja:
<a>| Tworzy hiperłącze do innej strony lub lokalizacji w dokumencie.<nav>| Definiuje sekcję nawigacyjną strony (np. menu).
Semantyczne HTML5:
<header>| Reprezentuje nagłówek strony lub sekcji.<footer>| Reprezentuje stopkę strony lub sekcji.<main>| Reprezentuje główną treść dokumentu.<section>| Tworzy semantyczną sekcję treści.<article>| Reprezentuje samodzielną, odrębną jednostkę treści.<aside>| Reprezentuje treść boczną, np. pasek boczny.<figure>| Grupa zawierająca obrazki, diagramy, wykresy.<figcaption>| Dodaje opis do elementu<figure>.
Elementy interaktywne:
<details>| Tworzy rozwijany element, który użytkownik może otworzyć lub zamknąć.<summary>| Definiuje widoczny nagłówek elementu<details>.<dialog>| Tworzy okno dialogowe.<progress>| Reprezentuje pasek postępu procesu.<meter>| Reprezentuje miernik wartości w określonym zakresie.
Osadzanie treści:
<iframe>| Osadza inną stronę w dokumencie HTML.<embed>| Osadza zasoby zewnętrzne, takie jak pliki multimedialne.<object>| Osadza pliki multimedialne lub inne zasoby zewnętrzne.<param>| Przekazuje parametry do osadzonych zasobów w<object>.
Grupy treści:
<div>| Tworzy ogólny kontener blokowy do grupowania treści.<span>| Tworzy kontener wbudowany do stylizowania części tekstu.
Inne elementy HTML:
<b>| Wyświetla pogrubiony tekst bez semantycznego wyróżnienia.<i>| Wyświetla tekst kursywą bez semantycznego wyróżnienia.<u>| Wyświetla podkreślony tekst.<code>| Wyświetla fragmenty kodu komputerowego.<pre>| Wyświetla tekst w formacie preformatowanym (zachowując spacje i złamania linii).<blockquote>| Cytuje blok tekstu.<cite>| Reprezentuje cytowanie źródła.<abbr>| Definiuje skrót lub akronim.
Spis Treści - darmowy kurs HTML i CSS
Podstawy:
Wprowadzenie: Jak przygotować środowisko pracy
Lekcja 1: Podstawowe tagi HTML i struktura dokumentu
Lekcja 2: Formatowanie tekstu, linki i obrazki
Lekcja 3: Listy, tabele i formularze w HTML
Lekcja 4: Wprowadzenie do CSS
Lekcja 5: Rozszerzenie podstawowych właściwości CSS
Zaawansowane:
Lekcja 6: Semantyczne HTML5
Lekcja 7: Zaawansowane formularze w HTML5
Lekcja 8: Multimedia w HTML5
Lekcja 9: Flexbox – Elastyczny układ stron
Lekcja 10: CSS Grid Layout – Potężny system układów
Lekcja 11: CSS Animacje i przejścia (transitions)
Lekcja 12: Responsywność i Media Queries
Lekcja 13: CSS Variables (Custom Properties)
Dodatki:
- Spis tagów HTML
- Spis Właściwości CSS
