Co to jest Semantyka ?

Semantyka to dział językoznawstwa, którego przedmiotem jest analiza znaczeń wyrazów. Polega to na badaniu związków, jakie zachodzą między wyrażeniami języka a przedmiotami, do których się one odnoszą.

W przypadku stron internetowych oznacza ona nadawanie kodu znaczenia.

Semantyka w tworzeniu stron internetowych

Co to oznacza w praktyce ? 

Większość stron ma bardzo podobną konwencjonalną strukturę to znaczy zawiera nawigację, nagłówek, pasek boczny, stopkę itd.

Twórcy stron często dodają różnym elementom div specjalne klasy aby określić ich znaczenie w dokumencie i po prostu łatwiej się zorientować, jaki kod odpowiada za to co widzimy w przeglądarce. Na przykład do czasów HTML 5 i nowego znacznika semantycznego <header>, powszechnie używało się <div class=”header”>. 

Gdybyś jednak próbował prześledzić kod w taki sam sposób jak robi to silnik renderujący przeglądarki, czytnik ekranu czy na przykład robot indeksujący, trudno byłoby Ci stwierdzić jakie jest przeznaczenie każdej sekcji i poszczególnych elementów. 

Nowa wersja języka HTML – HTML 5 rozwiązuje ten problem wprowadzając elementy semantyczne.

W tym wpisie opiszę nie opisuję wszystkich nowych elementów semantycznych a jedynie do tych które odpowiadają za sekcje na stronie internetowej. 

<main> </main>

W języku HTML bardzo długo brakowało elementu do oznacza głównej treści strony. Początkowo mówiono, że treścią główną będzie to co nie znajduje się w żadnym innym z nowym elementów semantycznych. Na szczęście porzucono ten pomysł i dodano element <main> </main>, za pomocą którego można oznaczać główną treść strony internetowej. 

Elementu tego można używać zarówno do oznaczenia treści głównej stron. Warto pamiętać o tym że na stronie powinien się znajdować tylko jeden element <main></main>.

W końcu treści główna jest tylko jedna oraz nie powinien być potomkiem żadnego innego elementu semantycznego takiego jak <header> <footer> itd. 

<section> </section>

Element section jest używany do wyznaczenia standardowej sekcji dokumentu. Dla przykładu cała treść na stronie może znaleźć się wewnątrz elementu <main></main> i żeby podzielić ją na poszczególne sekcje, dzielimy całą zawartości na mniejsze kawałki i zapisujemy do elementów <section></section>.

Jeśli w danym elemencie nie ma oddzielnego elementu treści a chcesz jedynie go ostylować to nie używaj section tylko wykorzystaj zwykłego diva i nadaj mu klasę. 

Ponadto o tym czy w danej sytuacji warto użyć element <section> można zdecydować na podstawie tego czy jego treść powinna mieć nagłówek na przykład <h1>.  Jeśli nie to prawdopodobnie lepszym rozwiązaniem będzie użycie zwykłego diva. 

<nav> </nav>

Elementy <nav> wykorzystywane są do zdefiniowania głównych bloków nawigacyjnych, łączy do innych stron lub części wewnątrz tej samej strony.  Zasadniczo służy do tworzenia głównych elementów nawigacyjnych witryny więc może występować w stopce strony i w innych miejscach, wszędzie tam gdzie występuje co najmniej kilka linków. 

Jeśli do tej pory do wstawienia nawigacji najczęściej używałeś elementu <ul> czyli nieuporządkowanej listy, to zamiast tego lepszym rozwiązaniem może być użycie elementu <nav>i zagnieżdżenia w nim elementów <a>

<article></article>

Funkcja elementu <article> może się mylić z funkcją komponentu <section>. Moje rozumienie jest takie, że element <article> może zawierać autonomiczny fragment treści strony. Gdy piszesz kod HTML i układasz strukturę storny internetowej, zadaj sobie pytanie czy treść elementu <article> można przekopiować na inną stronę, przy zachowaniu sensu tego komponentu. Najbardziej oczywistym przykładem treści które się znaleźć w elemencie <article> jest post z bloga.

Pamiętaj, gdy będziesz zagnieżdżał jeden element <article> w innym, żeby zagnieżdżona zawartości powinna w jakiś sposób odwoływać się do treści elementu nadrzędnego.

<aside></aside>

Element aside oznacza zawartość, która jest w pewien sposób powiązana z treścią wokół niego. W praktyce najczęściej występuje jako pasek boczny. Zasadniczo można w nim umieścić wszystko co nie jest bezpośrednio związane z treścią główną. Zazwyczaj są to bannery reklamowe, informacje o autorze, kategorie, czy zapisy do newslettera.

<header></header>

Element <header> może być wykorzystywany w roli kontenera dla nagłówka strony ale równie dobrze może się w niej znaleźć wstęp do artykułu lub innej sekcji na stronie. Na stronie może być ich dowolna ilość. Na przykład po jednym w każdym elemencie <section>

<footer></footer> 

Element footer powinien zawierać informacje o sekcji w której się znajduje. Zazwyczaj jest to dopełnienie informacji i elementy nawigacyjne. Mogą pojawić się w nim również na przykład odnośniki do innych podstron, social media, polityka prywatności itd. Zwykle jest to ostatni element na stronach www. Podobnie jak element <header>,  <footer> może występować wielokrotnie w obrębie tej samej strony aczkolwiek powinien być użyty raz wewnątrz innego elementu. Np w jednym elemencie <section> jeden <footer>.