HTML: semantyczny HTML
Opublikowano śro 17 czerwca 2020 w html • 2 min read
Znaczniki semantyczne określają znaczenie treści, która jest w ramach nich zamknięta. Nie powinny być wykorzystywane do pozycjonowania (od tego div) a do określania treści.
| HTML - tag | znaczenie |
|---|---|
<alt> |
alternative/opis w przypadku braku elementu lub dla czytnika |
<article> |
artykuł - rozumiany jako przedmiot rzecz / niezależna i zamknięta część strony |
| zawartość tego taga powinna stanowić treść samą w sobie / będzie miała sens też na innej stronie | |
<aside> |
boczny pasek/treść boczna |
<details> |
detale / w przypadku inputu pozwala na dodanie opcji wyboru |
<figcaption> |
podpis obrazu |
<figure> |
obraz/rycina |
<footer> |
stopka |
<header> |
wstęp/metadane/ linki nawigacji |
<main> |
główna treść strony |
<mark> |
podkreślony tekst |
<nav> |
element nawigacyjny |
<section> |
sekcja - tematyczne grupowanie semantycznie wspólnej części np. wielu artykułów |
| może też rozdzielać na mniejsze części artykułów / sekcja jest integralną częścią strony | |
<summery> |
podsumowanie |
<time> |
podsumowanie |
| ----- | ------ |
<abbr> |
abbreviation/skrót |
<address> |
adres |
<code> |
kod |
<dfn> |
definicja |
<Hn> |
Nagłówek |
<em> |
emphasis/podkreślenie |
<ins> |
insertion/ treść wstawiona |
<progress> |
oznaczenie postępu |
<rel> |
relation- ma na celu wskazanie na relacje pomiędzy elementami |
Przykłady użycia semantycznego HTML
<section> & <article>
HTML Article Element (
<article>) defines a piece of self-contained content. It does not refer to the main content alone and can be used for comments and widgets. HTML Section Element (<section>) defines a section of a document to indicate a related grouping of semantic meaning. (za MDN web docs - Using HTML sections and outlines)
Ten tag wyraźnie wprowadza małe zamieszanie i zauważalne są dwie strategie korzystania z niego 1) porcjuje <article> na mniejsze sekcji 2) grupuje wiele <article> - tworzy cześć wyższego rzędu strony niż <article> oba podejścia nie muszą się wykluczać (Section vs Article HTML5 - Stack Overflow)
oraz
Przykłady użycia semantycznego HTML 2
Input + Details
See the Pen datalist by Mikołaj Kostyrko (@mkostyrko) on CodePen.
Progress
See the Pen progressbar by Mikołaj Kostyrko (@mkostyrko) on CodePen.
Semantyczny HTML
Semantyczny HTML jest istotny z perspektywy:
-
dostępności (Accessibility) -> Czytniki ekranowe/syntezatory mowy oraz urządzenia z niewielkimi ekranami (np. Apple Watch) korzystają z pomocy semantycznego HTML.
-
SEO -> roboty wyszukiwarek sieciowych wykorzystują semantyczny html do indeksowania/pozycjonowania strony/jej znaczenia
-
HTML pozwala na prostą walidację
<input type="email">np. w przypadku wpisywanie adresu email -> tym samym mniej JS
Źródła
Native image lazy-loading for the web!
JSJ 421: Semantic HTML with Bruce Lawson
Znacznik label - semantyczny HTML by Comandeer