-s i -s, jednak jak nie musisz ich całkowicie opuścić. Nadal są najlepszym wyborem do grupowania treści wyłącznie w celach stylizacyjnych iw innych przypadkach ostatecznych.

Semantyka tekstu w HTML5

HTML5 wprowadził wiele nowych elementów semantycznych, które umożliwiają łatwą organizację treści. Nie tylko pomagają ci uporządkować zawartość na poziomie całego dokumentu (zobacz szczegóły w następnej sekcji), ale także wewnątrz bloków tekstowych, jako tagi wbudowane.

Prawdopodobnie najbardziej popularnymi znacznikami semantycznymi na poziomie tekstu są i , ale istniały także przed HTML5. Wśród nowych wbudowanych elementów semantycznych możemy znaleźć na przykład , znacznik dla czytelne dla człowieka daty i godziny, i dla podświetlony tekst.

Zobacz tę listę dla wszystkich elementów semantycznych na poziomie tekstu, które są aktualnie używane.

Zarys dokumentu w HTML5

Zarys dokumentu to struktura dokumentu HTML. Pokazuje, jak elementy są ze sobą powiązane. Zarys dokumentu został wygenerowany wyłącznie przez elementy mapowania, takie jak nagłówki, tytuły tabel, tytuły formularzy i inne elementy we wcześniejszych wersjach HTML, takie jak HTML4.01 i XHTML.

W HTML5 algorytm zarysowania został wzbogacony o nowe elementy sekcyjne, a mianowicie:

• dla sekcje zgrupowane wokół określonego tematu
• dla kompletne lub samodzielne kompozycje takie jak post na blogu lub widżet
• dla bloki nawigacyjne
• dla treści uzupełniające, takie jak paski boczne.

W HTML5 istnieje piąty element sekcyjny, ale nie jest nowy, to jest etykietka. The

i tagi są również nowe, ale nie generują nowych sekcji w dokumencie, dzielą zawartość wewnątrz sekcji. To znaczy że każdy element cięcia (body, article, section, nav i aside) może mieć swój własny nagłówek i stopkę.

Wskazówki dotyczące treści semantycznie ustrukturyzowanych

Jeśli chcemy stworzyć dobrze uporządkowany zarys dokumentu, musimy zwrócić uwagę na następujące zasady:

1. Najbardziej zewnętrznym elementem cięcia jest zawsze etykietka.

2. Sekcje w HTML5 mogą być zagnieżdżone.

3. Każda sekcja ma własną hierarchię nagłówków. Każdy z nich (nawet najbardziej zagnieżdżona sekcja) może mieć h1 etykietka.

4. Podczas gdy zarys dokumentu jest przede wszystkim zdefiniowany przez 5 elementów sekcyjnych, wymaga również odpowiednich nagłówków dla każdej sekcji.

5. Zawsze jest to pierwszy element nagłówka (niech będzie to h1 lub tag nagłówka niższej rangi), który określa nagłówek danej sekcji. Następujące znaczniki nagłówków w tej samej sekcji muszą być powiązane z tym. (Jeśli pierwszym nagłówkiem jest h3 wewnątrz elementu sekcyjnego, nie umieszczaj po nim h3).

6. Sekcje zdefiniowane przez

, i tagi nie należą do głównego zarysu dokumentu HTML, zwykle nie są początkowo renderowane przez technologie wspomagające.

7. Każda sekcja (ciało, sekcja, artykuł, na bok, nawigacja) może mieć swoją własną

i tagi, które definiują nagłówek (np. logo, nazwisko autora, daty, meta-informacje itp.) i stopkę (prawa autorskie, notatki, linki itp.) tej sekcji.

Przykład: zarys semantyczny

Zobaczmy przykład semantycznego konspektu dokumentu, aby zobaczyć jaśniejszy sposób jego działania. Nasz przykładowy kod spowoduje następującą strukturę dokumentu:

A oto kod z odpowiednim podziałem semantycznym:

  
 
Witamy na naszej stronie internetowej!
 
Oto nasze logo i hasło.
 
  
 
 
Tytuł artykułu
 
Podtytuł art
 
 
 
Pierwsza część logiczna (np. „Teoria”)
 
Ustęp 1 w pierwszej sekcji
 
Niektóre inne podpozycje w pierwszej sekcji
 
Ustęp 2 w pierwszej części
 
 
 
Druga część logiczna (np. „Praktyka”)
 
Ustęp 1 w drugiej sekcji
 
Ustęp 2 w drugiej sekcji
 
  
    

Jeśli spojrzysz na powyższy fragment kodu, zobaczysz, że nagłówki i stopki są opcjonalne, możemy swobodnie wybierać, czy chcemy z nich korzystać, czy nie, ale to jest zdecydowanie zaleca się, aby zawsze dołączać nagłówek dla każdej sekcji, w przeciwnym razie sekcja będzie “Nieuprawny” w zarysie dokumentu.

Na szczęście istnieje wiele świetnych narzędzi w całym Internecie, które pozwalają nam sprawdzić zarys dokumentu, tym razem użyjemy narzędzia Outliner html5.org.

Jeśli wstawimy nasz fragment kodu do formularza dostarczonego przez zarys, i klikniemy “Zarysuj to!” przycisk, zobaczymy następujący wynik:

To jest zarys dokumentu naszego przykładowego kodu, tak widzą to wyszukiwarki, a czytniki ekranu czytają je swoim użytkownikom niedowidzącym. Jest semantyczny, dobrze skonstruowany i nie ma paskudnych “Nieuprawny” sekcje w nim.

Jeśli chcesz zobaczyć, jak wygląda sekcja Bez tytułu w Outlinerze, po prostu usuń niektóre znaczniki nagłówków w przykładowym kodzie.

Inne aspekty semantyki internetowej

Semantyczne znaczniki HTML i kontury dokumentów to tylko niewielka część semantyki internetowej. Zawartość strony internetowej może być jeszcze bardziej znacząca dzięki protokołowi dostępności WAI-ARIA i ustrukturyzowanym danym, które mogą być używane wraz z protokołem RDFa, mikrodanymi lub znacznikiem JSON-LD.