Pytanie dotyczy tego, co walidator HTML5 uzna za błąd struktury, czyli naruszenie reguł zagnieżdżania elementów (modelu treści). W HTML element <p> (akapit) ma ściśle określone, jakie elementy mogą być jego potomkami: zasadniczo ma przenosić treść tekstową i elementy "frasowe" (używane wewnątrz zdań).
Odpowiedź z fragmentem <p class="stl"><style>...</style>tekst</p> jest błędna, ponieważ wstawia <style> jako dziecko akapitu. Element <style> służy do definiowania reguł CSS i nie jest zwykłą treścią tekstową akapitu. To narusza model treści <p>, więc walidator (w typowej konfiguracji sprawdzania poprawności HTML) wskaże błąd.
Pozostałe trzy odpowiedzi są poprawnymi fragmentami HTML z punktu widzenia walidacji, bo:
- Wariant z id używa atrybutu globalnego (identyfikator elementu) i nie zmienia struktury zagnieżdżania.
- Wariant z atrybutem style to tzw. styl inline; jest dozwolony jako atrybut i nie wprowadza niedozwolonych elementów potomnych.
- Wariant z samym class również używa atrybutu globalnego (klasy CSS) i zachowuje prawidłową, prostą strukturę akapitu.
W praktyce: jeśli chcesz dodać CSS, lepiej umieścić reguły w zewnętrznym pliku .css (zalecane) lub w <style> w miejscu przewidzianym na metadane/styl, zamiast w środku akapitu. Walidator pomaga wykryć takie błędy, nawet jeśli przeglądarka spróbuje je "naprawić" podczas parsowania.
