Sprawdź, czy pamiętasz, za co odpowiadają poniższe fragmenty kodu źródłowego HTML. W razie wątpliwości kliknij odnośnik "Zobacz więcej..." pod wybraną grupą przykładów.

Jak podzielić tematycznie obszerniejsze fragmenty dokumentu HTML5?

<section>...</section>

Zobacz więcej...

Jak wstawić artykuł do dokumentu HTML5?

<article>...</article>

Zobacz więcej...

W jaki sposób w HTML5 powinno się wstawiać elementy, powiązane tematycznie z artykułem na stronie?

<aside>...</aside>

Zobacz więcej...

W jaki sposób poprawnie wstawić do dokumentu podtytuł?

<hgroup>
	<h1>tytuł</h1>
	<p>podtytuł</p>
</hgroup>

<hgroup>
	<h2>tytuł</h2>
	<p>podtytuł</p>
</hgroup>

<hgroup>
	<h3>tytuł</h3>
	<p>podtytuł</p>
</hgroup>

<hgroup>
	<h4>tytuł</h4>
	<p>podtytuł</p>
</hgroup>

<hgroup>
	<h5>tytuł</h5>
	<p>podtytuł</p>
</hgroup>

<hgroup>
	<h6>tytuł</h6>
	<p>podtytuł</p>
</hgroup>

Zobacz więcej...

Jak powinno się wstawiać wprowadzenie w dokumentach HTML5?

<header>...</header>

Zobacz więcej...

W jaki sposób oznaczyć stopkę w dokumentach HTML5?

<footer>...</footer>

Zobacz więcej...

Jak wstawić na stronie WWW sekcję z linkami nawigacyjnymi?

<nav>...</nav>

Zobacz więcej...

W jaki sposób oznaczyć w HTML5: ilustrację, diagram, zdjęcie, kod źródłowy, rysunek, rycinę, wykres, załącznik?

<figure>...</figure>

<figure>
	<figcaption>...</figcaption>
</figure>

Zobacz więcej...

W jaki sposób wskazać główną zawartość strony WWW?

<main>...</main>

Zobacz więcej...

Jak oznaczyć na stronie formularz wyszukiwania lub filtrowania treści?

<search>...</search>

Zobacz więcej...

Jak zaznaczyć lub uwydatnić część tekstu?

<mark>...</mark>

Zobacz więcej...

W jaki sposób poprawnie oznaczać datę i czas w dokumentach HTML5?

<time>data/czas</time>
<time datetime="data/czas">...</time>

Zobacz więcej...

Jak umożliwić przeglądarce przełamanie długiej linii do następnego wiersza?

<wbr>

Zobacz więcej...

W jaki sposób wstawić na stronie internetowej obrazek (grafikę, zdjęcie, fotografię, ilustrację), który automatycznie dopasowuje się do wielkości ekranu?

<picture>
	<source srcset="lokalizacja pliku w formacie 1" type="format 1">
	<source srcset="lokalizacja pliku w formacie 2" type="format 2">
	(...)
	<img src="lokalizacja pliku w formacie podstawowym" alt="Tekst alternatywny">
</picture>

<picture>
	<source srcset="lokalizacja pliku 1" media="zapytanie mediów 1">
	<source srcset="lokalizacja pliku 2" media="zapytanie mediów 2">
	(...)
	<img src="lokalizacja pliku podstawowego" alt="Tekst alternatywny">
</picture>

Zobacz więcej...

W jaki sposób wstawić odtwarzacz filmów wideo lub muzyki audio na stronie internetowej?

<video src="lokalizacja pliku">Treść alternatywna</video>

<audio src="lokalizacja pliku">Treść alternatywna</audio>

<video>
	<source src="lokalizacja pliku w formacie 1" type='format 1'>
	<source src="lokalizacja pliku w formacie 2" type='format 2'>
	(...)
	Treść alternatywna
</video>

<audio>
	<source src="lokalizacja pliku w formacie 1" type='format 1'>
	<source src="lokalizacja pliku w formacie 2" type='format 2'>
	(...)
	Treść alternatywna
</audio>

Zobacz więcej...

Jak dodać napisy (ścieżkę tekstową) do filmu wideo?

<video>
	<source src="lokalizacja pliku w formacie 1" type='format 1'>
	<source src="lokalizacja pliku w formacie 2" type='format 2'>
	(...)
	<track src="napisy.vtt" default>
	(...)
	Treść alternatywna
</video>

Zobacz więcej...

W jaki sposób dodać autouzupełnianie pola formularza?

<input list="identyfikator">
<datalist id="identyfikator">
	<option value="wartość1">
	<option value="wartość2">
	...
</datalist>

Zobacz więcej...

Jak wstawić na stronie WWW pasek postępu?

<progress>alternatywa</progress>

<progress value="współczynnik">alternatywa</progress>
<progress value="wartość" max="maksimum">alternatywa</progress>

Zobacz więcej...

Jak wstawić na stronie WWW pasek głosowania w ankiecie?

<meter value="współczynnik">alternatywa</meter>

<meter value="wartość" min="minimum" max="maksimum">alternatywa</meter>

<meter value="współczynnik" low="niski" high="wysoki">alternatywa</meter>
<meter value="wartość" min="minimum" max="maksimum" low="niska" high="wysoka">alternatywa</meter>

<meter value="współczynnik" low="niski" high="wysoki" optimum="optymalny">alternatywa</meter>
<meter value="wartość" min="minimum" max="maksimum" low="niska" high="wysoka" optimum="optymalna">alternatywa</meter>

Zobacz więcej...

Co zrobić, aby wstawić na stronę panel, otwierany po kliknięciu myszką?

<details>
	<summary>nagłówek</summary>
	...
</details>

<details open>
	<summary>nagłówek</summary>
	...
</details>

Zobacz więcej...

Jak wstawić na stronie WWW pole (kontrolkę) formularza służącą do wyboru: koloru, daty, czasu, tygodnia roku, adresu e-mail, wartości liczbowej, przedziału (zakresu) liczb, numeru telefonu, adresu strony (URL) czy pole wyszukiwania?

<input type="typ">

<input type="typ" min="minimum" max="maksimum" step="krok">

<input type="typ" multiple>

Zobacz więcej...

W jaki sposób przyspieszyć ładowanie zewnętrznych zasobów (plików): zdjęć, filmów wideo, dźwięku audio, arkuszy stylów CSS, czcionek, skryptów?

<link rel="preload" as="rodzaj" type="typ" href="lokalizacja">

Zobacz więcej...

W jaki sposób przyspieszyć ładowanie zewnętrznych zasobów (plików): zdjęć, filmów wideo, dźwięku audio, arkuszy stylów CSS, czcionek, skryptów?

<input type="typ" autocapitalize="kapitalizacja">

<textarea autocapitalize="kapitalizacja">...</textarea>

<element contenteditable="true" autocapitalize="kapitalizacja">...</element>

Zobacz więcej...

W jaki sposób załadować skrypt JavaScript (JS) asynchronicznie, aby nie blokował szybkiego wyświetlania strony WWW?

<script src="lokalizacja" async></script>

Zobacz więcej...

Jak zabezpieczyć formularz internetowy przed wyciekiem (ujawnieniem) danych osobowych?

<form autocomplete="autouzupełnianie">...</form>

<input type="typ" autocomplete="autouzupełnianie">

<select autocomplete="autouzupełnianie">...</select>

<textarea autocomplete="autouzupełnianie">...</textarea>

Zobacz więcej...

W jaki sposób wprowadzić kursor tekstowy do wybranego pola formularza automatycznie po załadowaniu strony?

<element autofocus>

<element autofocus>...</element>

Zobacz więcej...

W jaki sposób załadować skrypt JavaScript (JS) asynchronicznie, ale zatrzymać wyświetlanie (renderowanie) strony, dopóki nie skończy on generować dynamicznej zawartości?

<link rel="stylesheet" href="style.css" blocking="render">

<script blocking="render"></script>

<style blocking="render">...</style>

Zobacz więcej...

Jak HTML5 upraszcza sposób deklarowania strony kodowej umożliwiającej poprawne wyświetlanie znaków diakrytycznych na stronie?

<meta charset="utf-8">

Zobacz więcej...

Jak sprawić, aby zawartość dowolnego elementu HTML na stronie WWW można było edytować?

<element contenteditable>...</element>

<element contenteditable="edycja">...</element>

Zobacz więcej...

W jaki sposób można identyfikować zalogowanego użytkownika pomiędzy różnymi serwisami?

<audio src="lokalizacja" crossorigin="uwierzytelnienie"></audio>

<img src="lokalizacja" crossorigin="uwierzytelnienie">

<link href="lokalizacja" crossorigin="uwierzytelnienie">

<script src="lokalizacja" crossorigin="uwierzytelnienie"></script>

<video src="lokalizacja" crossorigin="uwierzytelnienie"></video>

Zobacz więcej...

Jak dodać do dowolnego znacznika HTML własny, niestandardowy atrybut?

<element data-nazwa>

<element data-nazwa="wartość">

<element data-nazwa>...</element>

<element data-nazwa="wartość">...</element>

Zobacz więcej...

W jaki sposób nie opóźniać wyświetlania strony podczas ładowania dużych obrazków?

<img src="lokalizacja" decoding="dekodowanie">

Zobacz więcej...

W jaki sposób za jednym razem zablokować kilka pól formularza HTML?

<fieldset disabled>...</fieldset>

Zobacz więcej...

Jak wymusić pobranie pliku na dysk po kliknięciu linka (odnośnika hipertekstowego)?

<a href="lokalizacja" download>...</a>

<a href="lokalizacja" download="nazwa">...</a>

<area href="lokalizacja" download>

<area href="lokalizacja" download="nazwa">

Zobacz więcej...

W jaki sposób zablokować przeciąganie elementów myszką?

<element draggable="przeciąganie">

<element draggable="przeciąganie">...</element>

Zobacz więcej...

Co zrobić, żeby na klawiaturze smartfona wyświetlał się inny klawisz Enter - np. z napisem "Idź", "Dalej", "Wyślij" albo ikonka wyszukiwania?

<input type="typ" enterkeyhint="zatwierdzenie">

<textarea enterkeyhint="zatwierdzenie">...</textarea>

<element contenteditable="true" enterkeyhint="zatwierdzenie">...</element>

Zobacz więcej...

Jak zapewnić szybsze ładowanie krytycznych zasobów (obrazków, arkuszy stylów, skryptów) osadzonych na stronie?

<img src="lokalizacja" fetchpriority="priorytet">

<link href="lokalizacja" fetchpriority="priorytet">

<script src="lokalizacja" fetchpriority="priorytet"></script>

Zobacz więcej...

Czy można umieszczać pola (kontrolki) poza znacznikiem formularza?

<button form="identyfikator">...</button>

<fieldset form="identyfikator">...</fieldset>

<input form="identyfikator">

<object form="identyfikator"></object>

<output form="identyfikator">...</output>

<select form="identyfikator">...</select>

<textarea form="identyfikator">...</textarea>

Zobacz więcej...

W jaki sposób zbudować formularz HTML, który zostanie wysłany pod inny adres, w zależności który przycisk użytkownik kliknie?

<button formaction="akcja">...</button>

<button formenctype="kodowanie">...</button>

<button formmethod="metoda">...</button>

<button formnovalidate>...</button>

<button formtarget="cel">...</button>

<input type="typ" formaction="akcja">

<input type="typ" formenctype="kodowanie">

<input type="typ" formmethod="metoda">

<input type="typ" formnovalidate>

<input type="typ" formtarget="cel">

Zobacz więcej...

W jaki sposób ukryć element na stronie, ale pozwolić wyszukiwać jego treść?

<element hidden>...</element>

<element hidden="stan">...</element>

Zobacz więcej...

W jaki sposób zablokować możliwość zaznaczania i wyszukiwanie tekstu w wybranym elemencie na stronie WWW?

<element inert>

<element inert>...</element>

Zobacz więcej...

W jaki sposób ustawić typ klawiatury na ekranie smartfona do wpisywania wartości liczbowej, numeru telefonu, adresu URL lub e-mail?

<input inputmode="tryb">

<textarea inputmode="tryb">...</textarea>

<element contenteditable="true" inputmode="tryb">...</element>

Zobacz więcej...

Co zrobić, żeby obrazki na stronie były ładowane dopiero, kiedy użytkownik przewinie stronę w ich pobliże?

<iframe src="lokalizacja" loading="tryb"></iframe>

<img src="lokalizacja" loading="tryb">

Zobacz więcej...

Jak wymusić wpisanie w formularzu tekstu przynajmniej o podanej długości? Jak zabezpieczyć się przed wprowadzeniem zbyt długiego tekstu?

<input minlength="minimum" maxlength="maksimum">

<textarea minlength="minimum" maxlength="maksimum">...</textarea>

Zobacz więcej...

W jaki sposób zrezygnować ze sprawdzania poprawności wypełniania pól formularza?

<form novalidate>...</form>

Zobacz więcej...

Jak zrobić pole formularza do wpisania tekstu w niestandardowym formacie - np. kodu pocztowego?

<input pattern="wzorzec">

Zobacz więcej...

Jak umieścić podpowiedź w polu formularza HTML w postaci szarego tekstu, który zniknie po rozpoczęciu wprowadzania danych?

<input placeholder="podpowiedź">

<textarea placeholder="podpowiedź">...</textarea>

Zobacz więcej...

Jak w języku HTML otworzyć wyskakujące okienko na warstwie ponad zawartością strony bez użycia JavaScript?

<element id="identyfikator" popover>
	...
	<button type="button" popovertarget="identyfikator" popovertargetaction="hide">Zamknij</button>
</element>
<button type="button" popovertarget="identyfikator">Otwórz/Zamknij</button>

<element id="identyfikator" popover="tryb">...</element>
<button type="button" popovertarget="identyfikator" popovertargetaction="akcja">...</button>

<element id="identyfikator" popover>
	...
	<input type="button" value="Zamknij" popovertarget="identyfikator" popovertargetaction="hide">
</element>
<input type="button" value="Otwórz/Zamknij" popovertarget="identyfikator" popovertargetaction="akcja">

<element id="identyfikator" popover="tryb">...</element>
<input type="button" value="..." popovertarget="identyfikator" popovertargetaction="akcja">

Zobacz więcej...

W jaki sposób wymusić wypełnienie obowiązkowego (wymaganego) pola w formularzu HTML?

<input type="typ" required>

<select required>...</select>

<textarea required>...</textarea>

Zobacz więcej...

Jak ponumerować punkty w kolejności malejącej?

<ol reversed>...</ol>

Zobacz więcej...

Jak zabezpieczyć zewnętrzne widżety (ramki lokalne), aby nie mogły zainstalować wirusa czy konia trojańskiego użytkownikom naszego serwisu ani wyłudzać od nich danych?

<iframe sandbox></iframe>

<iframe sandbox="pozwolenia"></iframe>

Zobacz więcej...

Jak bez użycia JavaScript wygenerować zawartość ramki lokalnej bez wczytywania do niej żadnej strony?

<iframe srcdoc='kod'></iframe>

<iframe srcdoc="kod"></iframe>

Zobacz więcej...

W jaki sposób zablokować sprawdzanie pisowni w wybranych polach formularza HTML na stronie?

<input spellcheck>

<input spellcheck="pisownia">

<textarea spellcheck>...</textarea>

<textarea spellcheck="pisownia">...</textarea>

<element contenteditable="true" spellcheck>...</element>

<element contenteditable="true" spellcheck="pisownia">...</element>

Zobacz więcej...

W jaki sposób zablokować automatyczne tłumaczenie wybranych fragmentów strony WWW na inne języki?

<element translate>...</element>

<element translate="tłumaczenie">...</element>

Zobacz więcej...

Czy w języku HTML da się ustawić rozmiary przycisku obrazkowego do wysyłania formularza?

<input type="image" src="lokalizacja" width="szerokość" height="wysokość">

Zobacz więcej...

W jaki sposób wymusić wysłanie tekstu dokładnie w taki sposób, jak wyglądał podczas wypełniania formularza HTML?

<textarea wrap="zawijanie">...</textarea>

Zobacz więcej...