HTML5 i outline

Każdy frontendowiec zna właściwość outline z CSS.Wraz z HTML5 pojawił się nowy outline, tym razem w kontekscie samego HTML.

Co to jest outline? To inaczej spis treści strony zrobiony na podstawie znaczników tworzących nowe sekcje i opisujących ich znaczników hx (gdzie x jest cyfrą od 1 do 6). No tak, i tu wchodzimy w to, co nowego przyniósł nam HTML5. Za bardzo teraz rozwodzić się nie będę, zostawię to na inny wpis. Jednak to co jest ważne, to fakt, że znaczniki zostały pogrupowane ze względu na ich zastosowanie. Została wyróżniona grupa znaczników, które tworzą nowe sekcje w kodzie, pod względem semantycznym. Zaliczamy do nich znaczniki:
- section
- article
- nav
- aside.
Ich użycie poza semantycznym wyróżnieniem elementu (np artykułu, sekcji z newsami, nawigacji czy bloku reklam) dodaje nową sekcję w outline. Jeśli wewnątrz takiego tagu umieścimy tag hx (gdzie x jest cyfrą od 1 do 6) t w outlinie zamiast informacji o nienazwanej sekcji pojawi się tekst wpisany w tag hx.

Powstało kilka aplikacji (m.in. na Chrome i FF) sprawdzających outline, ale ja sama korzystam z oulinera dostępnego online. Wszystkim ciekawym polecam sprawdzenia outline WP.pl. Według mnie jest bardzo dobry, wręcz idealny :).

Biorąc pod uwagę outline, pojawia się nowy standard w kodowaniu. Nie dość że strona ma się walidować, wyświetlać poprawnie pod różnymi przeglądarkami, to jeszcze musi mieć poprawny outline.