Buduj stronę z tagów HTML, które określają swoją rolę
Opis
To kryterium sprawdza, czy kod strony wskazuje rolę każdej jej części. iPand sprawdza trzy rzeczy: element <main> (lub role="main") i co najmniej dwa elementy spośród <header>, <nav> i <footer>; co najmniej połowę głównej treści w elementach tekstowych (akapitach, listach, nagłówkach, komórkach tabel, cytatach, podpisach); poprawny atrybut lang (BCP 47) w tagu <html>.
Drugi punkt nie jest oceniany, gdy główna treść ma mniej niż 100 słów.
Dlaczego to ważne dla AI
Tagi semantyczne oddzielają główną treść od nagłówka witryny, menu i stopki oraz mówią, czym jest każdy blok: akapitem, listą, tabelą. Program, który czyta kod, odnajduje dzięki temu użyteczny tekst strony i nie musi zgadywać go na podstawie układu.
- <main> oddziela treść właściwą dla danej strony od tego, co powtarza się w całej witrynie.
- Tekst w akapitach i listach dzieli się wyraźniej niż tekst wrzucony do elementów <div> bez określonej roli.
- Według W3C z atrybutu lang korzystają wyszukiwarki, narzędzia do tłumaczenia i syntezatory mowy.
Jak to poprawić
- 1 Wyznacz główne obszary strony Umieść treść właściwą dla strony w jednym elemencie <main>, nagłówek witryny w <header>, menu w <nav>, a stopkę w <footer>. Jeśli twój motyw używa tylko elementów <div>, poproś programistę lub twórcę motywu o ich zastąpienie.
- 2 Pisz tekst w akapitach i listach Umieść każdy akapit w <p>, wyliczenia w <ul> lub <ol> z jednym <li> na element, a dane do porównania w <table>. Unikaj tekstu wstawionego bezpośrednio do <div> lub <span>: co najmniej połowa głównej treści musi znajdować się w elementach tekstowych.
- 3 Zadeklaruj język strony Dodaj do tagu <html> atrybut lang z kodem BCP 47: lang="pl" dla polskiego, lang="fr-BE" dla francuskiego w Belgii, lang="en" dla angielskiego. W witrynie wielojęzycznej każda wersja deklaruje własny język.
- 4 Sprawdź strukturę W narzędziu do inspekcji przeglądarki odszukaj elementy <main>, <header>, <nav> i <footer>, a potem atrybut lang tagu <html>. Sprawdź też, czy główna treść znajduje się w elementach <p> i <li>, a nie w <div>.
Do zapamiętania
Nazwane obszary, tekst w akapitach i zadeklarowany język sprawiają, że stronę da się odczytać bez zgadywania jej układu. iPand codziennie sprawdza te trzy punkty w kodzie strony.
