Najpopularniejsze pytania rekrutacyjne z HTML (z odpowiedziami)

Rozmowa o HTML wydaje się najłatwiejsza, więc część kandydatów traktuje ją po macoszemu, a potem gubi się przy pytaniu o semantykę albo dostępność. Poniżej znajdziesz pytania, które wracają na rozmowach na stanowisko juniora, razem z tym, jak na nie odpowiadać. HTML jest fundamentem całego frontendu, więc zwykle po nim padają pytania z CSS i JavaScriptu. Do tych drugich przygotuj się z artykułu o pytaniach rekrutacyjnych z JavaScript, a do pierwszych z artykułu o pytaniach rekrutacyjnych z CSS.

Zachowanie przykładów z tego artykułu sprawdziliśmy w przeglądarce Chromium: trybu przeglądarki zależnego od doctype, etykiet, przycisków w formularzu, walidacji pól i tego, jak parser naprawia błędnie zagnieżdżone tagi. Wyniki w tekście pochodzą z tych uruchomień.

Jak odpowiadać na pytania rekrutacyjne z HTML?

Najlepiej w trzech krokach: jedno zdanie definicji, krótki przykład (kilka linijek kodu albo sytuacja z projektu) i informacja, kiedy to ma znaczenie w praktyce. Taka odpowiedź zajmuje 30–60 sekund i pokazuje, że rozumiesz mechanizm, a nie wkułeś formułkę. Jeśli czegoś nie wiesz, powiedz, co wiesz, i rozumuj na głos. Rekruterzy oceniają sposób myślenia, a nie tylko wynik.

Pytania są ułożone od podstaw do tematów, które częściej pojawiają się przy ofertach na mid-poziom.

Podstawy HTML

Czym jest HTML i czym jest HTML5?

HTML (HyperText Markup Language) to język znaczników, który opisuje strukturę i znaczenie treści na stronie: nagłówki, akapity, linki, obrazy, formularze. To nie jest język programowania, bo nie ma w nim zmiennych ani pętli. HTML5 to nazwa nowszej generacji standardu, która wprowadziła m.in. elementy semantyczne (<header>, <main>, <article>), wbudowane wideo i audio oraz nowe typy pól formularzy. Dziś mówi się po prostu „HTML”, bo standard jest rozwijany na bieżąco.

Jak wygląda podstawowa struktura dokumentu HTML?

<!DOCTYPE html>
<html lang="pl">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Tytuł strony</title>
  </head>
  <body>
    <h1>Nagłówek</h1>
  </body>
</html>

Każda część ma swoje zadanie:

Co się stanie, jeśli pominę DOCTYPE?

Przeglądarka przełączy się w tryb zgodności wstecznej (quirks mode) i będzie renderować stronę według zasad sprzed standaryzacji, np. inaczej liczyć szerokości elementów. W teście w Chromium document.compatMode zwracało CSS1Compat dla strony z <!DOCTYPE html> i BackCompat bez niej. Dlatego doctype zawsze jest pierwszą linią dokumentu.

Czym różni się element blokowy od liniowego?

Element blokowy zaczyna się od nowej linii i domyślnie zajmuje całą dostępną szerokość (np. <div>, <p>, <h1>, <ul>). Element liniowy (inline) mieści się w linii tekstu i zajmuje tylko tyle miejsca, ile potrzebuje jego zawartość (np. <span>, <a>, <strong>). Elementy liniowe ignorują width i height: w naszym teście <span> z width: 200px miał realną szerokość 7 px, czyli tyle, ile zajmował jego tekst. Gdy potrzebujesz mieć wymiary i zostać w linii, używasz display: inline-block.

Czym różni się id od class?

id identyfikuje jeden element na stronie i musi być unikalny. class oznacza grupę elementów i można go użyć wielokrotnie, a jeden element może mieć kilka klas. Przy duplikacie id przeglądarka się nie sypie, ale getElementById zwraca tylko pierwszy pasujący element (w teście 1 z dwóch <span id="x">), więc druga kopia jest „niewidoczna” dla skryptów.

Czym różni się <div> od <span>?

Oba są elementami bez znaczenia (neutralnymi kontenerami). <div> jest blokowy i służy do grupowania większych fragmentów układu, <span> jest liniowy i służy do oznaczenia kawałka tekstu w linii, np. żeby go pokolorować. Jeśli istnieje element semantyczny pasujący do treści (<nav>, <article>, <strong>), wybierz go zamiast <div> lub <span>.

Semantyka i SEO

Czym jest semantyczny HTML i po co się go stosuje?

Semantyczny HTML (semantic HTML) to używanie elementów zgodnie z ich znaczeniem: nagłówek jako <h1>–<h6>, nawigacja jako <nav>, lista jako <ul>, a nie wszystko jako <div> ze stylem. Daje to trzy korzyści: czytniki ekranu rozumieją strukturę strony, wyszukiwarki lepiej interpretują treść, a kod jest czytelniejszy dla zespołu.

Jakie elementy semantyczne trzeba znać i kiedy użyć <section>, a kiedy <article>?

Prosta reguła: jeśli fragment mógłby żyć samodzielnie, np. w czytniku RSS, to <article>. Jeśli tylko porządkuje stronę na tematy, to <section>. Jeśli nie ma ani jednego, ani drugiego sensu i potrzebujesz kontenera pod styl, zostaje <div>.

Jak powinna wyglądać hierarchia nagłówków?

Jeden <h1> na stronie, który opisuje jej temat, a niżej kolejne poziomy bez przeskoków (h2, potem h3, a nie od razu h4). Nagłówków używa się do struktury, a nie do powiększania tekstu: do tego służy CSS. Czytniki ekranu pozwalają użytkownikom nawigować po nagłówkach, więc przeskoki poziomów sprawiają, że strona jest trudna w odbiorze.

Po co jest atrybut alt w obrazku?

Atrybut alt zawiera tekstowy opis obrazu. Pokazuje się, gdy obraz się nie wczyta, czytają go czytniki ekranu, a wyszukiwarki używają go do zrozumienia zawartości obrazu. Dla obrazów dekoracyjnych zostawiasz pusty alt="", żeby czytnik je pominął. Samego atrybutu nie wolno pominąć, bo wtedy czytnik może odczytać nazwę pliku.

<img src="wykres.png" alt="Wykres sprzedaży: wzrost o 20% w drugim kwartale" />
<img src="ozdoba.svg" alt="" />

Formularze

Do czego służy <label> i dlaczego powinien być powiązany z polem?

<label> opisuje pole formularza. Powiązany z polem przez for (z id pola) lub przez zagnieżdżenie, powiększa obszar kliknięcia i jest odczytywany przez czytnik ekranu razem z polem. W teście kliknięcie w <label for="e"> ustawiło fokus na polu o id="e". Sam placeholder nie zastępuje etykiety, bo znika po wpisaniu tekstu.

<label for="email">Adres e-mail</label>
<input id="email" type="email" name="email" required />

Jak działa walidacja formularza w HTML i czy wystarczy?

Przeglądarka sprawdza atrybuty takie jak required, type="email", minlength, pattern i nie pozwala wysłać formularza z błędnymi danymi. W teście checkValidity() zwróciło false dla pustego pola required i dla tekstu zly w polu type="email", a true dla a@b.pl. To jednak tylko wygoda użytkownika. Walidację w HTML da się obejść (np. przez narzędzia deweloperskie), więc dane i tak muszą być sprawdzone na serwerze. Praktyczne podejście do tematu opisujemy w artykule o walidacji formularza w JavaScript.

Czym różni się metoda GET od POST w formularzu?

GET dołącza dane do adresu URL (?q=html) i służy do pobierania lub wyszukiwania, bo wynik można zapisać w zakładce i udostępnić. POST wysyła dane w treści żądania i służy do operacji, które coś zmieniają (rejestracja, zamówienie) oraz do danych, których nie chcemy pokazywać w adresie. Nie oznacza to, że POST jest „bezpieczny”: dane nadal trzeba szyfrować przez HTTPS.

Do czego służy atrybut name w polu formularza?

Wartość name jest kluczem, pod którym dane trafiają do serwera. Pole bez name nie zostanie wysłane razem z formularzem, nawet jeśli ma id i jest wypełnione. id służy do powiązania z <label> i do skryptów, name do wysyłania.

Czym różni się <button> od <input type="submit"> i co robi type="button"?

<button> może zawierać dowolną treść (tekst, ikonę), a <input type="submit"> pokazuje tylko tekst z atrybutu value. Ważniejsze jest zachowanie domyślne: przycisk w formularzu bez atrybutu type jest przyciskiem wysyłającym. W teście przycisk bez type wywołał submit, a z type="button" nie wywołał niczego. Dlatego przycisk, który ma tylko otworzyć okno lub wykonać skrypt, zawsze dostaje type="button".

Jak wybrać odpowiedni typ pola <input>?

Typ pola wpływa na klawiaturę na telefonie, walidację i dostępność: email, tel, number, password, date, url, search. Dobrze dobrany type często zastępuje własny skrypt. Pole „numer telefonu” jako type="tel" pokaże klawiaturę numeryczną, a jako zwykły text nie.

Linki, przyciski i dostępność

Kiedy użyć linku <a>, a kiedy przycisku <button>?

Link prowadzi gdzieś (do innej strony lub fragmentu strony) i ma atrybut href. Przycisk wykonuje akcję na stronie (otwórz menu, wyślij formularz, dodaj do koszyka). Użycie <a href="#"> zamiast przycisku lub <div onclick> zamiast linku to klasyczny błąd: element traci obsługę klawiatury i znaczenie dla czytników ekranu. Jeśli element „wygląda jak przycisk”, ale prowadzi na inną stronę, nadal powinien być linkiem, a wygląd ustawisz w CSS.

Co robi target="_blank" i po co rel="noopener"?

target="_blank" otwiera link w nowej karcie. Dawniej taka strona mogła przez window.opener sterować kartą, z której została otwarta. Dziś nowoczesne przeglądarki domyślnie traktują _blank jak noopener, ale rel="noopener noreferrer" nadal jest częstym nawykiem. Warto dodatkowo uprzedzić użytkownika, że link otworzy nową kartę.

Czym jest dostępność i jak o nią dbać w HTML?

Dostępność (accessibility, a11y) to projektowanie stron tak, żeby mogły z nich korzystać też osoby z niepełnosprawnościami: niewidzące, niesłyszące, używające tylko klawiatury. W HTML zaczyna się od podstaw: semantyczne elementy, alt w obrazkach, etykiety pól, atrybut lang, sensowna kolejność nagłówków i możliwość obsługi strony klawiaturą. Zasada numer jeden dla atrybutów ARIA brzmi: jeśli istnieje natywny element HTML, który robi to samo, użyj go zamiast dodawać role lub aria-* do <div>. Szerzej o tym, jak dostępność wygląda w praktyce i w prawie, mówimy na ścieżce o dostępności.

Do czego służy atrybut tabindex?

tabindex="0" dodaje element do kolejności nawigacji klawiaturą (klawisz Tab), tabindex="-1" pozwala ustawić na nim fokus skryptem, ale nie dodaje go do tej kolejności. Dodatnich wartości (tabindex="3") lepiej unikać, bo psują naturalną kolejność. Elementy, które są natywnie interaktywne (linki, przyciski, pola), nie potrzebują tabindex.

Wydajność i ładowanie

Czym różni się <script async> od <script defer>?

Domyślnie skrypt wstrzymuje parsowanie HTML, dopóki się nie pobierze i nie wykona. Oba atrybuty pobierają skrypt równolegle z parsowaniem, ale różnią się momentem wykonania:

W praktyce defer jest bezpieczniejszym wyborem dla skryptów strony, a async dla narzędzi, które nie zależą od innych skryptów.

Jak wczytywać obrazy wydajnie?

Trzy narzędzia, które warto znać: loading="lazy" odkłada pobranie obrazu do momentu, gdy zbliży się do widocznego obszaru (nie stosuj go dla obrazu widocznego od razu po wejściu na stronę), srcset z sizes pozwalają przeglądarce wybrać plik o odpowiedniej szerokości, a <picture> umożliwia podanie innych źródeł (np. innego kadru lub nowocześniejszego formatu) dla różnych warunków. W każdym obrazku podawaj też width i height, żeby przeglądarka zarezerwowała miejsce i strona nie „skakała” przy ładowaniu.

Po co <meta name="viewport">?

Bez niego telefon renderuje stronę tak, jakby miała szerokość kilkuset pikseli, i pomniejsza ją, żeby zmieściła się na ekranie. Wpis width=device-width, initial-scale=1 mówi, że szerokość strony ma być równa szerokości urządzenia. To podstawa responsywności, a media queries bez niego nie zadziałają tak, jak powinny. Jak je pisać, opisujemy w artykule o media queries w CSS.

Inne pytania, które się powtarzają

Do czego służą atrybuty data-*?

To własne atrybuty, w których możesz zapisać dane powiązane z elementem, np. data-user-id="42". Z poziomu JavaScriptu odczytasz je przez element.dataset: w naszym teście z data-user-id="42" i data-role="admin" powstał obiekt { userId: "42", role: "admin" }. Zwróć uwagę, że nazwa z myślnikiem zamienia się na camelCase. Wartości są zawsze tekstem, więc liczbę trzeba przekonwertować.

Czym są encje HTML i kiedy trzeba ich używać?

Encje to zapis znaków specjalnych, np. < dla <, > dla >, & dla &,   dla niełamliwej spacji. Używasz ich wtedy, gdy znak ma być wyświetlony jako tekst, a nie zinterpretowany jako znacznik. To także podstawa ochrony przed wstrzyknięciem kodu (XSS): dane od użytkownika zawsze trzeba traktować jako tekst, a nie jako HTML.

Czym jest <iframe> i jakie są jego ryzyka?

<iframe> osadza inną stronę wewnątrz bieżącej, np. film z YouTube lub mapę. Osadzona strona działa we własnym kontekście, ale może spowalniać ładowanie i sama zbierać dane o użytkownikach. Dla zewnętrznych treści warto ograniczyć uprawnienia atrybutem sandbox i dodać title, żeby czytniki ekranu wiedziały, co zawiera ramka.

Zadania z kodem i mini-test

Jakie zadania z HTML pojawiają się na rozmowach?

Najczęściej to krótkie zadania typu: „zbuduj semantyczną strukturę prostej strony z nagłówkiem, nawigacją, treścią i stopką”, „napisz formularz kontaktowy z poprawnymi etykietami i walidacją” albo „znajdź błędy w tym fragmencie”. Przy takich zadaniach liczy się nie wygląd, tylko poprawny dobór elementów i atrybutów. Dlatego mów na głos, dlaczego wybierasz dany tag.

Co jest nie tak w tym kodzie? Mini-test na rozgrzewkę

<div>
  <p>Zapisz się:
    <div>
      <input placeholder="E-mail" />
      <button>Wyślij</button>
    </div>
  </p>
  <img src="logo.png" />
  <span id="info">Dziękujemy</span>
  <span id="info">Do zobaczenia</span>
</div>

Są tu co najmniej cztery problemy:

1. <div> wewnątrz <p>. Akapit nie może zawierać elementu blokowego, więc parser zamyka <p> przed <div>. Z <p>a<div>b</div>c</p> powstało w teście <p>a</p><div>b</div>c<p></p>, czyli pusty akapit i tekst „c” poza akapitem.
2. Brak <label>. Samo pole z placeholder nie ma trwałej etykiety, a czytnik ekranu nie wie, czego dotyczy pole.
3. Przycisk bez type. W formularzu domyślnie wysyła dane, więc warto jawnie ustawić type="submit" (albo type="button", jeśli nie ma wysyłać).
4. Brak alt w obrazku i zduplikowane id. alt jest wymagany, a id="info" użyte dwa razy sprawia, że skrypt zobaczy tylko pierwszy element.

Jak przygotować się do rozmowy z HTML?

1. Napisz stronę od zera, bez frameworka. Nagłówek, nawigacja, treść, formularz, stopka: wszystko semantycznie. Porównaj z tym, co zrobiłbyś na <div>ach.
2. Przetestuj stronę klawiaturą. Przejdź całą stronę klawiszem Tab i sprawdź, czy kolejność ma sens i czy widać fokus.
3. Użyj walidatora i narzędzi deweloperskich. Walidator W3C pokaże błędne zagnieżdżenia, a zakładka dostępności w narzędziach przeglądarki — brakujące etykiety i alt.
4. Przećwicz odpowiedzi na głos. Dla każdego pytania z tego artykułu sformułuj w 30 sekund definicję i przykład.

Na czym juniorzy najczęściej tracą punkty?

Nie na trudnych tematach, tylko na trzech drobiazgach, które wychodzą dopiero przy pytaniach uzupełniających:

1. Wszystko jako <div>. Brak semantyki wychodzi od razu przy zadaniu na tablicy. Pokaż, że wiesz, kiedy <nav>, <main> i <button> są lepsze.
2. Mylenie linku z przyciskiem. Odpowiedź „jeden i drugi można kliknąć” kończy temat. Wyjaśnij, że link prowadzi, a przycisk wykonuje akcję, i jak to wpływa na klawiaturę oraz czytniki ekranu.
3. Walidacja tylko w HTML. Powiedz wprost, że to wygoda użytkownika, a nie zabezpieczenie.

Jak brzmi dobra odpowiedź, a jak słaba?

Weźmy pytanie o async i defer:

Ten sam schemat działa przy każdym pytaniu z tego artykułu: definicja, mechanizm, przykład użycia.

Co zrobić, gdy nie znasz odpowiedzi?

Nie zgaduj i nie milcz. Powiedz, co wiesz na pewno, a potem rozumuj na głos, np.: „Nie pamiętam, czy ten element jest blokowy, ale wiem, że mogę to sprawdzić w narzędziach deweloperskich po jego domyślnym display.” Taka odpowiedź pokazuje, że potrafisz sobie poradzić w pracy, a umiejętność znalezienia odpowiedzi jest w codziennej pracy ważniejsza niż pamięć do szczegółów.

Jeśli dopiero planujesz ścieżkę nauki, HTML opanujesz najszybciej, budując prawdziwe strony razem z CSS i JavaScriptem. W naszym programie robisz to na ścieżce nauki frontendu z mentorem. Ogólny przebieg całego procesu rekrutacji opisujemy w poradniku jak przygotować się do rekrutacji na juniora.