110 znaczników · 28 atrybutów · 10 kategorii
Dokumentacja HTML
Wszystkie znaczniki HTML z opisem, atrybutami i przykładami, które od razu widzisz w podglądzie. Od struktury dokumentu po formularze, tabele i multimedia.
138 haseł
Struktura dokumentu
Szkielet strony: dokument, nagłówek z metadanymi, style i skrypty.
- <html>Korzeń dokumentu HTML. Wszystkie pozostałe elementy strony znajdują się w jego wnętrzu.
- <head>Niewidoczna część dokumentu z metadanymi: tytułem, kodowaniem znaków, opisem, stylami i skryptami.
- <body>Widoczna część dokumentu: wszystko, co użytkownik zobaczy na stronie i z czym może wejść w interakcję.
- <title>Tytuł dokumentu widoczny na karcie przeglądarki, w zakładkach i jako nagłówek wyniku w wyszukiwarce.
- <meta>Metadane strony: kodowanie znaków, ustawienia widoku na telefonie, opis dla wyszukiwarek i podgląd linku w serwisach społecznościowych.
- <link>Łączy dokument z zewnętrznym zasobem: arkuszem stylów, ikoną strony, fontem albo inną wersją językową.
- <style>Arkusz stylów CSS wpisany bezpośrednio w dokument HTML.
- <script>Osadza kod JavaScript w stronie albo wczytuje go z pliku, żeby dodać stronie zachowanie.
- <noscript>Treść, którą przeglądarka pokaże tylko wtedy, gdy JavaScript jest wyłączony.
- <base>Ustala adres bazowy dla wszystkich względnych adresów w dokumencie oraz domyślny cel odnośników.
- <!DOCTYPE html>Deklaracja typu dokumentu w pierwszej linii pliku. Mówi przeglądarce, żeby wyświetliła stronę w trybie standardów, a nie w trybie zgodności.
- <!-- … -->Komentarz w kodzie HTML: notatka dla ludzi, której przeglądarka nie wyświetla, choć każdy zobaczy ją w źródle strony.
Sekcje i semantyka
Elementy, które dzielą stronę na logiczne części i opisują ich znaczenie.
- <article>Samodzielna, zamknięta treść, którą można przeczytać i udostępnić osobno.
- <section>Tematyczna część dokumentu, zwykle z własnym nagłówkiem.
- <header>Wstęp do strony lub sekcji: logo, tytuł, nawigacja, dane autora.
- <footer>Stopka strony lub sekcji: autor, prawa autorskie, linki, dane kontaktowe.
- <main>Główna, unikalna treść strony. Na stronie jest tylko jeden widoczny.
- <nav>Blok głównych linków nawigacyjnych: menu, spis treści, okruszki.
- <aside>Treść poboczna, luźno związana z otoczeniem: ramka, pasek boczny, przypis.
- <h1>–<h6>Nagłówki sześciu poziomów, od najważniejszego h1 do najmniej ważnego h6. Razem tworzą spis treści strony.
- <hgroup>Łączy nagłówek z podtytułem, sloganem albo nadtytułem w jedną całość.
- <address>Dane kontaktowe autora artykułu albo właściciela strony.
- <search>Oznacza część strony z wyszukiwarką albo filtrami wyników.
Tekst i formatowanie
Akapity, linki, wyróżnienia, cytaty i znaczniki do fragmentów kodu.
- <a>Odnośnik do innej strony, pliku, adresu e-mail albo miejsca na tej samej stronie.
- <p>Akapit tekstu.
- <strong>Tekst o dużym znaczeniu: ostrzeżenie, kluczowa informacja.
- <br>Przełamanie linii w miejscu wstawienia, bez zaczynania nowego akapitu.
- <hr>Tematyczny podział treści, na przykład zmiana sceny w opowiadaniu albo przejście do innego wątku.
- <pre>Tekst sformatowany wstępnie: zachowuje spacje, tabulatory i przełamania linii dokładnie tak, jak w kodzie.
- <blockquote>Dłuższy cytat z innego źródła, wyświetlany jako osobny blok z wcięciem.
- <div>Uniwersalny kontener blokowy bez znaczenia, do grupowania elementów i stylowania.
- <span>Uniwersalny kontener liniowy bez znaczenia, do stylowania fragmentu tekstu.
- <em>Akcent w zdaniu: słowo, które przy czytaniu na głos wymawia się z naciskiem.
- <b>Przyciąga uwagę do fragmentu tekstu bez nadawania mu większej wagi, np. do słów kluczowych.
- <i>Tekst w innym tonie lub głosie: obce wyrażenia, nazwy łacińskie, myśli bohatera, terminy techniczne.
- <u>Tekst z adnotacją, której nie da się zapisać słowami, najczęściej oznaczenie błędu pisowni.
- <s>Treść, która przestała być aktualna, na przykład stara cena. Przeglądarka ją przekreśla.
- <small>Drobny druk: zastrzeżenia, informacje prawne, prawa autorskie i krótkie dopiski.
- <mark>Wyróżnia fragment tekstu jak zakreślacz, bo jest istotny w bieżącym kontekście.
- <abbr>Skrót lub akronim, z opcjonalnym rozwinięciem w atrybucie title.
- <cite>Tytuł dzieła: książki, artykułu, filmu, piosenki, gry albo programu.
- <code>Fragment kodu komputerowego: nazwa zmiennej, funkcji, znacznika albo pliku, a także krótki listing.
- <kbd>Dane wprowadzane przez użytkownika: klawisze, skróty klawiszowe i polecenia do wpisania.
- <samp>Przykładowy wynik działania programu: komunikat, odpowiedź konsoli albo treść błędu.
- <var>Zmienna we wzorze matematycznym lub w programie, a także symbol zastępczy w poleceniu.
- <sub>Indeks dolny: tekst obniżony i pomniejszony, na przykład we wzorach chemicznych.
- <sup>Indeks górny: tekst podniesiony i pomniejszony, na przykład potęgi i numery przypisów.
- <time>Data, godzina lub czas trwania zapisane czytelnie dla ludzi i jednocześnie zrozumiale dla maszyn.
- <data>Łączy czytelną treść z wartością dla maszyn, na przykład nazwę produktu z jego kodem.
- <q>Krótki cytat wpleciony w zdanie. Cudzysłowy dodaje sama przeglądarka.
- <dfn>Termin definiowany w tym miejscu tekstu, czyli pierwsze, objaśniające użycie pojęcia.
- <bdi>Izoluje fragment tekstu o nieznanym kierunku pisma, np. nazwę użytkownika zapisaną po arabsku.
- <bdo>Wymusza kierunek wyświetlania tekstu, z pominięciem automatycznego algorytmu dwukierunkowego.
- <wbr>Miejsce, w którym przeglądarka może przełamać długie słowo lub ciąg znaków, gdy zabraknie miejsca w linii.
- <ins>Tekst dopisany do dokumentu, na przykład w nowej wersji regulaminu albo w poprawionym artykule.
- <del>Tekst usunięty z dokumentu, pokazany jako przekreślony, żeby zachować historię zmian.
- <ruby>Adnotacje ruby: mały tekst nad znakami, najczęściej wymowa znaków chińskich lub japońskich.
- <rt>Tekst adnotacji w elemencie ruby: wymowa lub znaczenie wyświetlane nad tekstem bazowym.
- <rp>Nawiasy zapasowe wokół adnotacji ruby, widoczne tylko tam, gdzie ruby nie jest obsługiwane.
Listy
Listy wypunktowane, numerowane i listy definicji.
- <ul>Lista wypunktowana, w której kolejność pozycji nie ma znaczenia.
- <ol>Lista numerowana, w której kolejność pozycji ma znaczenie.
- <li>Pojedyncza pozycja listy `<ul>`, `<ol>` lub `<menu>`.
- <dl>Lista opisowa: pary nazwa i opis, na przykład słowniczek pojęć albo dane techniczne.
- <dt>Nazwa, pojęcie lub pytanie w liście opisowej `<dl>`.
- <dd>Opis lub wartość przypisana do nazwy `<dt>` w liście opisowej.
- <menu>Lista poleceń, na przykład pasek narzędzi z przyciskami. Działa jak `<ul>`.
Tabele
Dane w wierszach i kolumnach, z nagłówkami, podpisem i grupami.
- <table>Tabela z danymi ułożonymi w wiersze i kolumny.
- <caption>Tytuł tabeli, umieszczany jako pierwszy element wewnątrz `<table>`.
- <thead>Grupa wierszy z nagłówkami kolumn tabeli.
- <tbody>Główna część tabeli: grupa wierszy z danymi.
- <tfoot>Stopka tabeli: wiersze z podsumowaniem, sumami lub uwagami do kolumn.
- <tr>Wiersz tabeli, który zawiera komórki `<th>` i `<td>`.
- <th>Komórka nagłówkowa tabeli: nazwa kolumny lub wiersza.
- <td>Zwykła komórka tabeli z danymi.
- <colgroup>Grupa kolumn tabeli, którą można ostylować jednym ruchem.
- <col>Jedna lub kilka kolumn w grupie `<colgroup>`, do stylowania całej kolumny naraz.
Formularze
Pola, przyciski, listy wyboru i wszystko, czym użytkownik wysyła dane.
- <form>Formularz, który zbiera dane od użytkownika i wysyła je pod wskazany adres.
- <input>Pole formularza: tekst, e-mail, hasło, liczba, data, suwak, pole wyboru, plik i wiele innych.
- <label>Etykieta pola formularza. Kliknięcie etykiety przenosi kursor do pola.
- <button>Klikalny przycisk: wysyła formularz, czyści go albo uruchamia akcję na stronie.
- <select>Rozwijana lista, z której użytkownik wybiera jedną lub kilka opcji.
- <option>Pojedyncza opcja listy `<select>` albo podpowiedź w `<datalist>`.
- <optgroup>Nazwana grupa opcji wewnątrz listy `<select>`.
- <textarea>Wielowierszowe pole tekstowe na dłuższe wypowiedzi: wiadomości, opinie, opisy.
- <fieldset>Grupa powiązanych pól formularza z ramką i podpisem `<legend>`.
- <legend>Podpis grupy pól `<fieldset>`, wyświetlany na jej ramce.
- <datalist>Lista podpowiedzi dla pola `<input>`. Można wybrać propozycję albo wpisać własną wartość.
- <output>Wynik obliczenia lub działania użytkownika, na przykład suma w kalkulatorze.
- <progress>Pasek postępu zadania: wysyłania pliku, instalacji albo ukończenia kursu.
- <meter>Wskaźnik wartości w znanym zakresie: zajęte miejsce, wynik testu, poziom baterii.
Obrazy i multimedia
Obrazy, grafika, dźwięk, wideo i ich podpisy.
- <img>Obraz osadzony na stronie.
- <picture>Kontener na kilka wersji obrazu. Przeglądarka wybiera tę, która najlepiej pasuje do ekranu i formatu.
- <source>Alternatywne źródło obrazu, dźwięku lub wideo dla `<picture>`, `<audio>` i `<video>`.
- <figure>Samodzielna ilustracja z opcjonalnym podpisem: obraz, wykres, fragment kodu, cytat.
- <figcaption>Podpis ilustracji w elemencie `<figure>`.
- <audio>Odtwarzacz dźwięku: podcast, nagranie lektora, efekt dźwiękowy.
- <video>Odtwarzacz wideo osadzony bezpośrednio na stronie.
- <track>Plik z napisami, opisami lub rozdziałami dla `<video>` i `<audio>`.
- <canvas>Płótno do rysowania grafiki bitmapowej za pomocą JavaScriptu.
- <svg>Grafika wektorowa zapisana bezpośrednio w kodzie strony: ikony, logo, wykresy.
- <map>Mapa odnośników dla obrazu: klikalne obszary zdefiniowane elementami `<area>`.
- <area>Klikalny obszar mapy obrazu: prostokąt, koło lub wielokąt z własnym adresem.
Osadzanie treści
Ramki i obiekty, które wstawiają na stronę inną stronę lub zasób.
Elementy interaktywne
Rozwijane sekcje, okna dialogowe i szablony bez jednej linijki JavaScriptu.
- <details>Rozwijana sekcja: nagłówek `<summary>` widać zawsze, a resztę treści po kliknięciu.
- <summary>Zawsze widoczny nagłówek elementu `<details>`, który rozwija i zwija treść.
- <dialog>Okno dialogowe albo modal: potwierdzenie, formularz lub komunikat nad resztą strony.
- <template>Niewidoczny szablon HTML, który skrypt kopiuje i wstawia na stronę.
- <slot>Miejsce w komponencie webowym, w które trafia treść wpisana między jego znacznikami.
Atrybuty globalne
Atrybuty, które możesz dodać do każdego znacznika: class, id, style, hidden i inne.
- classLista nazw klas, po których CSS i JavaScript odnajdują element.
- idUnikalny identyfikator elementu w całym dokumencie.
- styleStyle CSS wpisane bezpośrednio w element.
- titleDodatkowa informacja o elemencie, zwykle wyświetlana jako dymek.
- langJęzyk treści elementu, na przykład pl albo en.
- dirKierunek tekstu: od lewej do prawej, od prawej do lewej albo automatycznie.
- hiddenUkrywa element: przeglądarka go nie wyświetla i nie odczytuje.
- tabindexDecyduje, czy element da się zaznaczyć klawiszem Tab i w jakiej kolejności.
- data-*Własne atrybuty do przechowywania danych dla skryptów i stylów.
- contenteditablePozwala użytkownikowi edytować treść elementu bezpośrednio na stronie.
- draggableOkreśla, czy element można przeciągać myszą.
- spellcheckWłącza lub wyłącza sprawdzanie pisowni w edytowalnym tekście.
- popoverZamienia element w wyskakujące okienko otwierane przyciskiem, bez JavaScriptu.
- inertWyłącza interakcję z elementem i jego potomkami: klikanie, fokus i czytniki ekranu.
- accesskeySkrót klawiaturowy, który przenosi fokus do elementu albo od razu go aktywuje.
- autofocusUstawia fokus na elemencie od razu po wczytaniu strony albo po otwarciu okna dialogowego.
- autocapitalizeMówi klawiaturze ekranowej, kiedy pisać wielką literą: nigdy, na początku zdania, na początku słowa albo zawsze.
- enterkeyhintZmienia napis lub ikonę klawisza Enter na klawiaturze ekranowej, np. na „Szukaj”, „Wyślij” albo „Dalej”.
- inputmodePodpowiada, jaką klawiaturę ekranową pokazać: z cyframi, z przecinkiem, telefoniczną, do adresu e-mail albo żadną.
- translatePozwala wyłączyć automatyczne tłumaczenie fragmentu strony, na przykład nazwy marki albo kodu.
- roleRola ARIA mówi czytnikom ekranu, czym jest element: przyciskiem, zakładką, komunikatem, nawigacją.
- aria-*Atrybuty ARIA opisują elementy dla czytników ekranu: nadają im nazwy, łączą je z opisami i informują o ich stanie.
- onclickUruchamia kod JavaScript po kliknięciu elementu. Najprostszy, ale nie najlepszy sposób obsługi zdarzeń.
- oninputUruchamia kod JavaScript przy każdej zmianie wartości pola: po wpisaniu znaku, wklejeniu tekstu albo przesunięciu suwaka.
- onchangeUruchamia kod JavaScript, gdy użytkownik zatwierdzi nową wartość pola: wybierze opcję, zaznaczy pole wyboru albo skończy pisać.
- onsubmitUruchamia kod JavaScript tuż przed wysłaniem formularza. Pozwala zatrzymać wysyłkę i obsłużyć dane w skrypcie.
- onkeydownUruchamia kod JavaScript w chwili naciśnięcia klawisza. Służy do skrótów klawiszowych i obsługi klawiszy takich jak Enter czy Escape.
- onloadUruchamia kod JavaScript, gdy zasób skończy się wczytywać: cała strona, obraz, ramka, skrypt albo arkusz stylów.