Przejrzymy listę 20 znaczników HTML5, część z nich znasz na pamięć, inne widzisz pierwszy raz, razem z ich obsługą w przeglądarkach: Chrome, Firefox, Safari i Internet Explorer.
8 znaczników układu strony
Te znaczniki służą przede wszystkim temu, żeby wyszukiwarkom łatwiej było odczytać strukturę twojej strony.
<article>– Wyznacza miejsce artykułu, komentarza na blogu albo wpisu na forum, zwykle składa się z tytułu i akapitu.<section>– Wydziela sekcję poświęconą jednemu tematowi.<article>może zawierać kilka takich sekcji (<section>), i odwrotnie. Sekcja również ma tytuł i wprowadzenie, a etykietę nadasz jej atrybutemaria-label.<aside>– Wydziela sekcję, która ma stać obok treści głównej, idealna na sidebary lub bloki reklamowe.<figure>– Kontener współpracujący ze znacznikiem<figcaption>. figure pokazuje obraz albo wideo, a pod nim podpis (<figcaption>).<footer>– Wyznacza miejsce stopki strony.<header>– Wyznacza miejsce nagłówka strony.<hgroup>– Znacznik grupujący kilka nagłówków (<h1> do <h6>).<nav>– Sekcja zbierająca odnośniki. Najczęściej trafia do<header>jako menu główne albo do<footer>przy notach prawnych i podobnych linkach.
4 znaczniki mediów
<video>– Wyświetla natywny odtwarzacz wideo HTML5, źródło pliku wskazujesz atrybutemsrc.<audio>– To samo co wyżej, tyle że wyłącznie dla pliku dźwiękowego.<picture>– Najmniej znany, bo w części przeglądarek wciąż eksperymentalny.<picture>pozwala podać kilka elementów<source>dla jednego<img>, a przeglądarka sama wybiera obraz najlepiej pasujący do rozdzielczości.<source>– Definiuje różne źródła plików multimedialnych, używasz go razem z<video>,<audio>i<picture>.
8 znaczników funkcjonalnych
<details>– Idzie w parze z<summary>i tworzy rozwijaną treść.
Szczegóły
Więcej informacji o szczegółach.
<dialog>– Natywne okno modalne w HTML5.Example from Mozilla –
<embed>– Znacznik embed daje kontener na zasoby zewnętrzne. Osadzano nim głównie Flasha, a także SVG, choć do SVG lepiej dziś sięgnąć po inne metody.<mark>– Pozwala podświetlić fragment tekstu.<meter>– Wskaźnik mieszczący się między dwiema stałymi wartościami.Example from Mozilla –
by Damien Flandrin (@dam62500) on CodePen. <progress>– Podobny do<meter>, ale pokazuje procent postępu.Example from Mozilla – by Damien Flandrin (@dam62500) on CodePen.
<time>– Zapisuje datę w sposób semantyczny, przyjmuje atrybutdatetime.html<p>Le concert a eu lieu le<time datetime="2001-05-15T19:00">15 Mai</time>.</p><wbr>– Jeden z najmniej znanych, a przydatnych znaczników HTML5.<wbr>mówi przeglądarce, że w razie potrzeby może w tym miejscu złamać wiersz.
···
Te znaczniki zakładają, że podstawy języka masz już za sobą. Jeśli dopiero zaczynasz, zacznij od 7 rzeczy, które warto wiedzieć przed nauką HTML-a: słownictwo, szkielet dokumentu i struktura semantyczna.
