Jak pewnie dobrze wiesz, aktualnie przy tworzeniu stron internetowych używamy HTMLa w wersji 5tej, która została upubliczniona w 2014 roku. W dniu dzisiejszym już wszystkie najnowsze przeglądarki obsługują wszystkie nowe właściwości HTML5. Przy okazji powstało sporo znaczników, które zachowują się jak dobrze nam już znane divy, ale jednak nazywają się inaczej. Warto więc się temu przyjrzeć.

Nowa wersja HTMLa daje nam do użytku znaczniki takie jak: <header>, <section>, <footer>, <article>, <nav>, <aside>, <main>.

Header? Ale jak to! Przecież już mamy nagłówki h1 - h6. Po co nam kolejny znacznik dla nagłówka? Wszystkie te znaczniki, które tu przytoczyłem nie różnią się niczym od divów. Wszystkie są elementami blokowymi, ale mają jedną zasadniczą cechę. Sama nazwa znacznika od razu mówi nam z czym mamy do czynienia. Nie musimy w tym celu dodawać kolejnego ID czy klasy, żeby wiedzieć za co dany element odpowiada na stronie. Dlatego zamiast kolejnego nicniemówiącego diva może użyć np. znacznika <header>, który może być przydatny do określenia nagłówka danego elementu. Jak wyglądają i co określają nowe tagi HTML5?

<header> - jest znacznikiem nagłówka. Możesz go stosować wielokrotnie na stronie i nie musi on oznaczać nagłówka całej strony, ale także poszczególnych jej części.

<section> - jest znacznikiem sekcji. Jest to ważna, większa część strony, zazwyczaj zawierająca grupę innych tagów jak np. <header>. Dla uproszczenia można sobie wyobrazić, że jest to w hierarchii coś więcej niż zwykły div i każdy większy element może być m. in. sekcją.

<footer> - jest znacznikiem stopki. Podobnie jak <header> możesz stosować go wielokrotnie na stronie.

<article> - jest znacznikiem artykułu, czyli treści, która mogłaby się znaleźć na stronie bez względu na pozostałą treść. W tym znaczniku zazwyczaj umieszczamy np. treść posta na stronie.

<nav> - jest znacznikiem nawigacji. Umieszczamy w nim tylko i wyłącznie główne menu strony, zazwyczaj to znajdujące się w nagłówku strony. Wewnątrz możemy oczywiście umieścić standardowe tagi <a> czy nawet listę <ul>.

<aside> - jest znacznikiem elementu pobocznego. Umieszczamy w nim zazwyczaj coś dodatkowego, jak np. dodatkowe menu z filtrami w sklepie. Tag ten nadaje się do wszelakiego typu sidebarów na stronie. <aside> można również umieścić wewnątrz np. <article>. Oznacza się w ten sposób treść odbiegającą nieco od tematu całego artykułu.

<main> - jest znacznikiem głównej treści na stronie. Pomiędzy tymi znacznikami umieszczamy najważniejszą treść na całej stronie.

Użycie każdego z tych znaczników zależy tylko i wyłącznie od danego programisty. Użycie błędnego tagu nie spowoduje złego wyświetlenia strony. Każdy z powyższych elementów zachowa się dokładnie tak jak zwykły <div> i nie posiada on dodatkowych styli. Jednakże kod HTML5, zapisany zgodnie z podanym standardem będzie znacznie czytelniejszy zarówno dla programisty jak i dla robotów indeksujących, które mogą wziąć dane znaczniki pod uwagę.

Warto więc zapoznać się z nowymi znacznikami i korzystać z nich wszędzie tam gdzie jest to możliwe. Oczywiście nie wykluczymy z użycia na stronie divów, ale na pewno możemy znacznie ograniczyć ich użycie przy większych elementach strony.