Pytania rekrutacyjne z zakresu HTML5 — semantyka, formularze, Web Storage, WebSocket, geolokalizacja, Canvas i multimedia. Kliknij pytanie żeby zobaczyć odpowiedź, oznacz ✓ gdy je znasz.
HTML5 jest kolejną ważną wersją standardu HTML zastępującą HTML 4.01, XHTML 1.0 oraz XHTML 1.1. Jest standardem struktury i prezentowania treści na stronach internetowych.
HTML5 wprowadził szereg nowych elementów i atrybutów:
Ostatnie wersje Safari, Chrome, Firefox oraz Opera wspierają wiele funkcji HTML5. Internet Explorer od wersji 9.0 wspiera część funkcji.
Mobilne przeglądarki na urządzeniach iPhone, iPad oraz Android doskonale wspierają HTML5.
Tak! HTML5 został zaprojektowany tak, aby w miarę możliwości być kompatybilny ze starszymi przeglądarkami. Nowe funkcje opierają się na tych istniejących i pozwalają na wyświetlenie awaryjnej zawartości dla starszych przeglądarek. Sugerowanym jest sprawdzenie wsparcia kilkoma linijkami JavaScript.
Nie! HTML jest case-insensitive — <DIV>, <Div> i <div> są równoważne. Jednak dobrą praktyką jest pisanie znaczników małymi literami zgodnie ze standardami W3C.
Znacznik <section> reprezentuje rozdział dokumentu lub sekcję aplikacji. Może być użyty razem ze znacznikami h1–h6, które wskazują strukturę dokumentu.
Znacznik <article> reprezentuje niezależny fragment dokumentu — taki jak wpis na blogu, artykuł w gazecie, komentarz forum. Treść powinna mieć sens samodzielnie, bez kontekstu reszty strony.
Znacznik <aside> reprezentuje fragment zawartości, który jest tylko nieznacznie związany z resztą strony — np. sidebary, cytaty, reklamy. Jego usunięcie nie powinno wpływać na główną treść strony.
Znacznik <header> reprezentuje nagłówek sekcji lub strony. Zazwyczaj zawiera logo, tytuł, nawigację. Może wystąpić wielokrotnie w dokumencie — dla każdej sekcji osobno.
Znacznik <footer> reprezentuje stopkę dla sekcji i może zawierać informacje o autorze, prawach autorskich, linkach do powiązanych dokumentów.
Znacznik <nav> reprezentuje część dokumentu odpowiedzialną za nawigację — zbiór linków do innych stron lub sekcji. Używaj go tylko dla głównych bloków nawigacyjnych.
Znacznik <dialog> reprezentuje okno dialogowe lub inne komponenty interaktywne — np. modale, pop-upy. Obsługuje natywne atrybuty open, show() i close().
Znacznik <figure> używany jest razem z <figcaption> do prezentowania zawartości (obrazek, video, diagram) z opisem. Może być przeniesiony do innego miejsca dokumentu bez wpływu na główny przepływ treści.
Atrybuty niestandardowe rozpoczynają się od data- i pozwalają przechowywać dodatkowe informacje w elementach HTML bez użycia JavaScript. Wartości dostępne są przez dataset lub getAttribute().
Web Forms 2.0 to rozszerzenie funkcji formularzy z HTML4. Elementy formularza i atrybuty w HTML5 wprowadzają większy zakres semantyki oraz usuwają potrzebę pisania długich skryptów do walidacji, które były wymagane w HTML4.
Kontrolka datetime reprezentuje datę i czas (rok, miesiąc, dzień, godzinę, minutę, sekundę oraz ułamki sekund) zgodnie z normą ISO 8601 ze strefą czasową ustawioną na UTC.
Kontrolka datetime-local reprezentuje datę i czas zgodnie z normą ISO 8601 bez uwzględnienia strefy czasowej.
Kontrolka date reprezentuje datę (rok, miesiąc, dzień) zgodnie z normą ISO 8601, bez informacji o czasie.
Kontrolka month reprezentuje datę składającą się z roku i miesiąca zgodnie z normą ISO 8601 — bez dnia.
Kontrolka week reprezentuje datę składającą się z roku i numeru tygodnia zgodnie z normą ISO 8601.
Kontrolka time reprezentuje czas (godziny, minuty, sekundy, ułamki sekund) zgodnie z normą ISO 8601.
Kontrolka number akceptuje jedynie wartości numeryczne. Atrybut określający precyzję ustawiony jest domyślnie na 1. Można ustawić min, max i step.
Typ range renderuje suwak i określa zakres wartości liczbowych, który może być użyty w polu wejściowym. Gdy dokładna wartość nie jest istotna — idealne np. do regulacji głośności.
Kontrolka email akceptuje tylko adresy email. Jeżeli użytkownik wprowadzi zwykły tekst, wyświetli się informacja że wymagany jest adres w formacie email@example.com.
Kontrolka url akceptuje tylko adresy URL. Jeżeli użytkownik wprowadzi zwykły tekst, wyświetli się informacja że wymagany jest adres w formacie http://www.example.com.
Element <output> jest używany do wyświetlania rezultatu różnych operacji — np. wyniku zwróconego przez skrypt JavaScript. Zazwyczaj powiązany jest z formularzem.
Atrybut placeholder wraz z kontrolkami input i textarea wyświetla wskazówkę użytkownikowi co może być wprowadzone w dane pole. Tekst znika po kliknięciu w pole. Nie może zawierać znaków ucieczki.
Atrybut autofocus ustawia fokus na konkretnym elemencie formularza automatycznie po załadowaniu strony — bez potrzeby pisania JavaScript.
Atrybut required wymaga, aby dana kontrolka miała wprowadzoną wartość przed wysłaniem formularza. Walidacja odbywa się po stronie przeglądarki — bez JavaScript.
Tak! HTML5 pozwala na bezpośrednie użycie znacznika <svg> inline w dokumencie HTML. Grafika SVG jest skalowalna, dostępna przez DOM i stylowalna przez CSS.
Tak! HTML5 pozwala na bezpośrednie użycie elementu MathML: <math>…</math>. Pozwala to na wyświetlanie formuł matematycznych bezpośrednio w przeglądarce.
Ciasteczka mają następujące wady:
HTML5 wprowadził sessionStorage — obiekt pozwalający stronom przechowywać dane w sesji. Dane są dostępne dla każdej strony otwartej w tym samym oknie przeglądarki. Jak tylko okno zostanie zamknięte, dane sesji są czyszczone.
HTML5 wprowadził localStorage — obiekt pozwalający na dostęp do lokalnej pamięci bez ograniczeń czasowych. Dane będą dostępne zawsze, niezależnie od zamknięcia okna przeglądarki.
Session Storage Data będą usuwane przez przeglądarkę po zakończeniu sesji — tj. po zamknięciu okna lub karty przeglądarki.
Lokalne przechowywanie danych nie ma ograniczeń czasowych. Aby usunąć konkretny klucz: localStorage.remove('klucz'). Aby wyczyścić całość: localStorage.clear().
HTML5 (WHATWG) wprowadził Server-Sent Events — zdarzenia przepływające z serwera WWW do przeglądarki. Pozwalają na otwarcie stałego połączenia z serwerem i wysyłanie danych do klienta gdy są dostępne, bez konieczności ciągłego odpytywania (polling). SSE standaryzuje strumień danych z serwera do klienta.
Aby korzystać z SSE należy użyć API EventSource. Atrybut src powinien wskazywać na adres URL, który zapewnia stałe połączenie HTTP wysyłające strumień danych.
Web Socket to technologia dwukierunkowej komunikacji dla aplikacji internetowych, działająca na jednym gnieździe, wystawiona przez interfejs JavaScript dla przeglądarek HTML5. Po uzyskaniu połączenia można wysyłać dane metodą send() i odbierać przez zdarzenie onmessage.
Atrybut tylko do odczytu określający stan połączenia WebSocket:
Atrybut tylko do odczytu, określający liczbę bajtów (tekstu UTF-8) umieszczonych w kolejce do wysłania po wywołaniu metody send(). Pozwala sprawdzić czy poprzednia wiadomość została już wysłana przed wysłaniem kolejnej.
Element <canvas> pozwala rysować grafiki 2D i 3D przy użyciu JavaScript. Może być używany do tworzenia wykresów, animacji, gier i edytorów graficznych — bez żadnych wtyczek.
HTML5 wspiera znacznik <audio> do odtwarzania dźwięku bezpośrednio w dokumencie HTML bez wtyczek. Głównie obsługiwane formaty: ogg, mp3, wav. Element pozwala na zastosowanie wielu źródeł — przeglądarka użyje pierwszego obsługiwanego.
HTML5 wspiera znacznik <video> do odtwarzania filmów wideo bez wtyczek. Głównie obsługiwane formaty: ogg, mpeg4 (mp4). Element pozwala na zastosowanie wielu źródeł — przeglądarka użyje pierwszego obsługiwanego.
Geolocation API pozwala stronie (za zgodą użytkownika) uzyskać geograficzną lokalizację urządzenia (szerokość i długość geograficzną). Współpracuje z właściwością obiektu navigator.
Wymaga HTTPS w środowisku produkcyjnym.
Metoda getCurrentPosition(success, error, options) jednorazowo pobiera aktualną pozycję geograficzną użytkownika. Callback success otrzymuje obiekt GeolocationPosition z polami coords.latitude, coords.longitude i coords.accuracy.
Metoda watchPosition(success, error, options) regularnie aktualizuje pozycję użytkownika gdy się zmienia (np. podczas poruszania się). Zwraca identyfikator watcher, który można przekazać do clearWatch() aby zatrzymać śledzenie.
Metoda clearWatch(watchId) odwołuje śledzenie lokalizacji uruchomione przez watchPosition(). Ważne dla oszczędzania baterii na urządzeniach mobilnych.