Pytania rekrutacyjne HTML5

Podstawy HTML5

1. Co oznacza “5” w nazwie 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:

2. Jakie nowe elementy do struktury treści zostały wprowadzone w HTML5?

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:

3. Jaki jest cel deklaracji <!DOCTYPE html>?

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:

4. W jaki sposób HTML5 zapewnia lepszą kompatybilność ze współczesnymi przeglądarkami?

W jaki sposób HTML5 zapewnia lepszą kompatybilność ze współczesnymi przeglądarkami?

HTML5 jest projektowany z myślą o współczesnych standardach i funkcjach przeglądarek, oferując:

Nowe elementy semantyczne – wspierane natywnie przez przeglądarki, co ułatwia parsowanie treści.
Lżejszy DOCTYPE – uniknięcie trybu quirks.
Wbudowane wsparcie dla multimediów – elementy <audio> i <video> eliminują konieczność stosowania zewnętrznych wtyczek typu Flash.
API wspomagające aplikacje webowe – np. mechanizmy offline, Local Storage, Session Storage, geolokalizacja (choć geolokalizacja formalnie pochodzi z osobnej specyfikacji), Web Workers itd.

Dzięki temu programiści mogą liczyć na spójne działanie swoich aplikacji na różnych platformach i w różnych przeglądarkach, które implementują najnowsze standardy.

Polecane źródła:

5. Dlaczego HTML5 uznaje się za bardziej semantyczną wersję w porównaniu z poprzednimi standardami?

Dlaczego HTML5 uznaje się za bardziej semantyczną wersję w porównaniu z poprzednimi standardami?

HTML5 wprowadza liczne elementy, które opisują przeznaczenie fragmentu treści bardziej precyzyjnie niż ogólne <div> czy <span>. Przykładowo, <header> oznacza nagłówek sekcji, a <article> wyznacza samodzielny artykuł. Dzięki temu:

Lepsza czytelność kodu – zarówno dla ludzi (programistów, autorów treści), jak i dla narzędzi automatycznych (np. screen readerów).
Wzmocnienie dostępności (accessibility) – czytniki ekranu i przeglądarki mogą dokładniej interpretować strukturę strony i lepiej prezentować ją osobom z niepełnosprawnościami wzrokowymi.
Poprawa SEO – wyszukiwarki mogą precyzyjniej zrozumieć, które fragmenty zawierają najistotniejsze informacje.

Polecane źródła:

Elementy semantyczne

6. Jakie są najczęściej używane elementy semantyczne w HTML5 i co one reprezentują?

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:

7. Czym różnią się elementy takie jak <section>, <article> oraz <aside> od tradycyjnego <div>?

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:

8. Jakie jest znaczenie elementów <header> i <footer>?

Jakie jest znaczenie elementów `<header>` i `<footer>`?

<header> Oznacza górną sekcję strony lub danej sekcji. Może zawierać logo, tytuł, krótkie wprowadzenie, menu nawigacyjne lub inne istotne elementy nagłówkowe. Jest to miejsce, w którym użytkownik zwykle rozpoczyna interakcję z modułem/usługą na stronie.
<footer> Zazwyczaj pojawia się na dole strony lub sekcji. Umieszczane są tam informacje o prawach autorskich, odnośniki do polityki prywatności, dane kontaktowe, dodatkowe nawigacje lub widgety (np. linki do mediów społecznościowych).

Oba te elementy pomagają w organizacji i standaryzacji układu, jasnym wyróżnieniu obszarów funkcjonalnych oraz poprawiają dostępność strony. Polecane źródła:

9. W jakich sytuacjach najlepiej zastosować element <main>?

W jakich sytuacjach najlepiej zastosować element `<main>`?

Element <main> przydaje się wówczas, gdy chcemy wskazać najważniejszą część zawartości strony lub aplikacji, niepowtarzalną w ramach danego dokumentu.
Zazwyczaj stanowi on rdzeń tego, co użytkownik powinien zobaczyć w głównej części ekranu, z wyłączeniem elementów, które się powtarzają (np. nagłówków, stopek, pasków nawigacyjnych).
Pomaga narzędziom asystującym (np. screen readerom) w szybkim zidentyfikowaniu podstawowej warstwy informacyjnej lub funkcjonalnej, co podnosi poziom dostępności witryny.

Polecane źródła:

Formularze

10. Jakie nowe typy pól wprowadzono w HTML5 (np. przyjazne dla urządzeń mobilnych)?

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:

11. W jaki sposób zapewnić zachowanie wsteczne (fallback) dla przeglądarek, które nie obsługują określonych funkcji formularzy w HTML5?

W jaki sposób zapewnić zachowanie wsteczne (fallback) dla przeglądarek, które nie obsługują określonych funkcji formularzy w HTML5?

Aby formularz prawidłowo działał w przeglądarkach nieobsługujących nowych typów pól czy atrybutów:

Użycie ogólnego typu text: Jeżeli przeglądarka nie rozpoznaje np. type="date", potraktuje je jak type="text".
Atrybuty pattern lub skryptowa walidacja: Można zaimplementować wyrażenie regularne (pattern) lub dodatkowe funkcje JavaScript do walidacji danych.
Biblioteki polyfill: Istnieją tzw. polyfills (skrypty uzupełniające), zapewniające emulację zachowań nowszych funkcji.
Server-side validation: Zawsze należy też potwierdzać poprawność danych po stronie serwera, niezależnie od stanu wsparcia przeglądarki.

Polecane źródła:

12. Do czego służy atrybut required i jak współdziała z walidacją po stronie klienta?

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:

13. Jak HTML5 obsługuje wbudowane komunikaty walidacji?

Jak HTML5 obsługuje wbudowane komunikaty walidacji?

HTML5 posiada mechanizm automatycznej walidacji na poziomie przeglądarki. Przykładami są:

Komunikaty błędów: Gdy pole jest oznaczone jako required i użytkownik nie wypełni go, otrzymuje komunikat w odpowiednim języku interfejsu przeglądarki (np. w języku polskim).
Walidacja typu: Pola takie jak type="email" sprawdzają format wprowadzonego tekstu (czy zawiera znaki @ i domenę).
Właściwości walidacji w API: Elementy formularza mają właściwości jak validity czy metody jak checkValidity(), dające dostęp do szczegółowych informacji o błędach.

Jeśli przeglądarka nie obsługuje mechanizmu walidacji HTML5, można użyć progressive enhancement – czyli zapewnić prostą walidację starszym przeglądarkom poprzez JavaScript lub warstwę serwerową, jednocześnie korzystając z natywnych rozwiązań w nowszych wersjach.

Polecane źródła:

Audio i wideo

14. Jakie są główne różnice między używaniem elementów <audio> i <video> a korzystaniem np. z wtyczek (takich jak Flash)?

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:

15. W jaki sposób zapewnić treści alternatywne (fallback) dla przeglądarek niesupportujących HTML5 multimediów?

W jaki sposób zapewnić treści alternatywne (fallback) dla przeglądarek niesupportujących HTML5 multimediów?

Zawartość pomiędzy znacznikami – Można umieścić tekstową informację dla użytkowników, np.:

   <video controls>
     <source src="film.mp4" type="video/mp4">
     Tutaj wyświetlana jest treść alternatywna – Twoja przeglądarka nie obsługuje wideo HTML5.
   </video>

Dodatkowe formaty – Jeśli przeglądarka nie obsługuje głównego formatu multimediów, można podać alternatywny format, który zostanie użyty automatycznie (np. WebM, Ogg).
Użycie wtyczki jako koła ratunkowego – W rzadkich przypadkach można zaproponować odtwarzacz Flash lub link do bezpośredniego pobrania pliku. Jednakże obecnie Flash jest odradzany ze względu na brak wsparcia i kwestie bezpieczeństwa.

Polecane źródła:

16. Jakie formaty wideo są powszechnie obsługiwane przez element <video> i dlaczego często konieczne jest podawanie wielu źródeł?

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:

17. Jak dostosować kontrolki elementów <audio> lub <video> bez korzystania z domyślnych narzędzi przeglądarki?

Jak dostosować kontrolki elementów `<audio>` lub `<video>` bez korzystania z domyślnych narzędzi przeglądarki?

Ukrycie domyślnych kontrolek – Ustawienie controls="false" (lub ich całkowity brak) powoduje wyświetlanie surowego elementu wideo/audio bez standardowego interfejsu.
Tworzenie własnych kontrolek w HTML/CSS – Można zbudować niestandardowy interfejs (przyciski, paski postępu, głośność) i sterować nim poprzez API odtwarzacza w JavaScript. Przykładowo:

   const video = document.querySelector('video');
   const playButton = document.querySelector('#playButton');

   playButton.addEventListener('click', () => {
     if (video.paused) {
       video.play();
     } else {
       video.pause();
     }
   });

Frameworki i biblioteki – Wiele bibliotek (np. Video.js czy MediaElement.js) oferuje gotowe niestandardowe kontrolki i wsparcie dla różnych przeglądarek.
API HTMLMediaElement – Zarządzanie odtwarzaniem audio/wideo umożliwia m.in. sterowanie czasem, głośnością, pauzą i wznowieniem przy użyciu natywnych metod: play(), pause(), currentTime, volume itd.

Polecane źródła:

Canvas i grafika

18. Jaka jest rola elementu <canvas> w HTML5?

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:

19. W jaki sposób uzyskuje się kontekst rysowania dla elementu <canvas>?

W jaki sposób uzyskuje się kontekst rysowania dla elementu `<canvas>`?

Aby móc rysować w obrębie <canvas>, należy pobrać tzw. kontekst (ang. context). Najczęściej wykorzystywanym kontekstem jest 2D, definiowany w następujący sposób:

<canvas id="myCanvas" width="400" height="300"></canvas>
<script>
  const canvas = document.getElementById('myCanvas');
  const ctx = canvas.getContext('2d');
  // Tutaj można korzystać z metod kontekstu (ctx) do rysowania
</script>

Po uzyskaniu kontekstu 2d można korzystać z szeregu metod (np. fillRect(), strokeRect(), czy drawImage()) umożliwiających tworzenie i modyfikowanie obrazu.

Polecane źródła:

20. Jaka jest różnica między użyciem <canvas> a <svg> w przypadku grafiki wektorowej czy animacji?

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.
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:

21. Jak obsługiwać interakcje użytkownika (np. kliknięcia czy ruchy myszy) w obrębie elementu <canvas>?