Który z poniższych przykładów kodu HTML5 zostanie zakwalifikowany przez walidator HTML jako błędny?
Wybrany fragment jest błędny dla walidatora HTML, ponieważ element style został umieszczony wewnątrz akapitu p. W HTML5 element p ma dość ograniczony model zawartości: powinien zawierać tzw. phrasing content, czyli treść tekstową i elementy „liniowe”, na przykład span, a, img, strong czy em. Element style nie należy do typowej treści akapitu. Służy do definiowania reguł CSS i zgodnie z dobrymi praktykami powinien znajdować się w sekcji head dokumentu albo style powinny być przeniesione do zewnętrznego pliku CSS. Moim zdaniem to jest jeden z tych błędów, które łatwo przeoczyć, bo przeglądarka często „jakoś” to wyrenderuje, ale walidator patrzy na zgodność ze standardem, a nie na to, czy strona przypadkiem wygląda dobrze. Poprawniej byłoby zapisać na przykład: <head><style>.a{color:#F00}</style></head>, a w treści użyć <p class="a">tekst</p>. Jeszcze lepsza praktyka w większym projekcie to plik style.css i podłączenie go przez link rel="stylesheet". Dzięki temu HTML odpowiada za strukturę, a CSS za wygląd, czyli kod jest czystszy i łatwiej go utrzymać.
W tym pytaniu łatwo pomylić błędy składniowe z tym, co po prostu wygląda trochę nietypowo. Sam zapis atrybutu w stylu class= "stl" może wyglądać podejrzanie, bo wiele osób przyzwyczaja się do formy class="stl" bez spacji. Jednak w HTML odstępy wokół znaku równości w atrybutach są dopuszczalne, więc taki kod nadal może przejść walidację. Podobnie obecność dwóch atrybutów, na przykład class i id w jednym znaczniku p, nie jest błędem. To wręcz normalna praktyka: class zwykle służy do stylowania wielu elementów, a id do jednoznacznej identyfikacji jednego elementu w dokumencie, choć oczywiście id musi być unikalne na stronie. Atrybut style także jest poprawny składniowo, nawet jeśli z punktu widzenia dobrych praktyk nie zawsze jest najlepszym wyborem. Inline CSS, czyli style="color: #F00 ", działa i walidator HTML nie uzna go za błąd tylko dlatego, że w wartości jest dodatkowa spacja. Problemem nie jest więc sam CSS ani kolor zapisany jako #F00. Typowy błąd myślowy polega tutaj na uznaniu, że „dziwny wygląd” zapisu oznacza automatycznie niepoprawny HTML. Walidator sprawdza jednak model zawartości elementów i reguły standardu. Element p powinien zawierać treść akapitu, a nie blok definicji stylów. Dlatego to umieszczenie style wewnątrz p jest rzeczywistym naruszeniem zasad, a pozostałe przykłady są składniowo akceptowalne, nawet jeśli w praktyce część z nich można by zapisać ładniej.