Semantyka

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').

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.

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.

Oto niektóre z około 100 elementów semantycznych:

• <article> (en-US)
• <aside>
• <details>
• <figcaption> (en-US)
• <figure> (en-US)
• <footer> (en-US)
• <header> (en-US)
• <main> (en-US)
• <mark> (en-US)
• <nav> (en-US)
• <section>
• <summary> (en-US)
• <time> (en-US)

• HTML element reference on MDN
• Using HTML sections and outlines on MDN
• The meaning of semantics in computer science on Wikipedia