Która z przedstawionych grup znaczników HTML zawiera wyłącznie elementy puste (void), które nie mają znacznika zamykającego?
A.
<br>, <img>, <hr>B.
<div>, <article>, <header>C.
<span>, <strong>, <em>D.
<table>, <tr>, <td>Elementy <br>, <img> i <hr> należą do tzw. elementów pustych, czyli void elements w HTML. Oznacza to, że nie mają zawartości tekstowej ani innych elementów wewnątrz siebie, więc nie zapisuje się dla nich znacznika zamykającego. W praktyce piszemy po prostu <br>, <img src=obraz.jpg alt=Opis obrazu> albo <hr>. Nie powinno się tworzyć konstrukcji typu </img> czy </hr>, bo to jest niezgodne z zasadami HTML. Standard HTML jasno określa listę takich elementów, są tam m.in. br, img, hr, input, meta, link, source czy wbr. Warto też pamiętać o dobrych praktykach: <img> powinien mieć atrybut alt, bo pomaga w dostępności i SEO, a często także width i height, żeby strona mniej skakała podczas ładowania. Moim zdaniem to jest jedna z tych rzeczy, które warto po prostu zapamiętać, bo potem przy walidacji kodu HTML od razu widać różnicę między poprawnym znacznikiem pustym a zwykłym kontenerem.
W tym pytaniu łatwo pomylić element pusty z elementem, który w przykładzie wygląda krótko albo chwilowo nie ma wpisanej treści. W HTML sam fakt, że widzimy tylko znacznik otwierający, nie oznacza jeszcze, że dany element nie ma znacznika zamykającego. Elementy takie jak <table>, <tr> i <td> budują strukturę tabeli. One mają przechowywać inne elementy albo dane komórek, więc nie są elementami pustymi. Co prawda w HTML parser czasem potrafi domyślić się końca niektórych znaczników tabeli, ale to nie robi z nich elementów void. To ważna różnica, trochę podchwytliwa.
Podobnie <span>, <strong> i <em> są elementami tekstowymi używanymi wewnątrz treści. <span> służy zwykle jako neutralny kontener inline, <strong> oznacza mocne wyróżnienie znaczeniowe, a <em> akcent lub nacisk w tekście. Wszystkie mogą zawierać tekst i inne dopuszczalne elementy liniowe, więc normalnie wymagają zamknięcia, na przykład <strong>ważne</strong>. Elementy <div>, <article> i <header> też nie są puste, bo służą do organizowania sekcji dokumentu. <div> jest ogólnym kontenerem, <article> opisuje samodzielną część treści, a <header> nagłówek sekcji lub strony. Typowy błąd myślowy polega tu na kojarzeniu elementów blokowych albo semantycznych z techniczną kategorią void. To są jednak różne pojęcia: semantyka mówi, co element znaczy, a void element mówi, czy może mieć zawartość i znacznik zamykający.
Podobnie <span>, <strong> i <em> są elementami tekstowymi używanymi wewnątrz treści. <span> służy zwykle jako neutralny kontener inline, <strong> oznacza mocne wyróżnienie znaczeniowe, a <em> akcent lub nacisk w tekście. Wszystkie mogą zawierać tekst i inne dopuszczalne elementy liniowe, więc normalnie wymagają zamknięcia, na przykład <strong>ważne</strong>. Elementy <div>, <article> i <header> też nie są puste, bo służą do organizowania sekcji dokumentu. <div> jest ogólnym kontenerem, <article> opisuje samodzielną część treści, a <header> nagłówek sekcji lub strony. Typowy błąd myślowy polega tu na kojarzeniu elementów blokowych albo semantycznych z techniczną kategorią void. To są jednak różne pojęcia: semantyka mówi, co element znaczy, a void element mówi, czy może mieć zawartość i znacznik zamykający.