Semantyka stron WWW, czyli co nowego w HTML5?

- autor: tsissput

Od dosyć dawna możemy projektować strony według standardu HTML5, jednakże nie wszystkie przeglądarki wspierają ten standard w równym stopniu. Także przed użyciem którejś z właściwości HTML5 warto sprawdzić, jakie przeglądarki obsługują daną opcję i na jakim poziomie.

Wracając do sedna, czyli do standardu HTML5, daje on wiele nowych możliwości, między innymi wprowadza elementy semantyczne, które nadają znaczenie sekcjom kodu dokumentu HTML, a użyte we właściwy sposób, mogą usprawnić działanie przeglądarek, wyszukiwarek i czytników ekranów dla osób niedowidzących i właśnie tymi elementami będę zajmował się w dalszej części artykułu.

Większość stron internetowych przed standardem HTML5 opierała się na elementach <div>, które nic nie mówią o zawartości znajdującej się wewnątrz elementu. Elementy te są proste w użyciu, a sposób wyświetlania i funkcję jaką pełnią możemy definiować arkuszami styli. Przyglądając się bardziej złożonemu dokumentowi HTML i elementom <div> trudno stwierdzić jaką funkcję one pełnią, tym bardziej, jeżeli nie ma żadnych komentarzy twórcy dokumentu, a klasy czy identyfikatory styli są nazwane w sposób nic nie mówiący człowiekowi. Dlatego aby odpowiedzieć sobie na to pytanie, jaką funkcję dany element <div> spełnia, należy zagłębić się w arkuszach styli, sprawdzając, jakie style są przypisane do danego elementu. Ale czy wiedza gdzie dany element jest umiejscowiony i w jaki sposób jest wyświetlany na stronie definiuję to jaką rolę pełni? Czy <div> umieszczony w dolnej części strony zawsze jest stopką? Albo czy menu zawsze znajduje się po lewej stronie strony? Dlatego HTML5 wprowadza nowe elementy semantyczne, które jednoznacznie mówią jaki element jaką pełni funkcję na stronie i zastępują zbyt ogólne elementy <div>, dzięki temu kod dokumentu jest łatwiejszy do edytowania i utrzymania, i to jest jeden z kilku powodów, aby używać nowe znaczniki. Drugim z powodów jest dostępność.  Strony dostępne to strony po których można nawigować za pomocą czynników ekranów, których używają osoby niedowidzące, dzięki elementom semantycznym łatwiej przychodzi znalezienie interesujących elementów strony. Kolejnym powodem jest optymalizacja pod kątem wyszukiwarek. Roboty przeszukujące sieć biorą pod uwagę elementy semantyczne dokumentu HTML, odpowiednie ich użycie może pomóc Twojej stronie znaleźć się na początku listy wyników wyszukiwania.

Nowe elementy semantyczne wprowadzają nową jakość w strukturze dokumentu, dzięki nim można oddzielić najpopularniejsze sekcje dokumentu a ponadto nadać znaczenie treściom w nich zawartych. Poza tym, nowe znaczniki nic nie zmieniają, nie są nim przypisane żadne style.

Jednym z najbardziej wyspecjalizowanych znaczników jest element <time>, w którym powinna być właściwie sformatowana  godzina bądź data na przykład <time>2013-11-24</time>.

Kolejnym elementem opisującym strukturę dokumentu jest element <header>,  w którym zawieramy nagłówek strony, czy też rozbudowany nagłówek artykułu. Pewnie teraz zastanawiasz się, co w wypadku, gdy na stronie będą występować oba nagłówki. Standard HTML5 nie zabrania kilkukrotnego użycia tego samego elementu semantycznego w obrębie jednej strony, jednakże im jest ich mniej i są bardziej przemyślane i właściwie użyte tym lepiej, ponieważ zbyt pochopne używanie nowych znaczników spowoduje powrót do tej samej sytuacji jak w wypadku ogólnych elementów <div>.

Następnym jest element <footer>, w której zawieramy stopkę dokumentu HTML.  Oczywiście każdy z tych elementów może zawierać inne elementy, także <div>.  Możemy na przykład umieścić informacje o autorze, menu nawigacyjne z poznanym już znacznikiem <nav>. Oczywiście wszystkich elementów nie powinnyśmy zawierać w elemencie <footer>, mogą być zawarte przed lub po tym znaczniku, ale w obrębie tego samego znacznika <div>, w którym jest zawarty element <footer>.

Niestety w HTML5 nie wprowadzono elementu <content>, w którym byłaby zawarta główna treść strony. Za to istnieje element <article> reprezentujący pewien oddzielny fragment treści, może to być wpis blogowy, czy to jakaś wiadomość. Oczywiście, w znaczniku <article> możemy zawrzeć poprzednie elementy takie jak <header> i  <footer>, w ten sposób otrzymamy artykuł z nagłówkiem, w którym będzie tytuł,  a może także podtytuł, notka o autorze.  Następnie zawieramy treść artykułu, w elemencie <div> lub <spam> a na koniec poznany także prędzej element <footer> w którym mogą być zawarte tak zwane copyrighty, czy odnośniki do innych stron. Tylko co w przypadku kiedy artykuł jest podzielony na kilka podstron? W takim przypadku, lepszym rozwiązaniem będzie, gdy każdy z części artykułu umieścimy w oddzielnym elemencie <article>.

Wyżej wspomniałem o artykule, w którego nagłówku występował także nagłówek, HTML5 wyróżnia element <hgroup>,  w którym możemy zawrzeć tytuł w elemencie <h1> a podtytuł w elemencie <h2>, jeżeli chcemy zawrzeć coś więcej, to lepiej zrobić to poza znacznikiem <hgroup>.

Mamy już zdefiniowany cały tekstowy artykuł, ale co jeśli wewnątrz tekstu będziemy chcieli zawrzeć jakiś obraz? Analogicznie jak w książkach, każdy z obrazów powinien być jednoznacznie związany z tekstem, dlatego będziemy go zawierać w elemencie <figure>. Dobrym pomysłem, jest także opis każdego z obrazu, taki opis powinien być umieszczany wewnątrz elementu <figcaption> i może on zastąpić atrybut alt ze znacznika <img>.

HTML5 wyróżnia także element <aside>, można w nim zawierać treść, który w jakiś sposób odnosi się do zawartości znacznika <article>. Może to być rozszerzenie jakiegoś zagadnienia, cytat, czy odnośnik zewnętrzny.

Elementy nawigacyjne powinniśmy zawierać w nowym elemencie <nav>, dlatego w tym znaczniku będziemy umieszczać odnośniki w obrębie danej strony lub do innych zewnętrznych stron.

Kolejnym nowym znacznikiem będzie element <section>, w którym zostają zwarte treści, nie pasujące do pozostałych elementów semantycznych.  Można w nim umieścić skróconą informację o nas, czy zestaw informacji kontaktowych, a także zbór treści na przykład lista newsów, czy też samoistne treści, które nie można nazwać artykułem. Może to być na przykład lista produktów na stronie sklepu.

Podsumowując, HTML5 wprowadza kilka nowych elementów semantycznych, przy pomocy których można zbudować strukturę semantyczną dokumentu, która niesie za sobą jednoznaczne informacje semantyczne, nie tylko dla autorów, ale także użytkowników przeglądających strony przy pomocy czytników ekranów dla osób niedowidzących a także dla robotów wyszukiwarek indeksujących stron, które biorą pod uwagę zwartość elementów semantycznych, gdzie zysk jest obopólny, użytkownicy wyszukiwarek otrzymują lepiej dopasowane wyniki a twórcy stron wyższą pozycję w wynikach wyszukiwania.

Oczywiście, zasób znaczników jest dość ubogi, z jednej strony to wada, ponieważ nie do końca możemy dopasować semantykę do prezentowanej zawartości na stronie, a z drugiej zaleta, ponieważ twórcy stron internetowych nie muszą uczyć się mnóstwa nowych znaczników, które pewnie i tak nie oddadzą całej semantyki jaką można spotkać na stronie internetowej. Reasumując, elementy semantyczne to pierwszy krok, do stworzenia w pełni semantycznych sieci WWW.

Piotr Michalak

Reklamy

Skomentuj

Wprowadź swoje dane lub kliknij jedną z tych ikon, aby się zalogować:

Logo WordPress.com

Komentujesz korzystając z konta WordPress.com. Wyloguj / Zmień )

Zdjęcie z Twittera

Komentujesz korzystając z konta Twitter. Wyloguj / Zmień )

Zdjęcie na Facebooku

Komentujesz korzystając z konta Facebook. Wyloguj / Zmień )

Zdjęcie na Google+

Komentujesz korzystając z konta Google+. Wyloguj / Zmień )

Connecting to %s

%d blogerów lubi to: