KWALIFIKACJA INF3 - TEST WIEDZY NR 3

PYTANIE NR 38.
Przyjrzyj się poniższemu fragmentowi kodu HTML i CSS. Zidentyfikuj, co jest nieprawidłowe w tym kodzie.
<html>
<head>
<style>
body {
  background-color: lightblue;
}
</style>
</head>
<body>

<h1>Hello World</h1>

</body>
</html>
A.
B.
C.
D.
Wyjaśnienie poprawnej odpowiedzi:
Poprawna jest odpowiedź o braku deklaracji <!DOCTYPE html>, ponieważ doctype informuje przeglądarkę o typie dokumentu i pomaga uruchomić tryb standardowy renderowania. Pozostałe elementy (znaczniki HTML oraz reguła CSS ustawiająca tło) są składniowo poprawne.

Pełne wyjaśnienie:

W pokazanym przykładzie struktura dokumentu jest zasadniczo poprawna: znajduje się element <html>, sekcja <head> z osadzonym stylem w <style> oraz sekcja <body> z nagłówkiem.

Problemem jest brak deklaracji typu dokumentu <!DOCTYPE html> na początku pliku. W praktyce webowej doctype jest kluczowy, ponieważ wskazuje przeglądarce, że dokument ma być interpretowany jako HTML5 i ma być renderowany w trybie standardowym. Brak doctype może spowodować przełączenie w quirks mode, czyli tryb zgodności wstecznej, w którym niektóre reguły CSS i sposób obliczania układu mogą zachowywać się inaczej. To często prowadzi do "dziwnych" różnic między przeglądarkami albo do niezgodności z nowoczesnymi założeniami projektu.

Dlaczego pozostałe odpowiedzi są błędne?

  • "Tagi HTML są niepoprawne." — znaczniki w przykładzie są domknięte i ułożone logicznie (head i body wewnątrz html). Nie ma tu błędu składni typu brak zamknięcia czy zła kolejność w sposób uniemożliwiający interpretację.
  • "Kod CSS jest niepoprawny." — reguła body { background-color: lightblue; } jest poprawna składniowo i semantycznie: ustawia kolor tła dla całej strony.
  • "Wszystko jest poprawne." — w kontekście jakości i zgodności renderowania brak doctype jest istotnym brakiem, bo wpływa na sposób interpretacji dokumentu przez przeglądarkę.

Wskazówka egzaminacyjna: jeśli widzisz kompletny szkielet HTML, a mimo to pytanie pyta "co jest nieprawidłowe", sprawdź najpierw elementy bazowe: doctype, poprawne osadzenie stylów/skryptów oraz zamknięcia tagów.

Dodatkowe pytania

Dodatkowe pytania (FAQ):
Deklaracja <!DOCTYPE html> informuje przeglądarkę, że dokument ma być traktowany jako HTML5 i renderowany w trybie standardowym. Jej brak może uruchomić tryb zgodności wstecznej (quirks mode), co czasem zmienia interpretację CSS i układu strony.
Bez doctype przeglądarka może przełączyć się w quirks mode, gdzie niektóre zasady obliczania wymiarów i marginesów działają "historycznie". W efekcie layout może wyglądać inaczej niż w trybie standardowym, nawet jeśli same reguły CSS są poprawne.
Nie musi być całkowicie "nie do uruchomienia", bo przeglądarki zwykle i tak go wyświetlą. Jednak brak doctype jest istotnym brakiem jakościowym: zwiększa ryzyko quirks mode i problemów zgodności. Na egzaminie traktuje się to jako błąd w konstrukcji dokumentu.
<!DOCTYPE html> umieszcza się na samym początku pliku HTML, przed znacznikiem <html>. Dzięki temu przeglądarka od razu wie, w jakim trybie interpretować dokument i nie musi "zgadywać" na podstawie dalszej zawartości.
Typowe objawy to nietypowe różnice w układzie (np. szerokości, marginesy) między przeglądarkami albo zachowanie odbiegające od nowoczesnych standardów. Technicznie można to też sprawdzić w narzędziach deweloperskich przeglądarki lub przez właściwości dokumentu w konsoli.
Tak, osadzony arkusz stylów w <style> wewnątrz <head> jest poprawnym sposobem dodania CSS do dokumentu. To częste w krótkich przykładach i zadaniach egzaminacyjnych, choć w projektach produkcyjnych często stosuje się też zewnętrzne pliki CSS.
Najczęściej pojawiają się: brak <!DOCTYPE html>, niepoprawne domknięcia znaczników, zła kolejność elementów (np. treść w <head>), mieszanie HTML i CSS w niewłaściwym miejscu oraz literówki w nazwach atrybutów. Warto sprawdzać te elementy w pierwszej kolejności.
Możesz użyć walidatora HTML (np. W3C Validator) oraz sprawdzić konsolę w narzędziach deweloperskich przeglądarki. Walidator wskaże błędy i ostrzeżenia, a przeglądarka pokaże problemy wykonania. Dodatkowo zawsze upewnij się, że masz <!DOCTYPE html>.
Zwykle chodzi o błędy składniowe: brak zamknięcia znacznika, złe zagnieżdżenie (np. <body> w <head>), brak wymaganych elementów lub literówki w nazwach tagów. W pokazanym przykładzie znaczniki są ułożone poprawnie, więc taka odpowiedź byłaby zbyt ogólna.
W typowym minimalnym szkielecie HTML5 znajdziesz: <!DOCTYPE html>, element <html>, sekcję <head> (często z <meta charset="utf-8"> i tytułem) oraz sekcję <body> z treścią strony. To baza do dalszej rozbudowy.
info

Statystycznie 55% uczniów zna prawidłową odpowiedź. średnie

W praktyce zawodowej kluczowe jest to, że poprawna jest odpowiedź o braku deklaracji &lt;!DOCTYPE html&gt;, ponieważ doctype informuje przeglądarkę o typie dokumentu i pomaga uruchomić tryb standardowy renderowania.

Źródła:

  • MDN Web Docs: "&lt;!DOCTYPE&gt;" – opis i znaczenie deklaracji dokumentu, https://developer.mozilla.org/en-US/docs/Glossary/Doctype (dostęp: 2026-02-27)
  • MDN Web Docs: "Quirks Mode and Standards Mode" – omówienie trybów renderowania, https://developer.mozilla.org/en-US/docs/Web/HTML/Quirks_Mode_and_Standards_Mode (dostęp: 2026-02-27)
  • WHATWG HTML Living Standard: sekcje dot. dokumentu i doctype, https://html.spec.whatwg.org/multipage/syntax.html#the-doctype (dostęp: 2026-02-27)

Materiały:

  • Dokumentacja MDN dotycząca deklaracji &lt;!DOCTYPE&gt; i trybów renderowania
  • Specyfikacja HTML (WHATWG) w zakresie dokumentu i doctype
  • Ćwiczenia z walidatorem HTML (sprawdzanie ostrzeżeń i błędów)

Aktualizacja pytania: 31.03.2026



Aktualizacja pytania: 31.03.2026
📡 Brak połączenia internetowego