Jest to druga część poprzedniego wpisu na temat Semantyki HTML5. Jeżeli nigdy nie zetknąłeś się z tą tematyką, to warto poświęcić czas na rozpoczęcie czytania od poprzedniego wpisu.
Znajdź najlepsze elementy semantyczne
Semantyka HTML5 na pierwszy rzut oka wydaje się łatwa, jednak należy unikać pewnych pułapek. Najważniejszą rzeczą do zrozumienia jest to, że nie wszystkie znaczniki semantyczne służą do tego samego celu. Istnieją trzy główne typy znaczników semantycznych:
- block-level elementy sekcyjne
- block-level elementy niesekcyjne
- inline-level elementy
Elementy sekcyjne block-level tworzą kontur dokumentu, który jest czytelny dla robotów wyszukiwarek. Jak wspomniałem wcześniej, są ich cztery:
- <article> dla samodzielnych elementów treści, takich jak artykuły lub recenzje,
- <section>, aby oznaczyć inne bloki treści, które logicznie należą do siebie,
- <aside> dla pasków bocznych,
- <nav> dla sekcji nawigacji.
Co zaskakujące, znacznik <main> nie jest elementem podziału, jednak nadal jest znacznikiem semantycznym. Możesz dodać cztery elementy przekroju w dowolnym momencie do swojej strony HTML. Jednak <main> można użyć tylko raz na każdej stronie HTML.
Obrys strony www
Interesującą rzeczą w elementach podziału na sekcje jest to, że zaznaczają one zawartość, która istnieje poza konturem całej strony. Tak więc elementy przekroju mogą mieć własne nagłówki (<h1>, <h2>, <h3>, <h4>, <h5>, <h6>), nagłówki <header> i stopki <footer>.
Te znaczniki semantyczne niesekcyjne należą tylko do elementu sekcji, ale nie dodają do konturu całej strony. Po pierwsze, może to zabrzmieć nieco dziwnie, ale można to zrozumieć, zwracając uwagę na sekcje <head>.
Możesz użyć osobnego znacznika <h1> dla artykułu. Jest to możliwe, ponieważ <article> istnieje poza konturem strony, w przeciwnym razie nie można użyć dwóch tagów <h1> na tej samej stronie.
Nagłówki i stopki zachowują się w podobny sposób. Na przykład tag <article> może mieć osobne <header> i <footer>, które semantycznie będą do niego należeć (ale zostaną wykluczone z obrysu całej strony).
Tego rodzaju wykluczenie semantyczne jest dość przydatne z punktu widzenia SEO, ponieważ wyszukiwarki mogą traktować samodzielne bloki jako osobne jednostki.