Fragment menu <a ...>Rozdział 2</a> Fragment dalej w dokumencie <h1 id="r2" name="sekcja2" class="rozdzial2">Rozdział 2</h1> Na podstawie fragmentu...
Fragment menu <a ...>Rozdział 2</a> Fragment dalej w dokumencie <h1 id="r2" name="sekcja2" class="rozdzial2">Rozdział 2</h1>Na podstawie fragmentu dokumentu HTML, określ co należy wpisać w miejsce kropek w odnośniku w menu, aby przenosił on do rozdziału 2.
A. href = "#r2"
B. href = "#sekcja2"
C. href = "sekcja2"
D. href = "r2"
Pytanie z egzaminu CKE, styczeń 2024 (arkusz EE.09-SG-24.01).
Odpowiednia wartość to href="#r2", ponieważ odnośnik prowadzący do miejsca w tym samym dokumencie korzysta z identyfikatora elementu poprzedzonego znakiem #. W pokazanym fragmencie nagłówek h1 ma atrybut id ustawiony na r2, więc przeglądarka po kliknięciu linku przewinie stronę do elementu o tym identyfikatorze. To jest klasyczny mechanizm kotwic wewnętrznych w HTML i nadal bardzo praktyczny, np. w spisach treści, menu dokumentacji, regulaminach, długich artykułach albo stronach typu one page. Ważne jest to, że href="r2" oznaczałoby raczej próbę przejścia do zasobu o adresie r2, a nie do sekcji na tej samej stronie. Z mojego doświadczenia warto zawsze opierać takie linki na id, bo jest to zgodne ze współczesnymi standardami HTML. Atrybut name był kiedyś używany do kotwic, głównie przy znaczniku a, ale w nowoczesnym kodzie dla sekcji dokumentu używa się id. Dobra praktyka: identyfikator powinien być unikalny w całym dokumencie, czytelny i stabilny, np. r2, rozdzial-2 albo sekcja-opis-produktu.
W tym zadaniu najważniejsze jest rozróżnienie zwykłego adresu URL od odwołania do fragmentu dokumentu. Jeśli w atrybucie href wpisze się samo r2 bez znaku #, przeglądarka potraktuje to jako ścieżkę do innego zasobu, np. pliku lub podstrony o nazwie r2 względem aktualnego adresu. To nie jest mechanizm przewijania do nagłówka na tej samej stronie. Częsty błąd polega właśnie na tym, że ktoś widzi id="r2" i przepisuje samą wartość, zapominając, że w href identyfikator fragmentu musi być poprzedzony kratką.
Warto też uważać na atrybut name="sekcja2". W przedstawionym kodzie znajduje się on przy nagłówku h1, ale współczesne, poprawne podejście do linkowania wewnątrz dokumentu opiera się na atrybucie id. Dawniej name bywał używany do tworzenia kotwic, zwłaszcza w elemencie a, jednak dziś w praktyce branżowej i w nowoczesnym HTML wskazuje się elementy dokumentu przez ich unikalne id. Dlatego href="#sekcja2" wygląda podobnie do poprawnej konstrukcji, bo ma znak #, ale odnosi się do identyfikatora sekcja2, którego w tym fragmencie nie ma. Klasa class="rozdzial2" również nie służy do nawigacji fragmentowej, tylko głównie do stylowania CSS albo wybierania elementów w JavaScript. Moim zdaniem to dobry przykład, gdzie trzeba patrzeć nie tylko na podobne nazwy, ale na semantykę atrybutów.
Warto też uważać na atrybut name="sekcja2". W przedstawionym kodzie znajduje się on przy nagłówku h1, ale współczesne, poprawne podejście do linkowania wewnątrz dokumentu opiera się na atrybucie id. Dawniej name bywał używany do tworzenia kotwic, zwłaszcza w elemencie a, jednak dziś w praktyce branżowej i w nowoczesnym HTML wskazuje się elementy dokumentu przez ich unikalne id. Dlatego href="#sekcja2" wygląda podobnie do poprawnej konstrukcji, bo ma znak #, ale odnosi się do identyfikatora sekcja2, którego w tym fragmencie nie ma. Klasa class="rozdzial2" również nie służy do nawigacji fragmentowej, tylko głównie do stylowania CSS albo wybierania elementów w JavaScript. Moim zdaniem to dobry przykład, gdzie trzeba patrzeć nie tylko na podobne nazwy, ale na semantykę atrybutów.