Fiszki Online HTML5 (Preview)
Darmowy podgląd 17 z 37 dostępnych pytań
Podstawy HTML5
Co oznacza "5" w nazwie HTML5?
5 w nazwie oznacza piątą główną wersję (tzw. Revision) języka HTML, która stanowi istotny krok naprzód w rozwoju standardu wyznaczanego przez W3C (World Wide Web Consortium). HTML5 wprowadza nowe elementy semantyczne, rozszerzone wsparcie dla multimediów (audio, wideo), a także lepsze mechanizmy do tworzenia aplikacji webowych (np. lokalne przechowywanie danych).
Polecane źródła:
↑ Powrót na góręJakie nowe elementy do struktury treści zostały wprowadzone w HTML5?
HTML5 wprowadził szereg nowych elementów semantycznych, m.in.:
<header>– nagłówek strony lub sekcji,<footer>– stopka strony lub sekcji,<nav>– nawigacja,<article>– samodzielna część treści (np. artykuł),<section>– sekcja tematyczna,<aside>– poboczna część treści (np. dodatkowe informacje, reklamy),<main>– zawartość główna strony (kluczowa dla konkretnej podstrony).
Wprowadzono je, by nadać strukturze HTML bardziej semantyczny charakter, co przekłada się na lepszą czytelność kodu i większą dostępność strony.
Polecane źródła:
- HTML5 i CSS3. Nowoczesne projektowanie stron WWW – Książka w Helion (język polski)
- MDN Web Docs – Elementy semantyczne (język polski)
Jaki jest cel deklaracji <!DOCTYPE html>?
Deklaracja <!DOCTYPE html> informuje przeglądarkę, że dokument jest napisany w standardzie HTML5 (lub nowszym). W praktyce:
- Ustawia tryb zgodności w przeglądarce, dzięki czemu nie jest wymuszany tryb quirks (starsze, niestandardowe zachowania renderowania).
- Pomaga zapewnić spójne wyświetlanie zawartości na różnych urządzeniach i w różnych przeglądarkach, zgodnie z najnowszą specyfikacją HTML.
W przeciwieństwie do poprzednich deklaracji DOCTYPE (HTML4, XHTML1), które bywały bardziej rozbudowane i zawierały szczegółowe informacje o DTD (Document Type Definition), w HTML5 wystarczy krótka deklaracja <!DOCTYPE html>.
Polecane źródła:
↑ Powrót na góręElementy semantyczne
Jakie są najczęściej używane elementy semantyczne w HTML5 i co one reprezentują?
<header>Reprezentuje nagłówek strony lub sekcji. Zazwyczaj zawiera logo, tytuł, ewentualnie menu nawigacyjne.<footer>Określa stopkę strony lub sekcji; często pojawiają się tam informacje kontaktowe, prawa autorskie czy linki do innych istotnych treści.<nav>Przeznaczony do głównych bloków nawigacyjnych w obrębie witryny, np. menu.<section>Sekcja tematyczna treści, często dzieląca stronę na logiczne części (np. rozdział, sekcja artykułu).<article>Oznacza niezależny, samodzielny fragment treści (np. artykuł w blogu, wpis w serwisie informacyjnym).<aside>Dodatkowa treść uzupełniająca główny wątek (np. reklamy, ramka z informacjami, linki powiązane).<main>Zawiera główną treść strony, kluczową z punktu widzenia użytkownika i wyszukiwarek.
Wprowadzenie tych elementów pozwala na zdefiniowanie bardziej zrozumiałej struktury dokumentu i wspiera lepsze indeksowanie w wyszukiwarkach. Polecane źródła:
↑ Powrót na góręCzym różnią się elementy takie jak <section>, <article> oraz <aside> od tradycyjnego <div>?
<div>jest ogólnym kontenerem (tzw. generic block-level container), który nie niesie żadnego semantycznego znaczenia.<section>wskazuje na wyraźny podział treści na sekcje, tak aby np. rozdzielać różne tematy w obrębie strony.<article>definiuje odrębny, często samoistny fragment treści, który może być niezależnie powielany lub osadzany (np. w kanałach RSS).<aside>z kolei przechowuje informacje dodatkowe do treści głównej, zwykle o mniejszym znaczeniu.
Semantyczne elementy HTML5 dostarczają przeglądarkom i narzędziom asystującym (np. screen readerom) wskazówek o znaczeniu danego fragmentu kodu. <div> można wciąż używać do grupowania treści, gdy nie istnieje żaden semantycznie bardziej dopasowany element.
Polecane źródła:
Formularze
Jakie nowe typy pól wprowadzono w HTML5 (np. przyjazne dla urządzeń mobilnych)?
HTML5 wprowadził szereg specjalizowanych typów pól formularzy, które ułatwiają i usprawniają interakcję z użytkownikiem, zwłaszcza na urządzeniach mobilnych. Najpopularniejsze to:
type="email"– pole do wprowadzania adresu e-mail, w mobilnych przeglądarkach wyświetla klawiaturę z symbolem @.type="url"– pole przeznaczone do wpisywania adresów URL.type="tel"– pole do wprowadzania numerów telefonów, często pokazuje klawiaturę numeryczną na smartfonach.type="number"– upraszcza wprowadzanie liczb (strzałki góra/dół albo klawiatura numeryczna).type="range"– wyświetla suwak (slider) do wyboru wartości w określonym przedziale.type="date",type="time",type="datetime-local"– pozwalają na wygodny wybór daty i/lub czasu.type="color"– pole do wyboru koloru z palety systemowej.
Te typy ułatwiają walidację danych i poprawiają użyteczność formularzy na różnych urządzeniach.
Polecane źródła:
- MDN Web Docs (pol.) – Typy pól formularzy
- Helion – HTML5 i CSS3. Nowoczesne projektowanie stron WWW (książka)
Do czego służy atrybut required i jak współdziała z walidacją po stronie klienta?
Atrybut required oznacza, że pole formularza nie może pozostać puste. Przeglądarki wspierające HTML5 wyświetlają wbudowany komunikat (np. Proszę wypełnić to pole) w przypadku próby przesłania formularza bez wypełnienia tego pola. Walidacja odbywa się jeszcze przed przesłaniem danych na serwer, co:
- Poprawia wygodę użytkownika, ponieważ natychmiast wie, co należy poprawić.
- Zmniejsza obciążenie serwera przez wychwycenie oczywistych błędów jeszcze na etapie klienta.
Niemniej, nawet korzystając z required, zawsze warto dodać dodatkową walidację po stronie serwera, aby mieć pewność, że dane są poprawne w sytuacji, gdy przeglądarka nie wspiera walidacji HTML5 lub użytkownik ją wyłączył.
Polecane źródła:
↑ Powrót na góręAudio i wideo
Jakie są główne różnice między używaniem elementów <audio> i <video> a korzystaniem np. z wtyczek (takich jak Flash)?
- Natywne wsparcie w przeglądarkach – Elementy
<audio>i<video>są częścią standardu HTML5, dlatego większość współczesnych przeglądarek obsługuje je bez konieczności instalowania dodatkowych wtyczek. - Wyższy poziom bezpieczeństwa – Flash i inne wtyczki plug-in działają często poza pierwotnym mechanizmem zabezpieczeń przeglądarki, co może stwarzać dodatkowe wektory ataków.
- Lepsza wydajność – HTML5 multimedia są zazwyczaj lepiej zoptymalizowane dla urządzeń mobilnych i mogą korzystać między innymi z akceleracji sprzętowej.
- Łatwiejsza integracja z resztą strony – Przy wykorzystaniu
<audio>i<video>łatwiej sterować odtwarzaniem (np. przez JavaScript), stylami CSS czy dostosowywać player do potrzeb aplikacji.
Polecane źródła:
- MDN Web Docs (pol.) – Using HTML5 audio and video
- WebKrytyk – HTML5 Audio & Video vs. Flash (krótki artykuł, pol.)
Jakie formaty wideo są powszechnie obsługiwane przez element <video> i dlaczego często konieczne jest podawanie wielu źródeł?
Najpopularniejsze formaty to:
- MP4 (H.264/AVC) – szeroka kompatybilność w głównych przeglądarkach i na urządzeniach mobilnych.
- WebM (VP8/VP9/AV1) – wspierany w większości nowszych przeglądarek (w tym Chrome, Firefox, Opera i Edge).
- Ogg/Theora – wspomagany głównie przez Firefox i kilka innych projektów open source.
Różnice wynikają z licencji i implementacji kodeków w silnikach przeglądarek. Aby zapewnić jak najszersze wsparcie, twórcy stron często oferują wideo w co najmniej dwóch formatach (np. MP4 i WebM). Przeglądarka odtwarza pierwszy format, który rozpoznaje i obsługuje.
Polecane źródła:
↑ Powrót na góręCanvas i grafika
Jaka jest rola elementu <canvas> w HTML5?
Element <canvas> służy do dynamicznego tworzenia i wyświetlania grafiki rastrowej, rysowanej w locie za pomocą skryptów (najczęściej JavaScript). Zapewnia programistom dużą elastyczność w tworzeniu różnorodnych efektów wizualnych, takich jak:
- wykresy, diagramy, infografiki,
- animacje 2D i 3D,
- edytory graficzne lub gier w przeglądarce.
Nie posiada on wbudowanych narzędzi interfejsu (jak przyciski do odtwarzania wideo) – wszystko trzeba napisać w kodzie JavaScript.
Polecane źródła:
↑ Powrót na góręJaka jest różnica między użyciem <canvas> a <svg> w przypadku grafiki wektorowej czy animacji?
Rodzaj grafiki
<canvas>tworzy grafikę rastrową (bitmapową), czyli zapisywaną jako siatkę pikseli, a wszystkie rysunki generuje się skryptowo. Skalowanie obrazu może prowadzić do utraty jakości.<svg>(Scalable Vector Graphics) to format stricte wektorowy; kształty i krzywe zachowują wysoką jakość przy dowolnym powiększaniu czy pomniejszaniu.
Sposób modyfikacji
- W
<canvas>zmiana obrazu następuje przez ponowne jego narysowanie (nadpisywanie pikseli). - W
<svg>każdy element jest samodzielnym obiektem w DOM – można do niego odwoływać się przez skrypty, zmieniać atrybuty (np. kolor wypełnienia) i stylować go w prosty sposób przy użyciu CSS.
- W
Zastosowanie
<canvas>dobrze sprawdza się w dynamicznych, bardziej zaawansowanych i wydajnych animacjach, grach czy wizualizacjach wymagających niskopoziomowego podejścia.<svg>jest bardziej czytelny w przypadku statycznych (lub lekko interaktywnych) ilustracji i w wektorowych wykresach, gdzie zachowanie skalowalności jest kluczowe.
Polecane źródła:
↑ Powrót na góręTryb offline i mechanizm przechowywania danych
Czym różnią się localStorage i sessionStorage i jak mają się do tradycyjnych ciasteczek (cookies)?
sessionStorage:- Zakres: tylko w obrębie pojedynczej karty/zakładki przeglądarki i sesji (znika po jej zamknięciu).
- Pojemność: zazwyczaj kilka MB na dane (znacznie więcej niż cookies).
- Sposób użycia: dane zapisywane w kluczu-wartości, dostępne wyłącznie z poziomu JavaScript w ramach tej samej domeny.
localStorage:- Zakres: trwałe przechowywanie danych – nie wygasa po zamknięciu sesji; może być usunięte ręcznie przez użytkownika lub w wyniku wyczyszczenia danych przeglądarki.
- Pojemność: podobna do
sessionStorage(kilka megabajtów). - Sposób działania: również klucz-wartość, wspólny dla wszystkich kart/zakładek przeglądarki w obrębie danej domeny.
Tradycyjne ciasteczka (cookies):
- Przeznaczone głównie do przesyłania niewielkich porcji informacji między przeglądarką a serwerem.
- Mają ograniczoną pojemność (zazwyczaj maks. 4 KB).
- Są automatycznie wysyłane w nagłówkach HTTP przy każdym żądaniu do danej domeny.
- Szczególnie istotne przy mechanizmach logowania czy identyfikacji sesji.
Zarówno localStorage, jak i sessionStorage nie są automatycznie przekazywane do serwera w nagłówkach, co często zmniejsza obciążenie sieci (przy dużych ilościach danych).
Polecane źródła:
- MDN Web Docs (pol.) – Window.localStorage i Window.sessionStorage
- W3.org (ang.) – Web Storage (specyfikacja)
Zaawansowane zagadnienia i wydajność
Do czego służy element <picture> i jak pomaga w tworzeniu responsywnych grafik?
Element <picture> pozwala zdefiniować wiele źródeł obrazu, dostosowując je do warunków urządzenia (np. wielkość ekranu, gęstość pikseli, format obsługiwany przez przeglądarkę). Wewnątrz <picture> umieszcza się zwykle kilka elementów <source>, określających różne pliki graficzne oraz warunki ich zastosowania (atrybut media, type):
<picture>
<source srcset="obraz-webp.webp" type="image/webp">
<source srcset="obraz.png" type="image/png">
<img src="obraz.png" alt="Przykładowy obrazek">
</picture>
Dzięki temu można:
- Dostosować rozdzielczość obrazka do ekranu (np. mniejsze pliki dla urządzeń mobilnych).
- Wspierać różne formaty (jak WebP, AVIF) i automatycznie przełączać się na kompatybilny format.
- Zwiększyć wydajność dzięki dostarczaniu użytkownikowi obrazu o optymalnym rozmiarze i jakości.
Polecane źródła:
↑ Powrót na góręDostępność i dobre praktyki
W jaki sposób elementy semantyczne w HTML5 wpływają na poprawę dostępności stron?
- Lepszy kontekst dla czytników ekranu: Elementy takie jak
<header>,<nav>,<main>,<section>,<article>czy<footer>jasno określają, jaką rolę pełni dany fragment strony. - Łatwiejsza nawigacja: Czytniki ekranu mogą skanować dokument według znaczenia semantycznego, co poprawia komfort poruszania się osobom z niepełnosprawnościami wzroku.
- Struktura logiczna: Zamiast używać wyłącznie
<div>do wszystkiego, semantyczne znaczniki pomagają budować hierarchię treści (nagłówki, sekcje, artykuły itp.), co przekłada się na lepszą czytelność i zrozumiałość strony. - Optymalizacja SEO: Choć nie jest to cel stricte dostępnościowy, wyszukiwarki także lepiej interpretują treści w semantycznej strukturze, co sprzyja lepszej widoczności strony.
Polecane źródła:
↑ Powrót na góręJaką rolę pełnią atrybuty aria-* i kiedy należy ich używać?
- Rozszerzenie informacji semantycznych: Accessible Rich Internet Applications (ARIA) to zestaw atrybutów (
aria-label,aria-labelledby,aria-hidden, itd.) służących do informowania czytników ekranu i innych technologii wspomagających o stanie i funkcji elementów. - Dostępność dynamicznych interfejsów: ARIA jest szczególnie ważna w przypadku interfejsów tworzonych za pomocą JavaScript – np. rozwijane menu, modalne okna czy elementy interaktywne, gdzie nie występuje standardowy znacznik HTML.
- Uzupełnienie, nie zastąpienie semantyki: Atrybuty ARIA pomagają, gdy brak jest wbudowanych semantycznych znaczników o odpowiedniej funkcji. Jeśli istnieje semantyczny element HTML (np.
<button>zamiast<div>z nasłuchiwaniem kliknięć), najlepiej skorzystać z niego, a dopiero w razie potrzeby wesprzeć się ARIA.
Polecane źródła:
- WebAIM (ang.) – Using ARIA
- W3.org (ang.) – WAI-ARIA Overview
- MDN Web Docs (pol.) – ARIA: przenośna definicja ról i atrybutów
Podchwytliwe pytania
W jakich sytuacjach wykorzystuje się element <template>?
Reprezentacja treści do dynamicznego wczytania
<template>przechowuje układ HTML (np. fragmenty formularzy, kart, tabel), który można w dowolnym momencie skopiować i osadzić na stronie przy użyciu JavaScript.
Właściwości
- Treść wewnątrz
<template>nie jest renderowana w dokumencie, dopóki nie zostanie sklonowana np. przy pomocydocument.importNode(...)lubtemplate.content.cloneNode(true). - Umożliwia tworzenie wielokrotnych instancji tego samego fragmentu kodu bez duplikowania w głównym DOM.
- Treść wewnątrz
Zastosowania
- Szablony dynamicznych komponentów w aplikacjach SPA.
- Generowanie list/elementów w pętlach (np. tworzenie kart produktu z gotowego szablonu).
- Ułatwia pracę z frameworkami lub nativnym kodem JS bez zewnętrznych bibliotek.
Przykład:
<template id="cardTemplate">
<div class="card">
<h2>Tu będzie tytuł</h2>
<p>Tu będzie opis</p>
</div>
</template>
Polecane źródła:
↑ Powrót na góręJak zapewnić zgodność wsteczną z przeglądarkami, które nie obsługują w pełni funkcji HTML5?
Polifile (polyfills)
- To fragmenty kodu (zwykle JS) symulujące nowe funkcjonalności w starszych przeglądarkach.
- Przykład: HTML5 Shiv / html5shiv Google Code archive (ang.) – pozwala starym IE rozpoznawać nowe elementy HTML5.
Wykrywanie funkcji (Feature detection)
- Użycie bibliotek jak Modernizr w celu sprawdzenia, czy dana funkcja HTML5/JS jest obsługiwana, a jeśli nie – wywołanie metod zastępczych lub polifilów.
Progressive Enhancement (stopniowe ulepszanie)
- Podstawowy (starszy) kod działa w minimalnej wersji przeglądarki, zaś nowsze funkcje (np.
<canvas>,<video>,<header>) pojawiają się wyłącznie w przeglądarkach, które je obsługują.
- Podstawowy (starszy) kod działa w minimalnej wersji przeglądarki, zaś nowsze funkcje (np.
Fallback
- Dla
<video>: oferowanie alternatywnego klipu w formacie obsługiwanym przez starszą przeglądarkę lub statycznego obrazka. - Dla
<canvas>: wyświetlanie komunikatu typu Twoja przeglądarka nie wspiera elementu canvas.
- Dla
Kompilatory/bundlery
- Narzędzia takie jak Babel w przypadku JavaScriptu mogą transpile'ować kod ES6+ do starszego standardu, kompatybilnego ze starszymi przeglądarkami.
Polecane źródła:
- Modernizr (ang.) – Feature detection library
- HTML5 Shiv (ang.) – GitHub
- MDN Web Docs (pol.) – Polifile