Nowe elementy semantyczne standardu HTML5

W poniższym artykule zostały opisane, moim zdaniem najbardziej przydatne elementy, które wykorzystywane są w codziennej pracy.

Element <main>

Pierwszym elementem, jest element <main>, za pomocą którego można oznaczyć główną treść naszej strony internetowej. W języku HTML bardzo długo brakowało elementu, który oznaczył by główną treść naszej stront www. Na szczęście pojawił się element <main>, którego możemy używać zarówno do oznaczenia treści głównej strony, jak i głównej sekcji.

<main class="nazwa-klasy">
</main>

Niestety, albo i stety treść główna jest tylko jedna dlatego trzeba pamiętać, że na stronie może występować tylko jeden element <main> oraz nie powinien on być potomkiem żadnego innego elementu semantycznego, np.: <article>, <aside>, <header>, <footer>, <nav>. Natomiast  w nim te elementy jak najbardziej mogą występować.

Element <section>

Jeżeli chcemy na naszej stronie www wyznaczyć standardowy element sekcji, użyjemy do tego elementu <section>. Element <section> wykorzystujemy do podziału naszej strony na działy. Jeżeli planujesz na swojej stronie umieścić kilka bloków, które będą zawierać informacje nie powiązane ze sobą np.: najnowsze wpisy, listę usług jakie świadczysz i kilka słów o sobie, to do tego dobrym rozwiązaniem jest zastosowanie elementu <section>.

<section class="najnowsze-wpisy">
<h2>Najnowsze wpisy</h2>
<ul>
<li><a href="link-do-artykulu">Tytuł artykułu</a></li>
</ul>
</section>
<section class="moje-uslugi">
<h2>Moje usługi</h2>
<div>Lista usług</div>
</section>
<section class="o-mnie">
<h2>O mnie</h2>
<p>kilka słów na Twój temat</p>
</section>

Jeżeli masz wątpliwość co do użycia elementu <section> możesz zdecydować na podstawie tego, czy dana sekcjo powinna zawierać nagłówek np. <h2>. Jeżeli nie, to lepszym rozwiązaniem będzie użycie standardowego elementu, takiego jak <div>.

Element <nav>

Kolnym elementem na liście, jest element <nav>, który wykorzystujemy do budowania dużych grup linków, łączy do innych stron lub części wewnątrz tej samej strony. Element <nav> ma tworzyć główne elementy nawigacyjne naszej strony internetowej, może występować jako menu główne, menu w stopce czy na blogu w panelu bocznym jako lista kategorii wpisów lub linki do artykułów archiwalnych.

<nav>
<ul>
<li><a href="strona-glowna">Strona główna</a></li>
<li><a href="o-mnie">O mnie</a></li>
<li><a href="kontakt">Kontakt</a></li>
</ul>
</nav>

Jeżeli planujesz budowę nawigacji w postaci prostej prostej listy nieuporządkowanej, to najlepszym rozwiązaniem będzie umieszczenie tej listy pomiędzy elementem <nav>.

Element <article>

Element <article> powinien zawierać automatyczny fragment treści strony. Najbardziej oczywistym przykładem na zastosowanie elementu <article>, jest post bloga. Ale nie możemy zapomnieć, że nasza strona www może zawierać wiele artykułów np. na stronie kategorii, która pokazuje listę wpisów. W takiej sytuacji każdy post może być zawarty w elemencie <article>.

<section>
<article>
<a href="link-do-wpisu">
<header><h2>Tytuł naszego wpisu</h2></header>
<p>Wstęp do wpisu</p>
</a>
</article>
<article>
<a href="link-do-wpisu">
<header><h2>Tytuł naszego wpisu</h2></header>
<p>Wstęp do wpisu</p>
</a>
</article>
<article>
<a href="link-do-wpisu">
<header><h2>Tytuł naszego wpisu</h2></header>
<p>Wstęp do wpisu</p>
</a>
</article>
</section>

Element <article> możemy jeszcze wykorzystać na karcie produktu, komentarzy przesłanych przez użytkowników lub inny niezależny element treści.

Element <header>

Mogło by się wydawać, że element <header> powinien być wykorzystywany w roli kontenera nagłówka strony. I tak i nie, ponieważ nagłówek <header> można również stosować w każdej dowolnej sekcji, w której znajduje się nagłówek, ale również może się w nim znaleźć wstęp do artykułu.

Element <footer>

Element <footer> tak samo jak <header> może występować wielokrotnie w obrębie tej samej strony. Element <footer> przeznaczony jest do publikowania informacji o sekcji, w której się znajduje. Najczęściej posiada odnośniki do innych dokumentów i informacje o prawach własności. Może on stanowić zarówno stopkę całego bloga, jak i stopkę opublikowanego w nim wpisu.

Dokładniej o zastosowaniu elementów <header> i <footer> przedstawiłem w artykule:
Nowe atrybuty i znaczniki strukturalne w HTML5

Element <aside>

Masz tekst, w którym pojawiają się cytaty, reklamy czy linki powiązane z treścią. Wykorzystaj element <aside>, który oznacza zawartość w pewien sposób powiązaną z treścią wokół niego. Więc jak będziesz miał potrzebę dodać do artykułu jakieś wyjaśnienie, to element <aside> idealnie się do tego nadaje.

Zasadniczo element <aside> może występować w paskach bocznych, ale musisz pamiętać o tym że zawarte w nim informacje muszą spełniać warunek, że ma odpowiednią zawartość. Dla przykładu, podczas prowadzenia sklepu internetowego, to w elemencie <aside> możesz umieścić teks typu: „Podobne produkty”.

Element <figure> i <figcaption>

W elemencie <figure> umieszczamy zdjęcia, ilustracje, diagramy. Definicja elementu <figure> nie jest nie wiadomo jak skomplikowana, jeżeli chcesz dodać zdjęcie do swojej strony internetowej, zastosuj poniższy wzór:

<figure class="moje-zdjecie">
<img class="portret" src="sciezka/do/zdjecia/moje-zdjecie.img" alt="Mój portret" />
<figcaption class="podpis-img">Podpis zdjęcia</figcaption>
</figure>

Jak widać element <figure> jest takim małym samodzielnym blokiem, w którym znajduje się ścieżka do zdjęcia i w elemencie <figcaption> umieszczony jest podpis do nadrzędnego elementu. Wykorzystanie elementu <figcaption> jest idealne gdy trzeba pod zdjęciem czy wykresem dodać szczegółowy opis, który nie pasuje do głównej treści.

Element <details> i <summary>

Jeżeli potrzebujesz wykonać na stronie prosty element, który po kliknięciu otworzy się i zamknie, użyj elementu <details> i <summary>. Dzięki nim utworzysz komponent, w którym możesz ukryć fragment tekstu, gdzie po kliknięciu wyświetlisz jego zawartość.

<details>
<summary>Czy możesz mnie kliknąć</summary>
<p>Dziękuję, że kliknołeś</p>
</details>

Po kliknięciu w tekst otworzymy dodatkowe okno z treścią, ponowne kliknięcie spowoduje zamknięcie. Jeżeli chcesz, aby dodatkowe informacje były domyślnie widoczne, możesz dodać do elementu atrybut open <details open>.

Na razie nie ma możliwości animowania okienka podczas otwierania i zamykania bez użycie JavaScript, tak samo jak nie sprawimy zamykania poprzedniego okienka przy otwarciu kolejnego. Zobaczymy co pokaże czas i czy kiedykolwiek będzie to możliwe, dlatego traktuj te rozwiązanie jako wygodna alternatywa dla przełączania wartości deklaracji display: none; za pomocą JavaScript.

Podsumowanie

To nie koniec nowości jeżeli chodzi o standard HTM5. W tym artykule, chciałem wymienić najważniejsze zmiany w strukturze kodu, które wpływają na czytanie i postrzeganie naszych stron internetowych przez roboty indeksujące.