Semantyka
W programowaniu Semantyka oznacza znaczenie kawałka kodu — na przykład: "Jaki efekt da ta linia kodu w JavaScripcie?" lub "Jaki cel lub rolę odgrywa ten element HTML?" (ale nie "Jak to wygląda?").
Semantyka w języku JavaScript
Załóżmy, że chcemy stworzyć funkcję, która przyjmuje string jako parametr i zwraca element <li>
z tym napisem jako jego textContent
. Zwróć uwagę na to, czy potrzebowałbyć przeczytać kod, by dowiedzieć się co dokładnie robi ta funkcja, gdyby była nazwana build('Peach')
lub createLiWithContent('Peach')
.
Semantyka w języku CSS
Załóżmy, że chcesz ostylować listę li
elementów reprezentującą różne owoce. Zwróć uwagę na to, czy wiedziałbyć do której części DOM jest odnosi się selektor div > ul > li
lub .fruits__item
.
Semantyka w języku HTML
W języku HTML, element semantyczny <h1>
(en-US), nadaje rolę (lub znaczenie) napisowi pomiędzy znacznikami: "najważniejszy nagłówek na twojej stronie"
<h1>To jest najważniejszy nagłówek</h1>
Domyślnie, większość przeglądarek ostylowuje element <h1>
(en-US) dużą czcionką by wyglądał jak nagłówek (jednak możesz go ostylować jak chcesz).
Z drugiej strony, możesz dowolny element możesz ostylować tak by wyglądał jak nagłówek. Tak jak poniżej:
<span style="font-size: 32px; margin: 21px 0;">Czy to jest najważniejszy nagłówek?</span>
Powyższy element będzie wyglał jak najważniejszy nagłówek, nie ma wartości semantycznej. Dlatego najlepiej używać elementów HTML zgodnie z ich przeznaczeniem.
Kod HTML powinien reprezentować dane i nie być oparty na domyślnym stylowaniu. Prezentacja (czyli jak powinny one wyglądać) to zadanie wyłącznie języka CSS.
Poniżej przedstawiono niektóre zalety poprawnego stosowania semantycznych znaczników:
- Wyszukiwarki będą rozpoznawały zawartość jako ważne słowa kluczowe co wpłynie na ranking stron i zasięg strony (zobacz SEO (en-US))
- Czytniki będą mogły używać ich jako wskazówek pomagając osobom z pewnymi niepełnosprawnościami wzrokowymi poruszać się po stronie
- Poruszanie po kodzie z wymownymi nazwami znaczników będzie znacznie łatwiejsze
- Sugeruje typ zawartości, która ma się znaleźć między znacznikami
Gdy zastanawiasz się, który znacznik należy użyć, zapytaj się, "Który element najlepiej określa/reprezentuje zawartość, którą chcę podać?". Na przykład: Czy to lista ponumerowana czy nie? Czy to artykuł podzielony na sekcję i częścią boczną? Czy to lista definicji? Czy to powinno mieć własny nagłówek? Czy ten obrazek potrzebuje podpisu? itp.
Elementy semantyczne
Oto niektóre z około 100 elementów semantycznych:
Zobacz także
- HTML element reference on MDN
- Using HTML sections and outlines on MDN
- The meaning of semantics in computer science on Wikipedia