Który znacznik HTML jest elementem liniowym (śródliniowym)?
A.
<p>
B.
<div>
C.
<span>
D.
<h1>
Element <span> jest typowym elementem śródliniowym, czyli takim, który domyślnie nie zaczyna nowej linii i zajmuje tylko tyle miejsca, ile potrzebuje jego zawartość. W praktyce używa się go do oznaczania małego fragmentu tekstu wewnątrz większego bloku, na przykład jednego słowa w akapicie, fragmentu ceny, etykiety albo kawałka tekstu, który ma dostać inną klasę CSS. Przykład: w zdaniu można objąć jedno słowo znacznikiem <span> i nadać mu kolor przez CSS, bez psucia układu całego akapitu. Zgodnie z podejściem HTML5 <span> należy traktować jako neutralny element frazujący, czyli nie niesie sam z siebie znaczenia semantycznego, tylko pomaga grupować treść. Moim zdaniem to jeden z tych znaczników, które łatwo nadużyć, więc dobra praktyka jest taka: jeśli istnieje bardziej semantyczny element, np. <strong>, <em> albo <mark>, lepiej użyć jego. <span> zostawiamy raczej do stylowania lub obsługi skryptami, gdy nie ma lepszego znacznika.
W tym pytaniu łatwo pomylić wygląd elementu z jego rolą w strukturze dokumentu. <p>, <div> i <h1> są domyślnie elementami blokowymi, czyli w typowym renderowaniu przeglądarki zaczynają się od nowej linii i zajmują całą dostępną szerokość kontenera. <p> służy do tworzenia akapitów tekstu, więc naturalnie buduje większy blok treści. <div> jest ogólnym kontenerem blokowym, często używanym do układu strony, grupowania sekcji, kart, paneli czy wrapperów. <h1> to nagłówek najwyższego poziomu, ważny semantycznie dla struktury dokumentu, dostępności i SEO, a nie drobny fragment tekstu w środku zdania. Typowy błąd polega na tym, że ktoś patrzy tylko na to, że każdy znacznik można ostylować CSS-em. Faktycznie, przez display: inline da się zmienić sposób wyświetlania <div> czy <h1>, ale to nie zmienia ich pierwotnego przeznaczenia semantycznego w HTML. Standardowo elementem śródliniowym jest <span>, ponieważ służy do pracy na małym fragmencie treści wewnątrz tekstu. W dobrym kodzie HTML warto rozdzielać semantykę od wyglądu: HTML opisuje znaczenie i strukturę, CSS odpowiada za prezentację. To niby podstawy, ale w realnych projektach bardzo często właśnie tutaj robi się bałagan.