Powtórka
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>
Jak wstawić artykuł do dokumentu HTML5?
<article>...</article>
W jaki sposób w HTML5 powinno się wstawiać elementy, powiązane tematycznie z artykułem na stronie?
<aside>...</aside>
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>
Jak powinno się wstawiać wprowadzenie w dokumentach HTML5?
<header>...</header>
W jaki sposób oznaczyć stopkę w dokumentach HTML5?
<footer>...</footer>
Jak wstawić na stronie WWW sekcję z linkami nawigacyjnymi?
<nav>...</nav>
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>
W jaki sposób wskazać główną zawartość strony WWW?
<main>...</main>
Jak oznaczyć na stronie formularz wyszukiwania lub filtrowania treści?
<search>...</search>
Jak zaznaczyć lub uwydatnić część tekstu?
<mark>...</mark>
W jaki sposób poprawnie oznaczać datę i czas w dokumentach HTML5?
<time>data/czas</time> <time datetime="data/czas">...</time>
Jak umożliwić przeglądarce przełamanie długiej linii do następnego wiersza?
<wbr>
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>
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>
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>
W jaki sposób dodać autouzupełnianie pola formularza?
<input list="identyfikator"> <datalist id="identyfikator"> <option value="wartość1"> <option value="wartość2"> ... </datalist>
Jak wstawić na stronie WWW pasek postępu?
<progress>alternatywa</progress>
<progress value="współczynnik">alternatywa</progress> <progress value="wartość" max="maksimum">alternatywa</progress>
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>
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>
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>
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">
Jak zablokować przełączanie klawiatury smartfona w tryb automatycznego wstawiania pierwszej litery jako wielkiej?
<element autocapitalize="kapitalizacja">
<element autocapitalize="kapitalizacja">...</element>
W jaki sposób załadować skrypt JavaScript (JS) asynchronicznie, aby nie blokował szybkiego wyświetlania strony WWW?
<script src="lokalizacja" async></script>
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>
W jaki sposób zablokować automatyczne poprawianie błędów pisowni podczas wprowadzania tekstu w wybranych polach formularza HTML na stronie?
<element autocorrect>
<element autocorrect="autokorekta">
<element autocorrect>...</element>
<element autocorrect="autokorekta">...</element>
W jaki sposób wprowadzić kursor tekstowy do wybranego pola formularza automatycznie po załadowaniu strony?
<element autofocus>
<element autofocus>...</element>
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>
Jak HTML5 upraszcza sposób deklarowania strony kodowej umożliwiającej poprawne wyświetlanie znaków diakrytycznych na stronie?
<meta charset="utf-8">
Jak sprawić, aby zawartość dowolnego elementu HTML na stronie WWW można było edytować?
<element contenteditable>...</element>
<element contenteditable="edycja">...</element>
W jaki sposób można identyfikować zalogowanego użytkownika pomiędzy różnymi serwisami?
<audio src="lokalizacja" crossorigin></audio>
<audio src="lokalizacja" crossorigin="uwierzytelnienie"></audio>
<img src="lokalizacja" crossorigin>
<img src="lokalizacja" crossorigin="uwierzytelnienie">
<link href="lokalizacja" crossorigin>
<link href="lokalizacja" crossorigin="uwierzytelnienie">
<script src="lokalizacja" crossorigin></script>
<script src="lokalizacja" crossorigin="uwierzytelnienie"></script>
<video src="lokalizacja" crossorigin></video>
<video src="lokalizacja" crossorigin="uwierzytelnienie"></video>
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>
W jaki sposób nie opóźniać wyświetlania strony podczas ładowania dużych obrazków?
<img src="lokalizacja" decoding="dekodowanie">
W jaki sposób za jednym razem zablokować kilka pól formularza HTML?
<fieldset disabled>...</fieldset>
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">
W jaki sposób zablokować przeciąganie elementów myszką?
<element draggable="przeciąganie">
<element draggable="przeciąganie">...</element>
Co zrobić, żeby na klawiaturze smartfona wyświetlał się inny klawisz Enter - np. z napisem "Idź", "Dalej", "Wyślij" albo ikonka wyszukiwania?
<element enterkeyhint="zatwierdzenie">
<element enterkeyhint="zatwierdzenie">...</element>
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>
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>
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">
W jaki sposób ukryć element na stronie, ale pozwolić wyszukiwać jego treść?
<element hidden>...</element>
<element hidden="stan">...</element>
W jaki sposób zablokować możliwość zaznaczania i wyszukiwanie tekstu w wybranym elemencie na stronie WWW?
<element inert>
<element inert>...</element>
W jaki sposób ustawić typ klawiatury na ekranie smartfona do wpisywania wartości liczbowej, numeru telefonu, adresu URL lub e-mail?
<element inputmode="tryb">
<element inputmode="tryb">...</element>
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">
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>
W jaki sposób zrezygnować ze sprawdzania poprawności wypełniania pól formularza?
<form novalidate>...</form>
Jak zrobić pole formularza do wpisania tekstu w niestandardowym formacie - np. kodu pocztowego?
<input pattern="wzorzec">
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>
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">
W jaki sposób wymusić wypełnienie obowiązkowego (wymaganego) pola w formularzu HTML?
<input type="typ" required>
<select required>...</select>
<textarea required>...</textarea>
Jak ponumerować punkty w kolejności malejącej?
<ol reversed>...</ol>
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>
Jak bez użycia JavaScript wygenerować zawartość ramki lokalnej bez wczytywania do niej żadnej strony?
<iframe srcdoc='kod'></iframe>
<iframe srcdoc="kod"></iframe>
W jaki sposób zablokować sprawdzanie pisowni w wybranych polach formularza HTML na stronie?
<element spellcheck>
<element spellcheck="pisownia">
<element spellcheck>...</element>
<element spellcheck="pisownia">...</element>
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>
Czy w języku HTML da się ustawić rozmiary przycisku obrazkowego do wysyłania formularza?
<input type="image" src="lokalizacja" width="szerokość" height="wysokość">
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>
Komentarze
Comandeer16.02.2022 13:52
Tak, ale to jest by design.
Zobacz więcej
Gość16.02.2022 13:29
Nie działa atrybut autoplay
Zobacz więcej- UszatySiemanko
15.11.2021 11:13
* poradnik dzięki 8) 8) 8) 8) 8) 8)
Zobacz więcej - kiszuriwalilibori
04.01.2018 19:57
Czy tylko u mnie (firefox) Datalist działa w dziwny sposób? Nie wyświetla listy wyboru po wejściu, ale dopiero po wpisaniu znaku, i to nie każdego ale pierwszego, który jest zawarty w polach opcji. A jak nie ma tego znaku to nic nie wyświetla. I nie musi to być pierwszy znak, tylko jakikolwiek...
Zobacz więcej - Michalski Bydgoszcz
27.03.2017 15:36
Aha dzięki pomogłeś, a z tym progress bar sobie podaruję wymyśle coś innego
Zobacz więcej - Comandeer
27.03.2017 15:33
Tylko w JS.
Zobacz więcej - Michalski Bydgoszcz
27.03.2017 15:32
Aha dzięki ogarnąłem jeszcze musze ogarnąć to z <progress> czy jest to możliwe tylko w js czy może także w tym ulepszonym html5 ?
Zobacz więcej - Michalski Bydgoszcz
27.03.2017 15:28
Więc czy muszę wpisać jakich kodeków używa plik lub/czy wystarczy podać format plików???
Zobacz więcej - Comandeer
27.03.2017 15:24
Tam, gdzie będzie iframe, tam będzie odtwarzacz z YT.
Zobacz więcej - Michalski Bydgoszcz
27.03.2017 15:23
Dzięki musiałem coś przeoczyć w samouczku html 5 bo pierwszy raz spotykam się z i frame a może używałem jej poprostu do czego innego i nie pojąłem tego iż można to wykożystać w taki sposób.
Jeśli dobrze pamiętam to wg. Twojego przykładu <i frame ustawia miejsce znajdowania się miniatury video...
Zobacz więcej
