4 min. czytania
Jak działa i skąd się wziął internet
Niekiedy można mieć wrażenie, że internet jest z nami od zawsze. Czy wiemy jednak jak i kiedy powstał? Jakie są podstawy jego działania?
Wprowadzenie do semantycznego HTML
Teoretycznie jest to temat do omówienia na początku nauki frontendu, ale prawda jest taka, że sporo doświadczonych inżynierów nie do końca wie o co w tym chodzi. Temat można wyjaśnić w dwóch zdaniach, ale stosowanie się do niego nie jest wcale takie proste.
Przede wszystkim - pisanie semantycznego kodu powinno nam służyć. W sensie, powinna iść z tego jakaś wartość. Jeżeli mamy spędzić godzinę na myśleniu jaki tag powinien zostać użyty albo kiedy ktoś blokuje naszą pracę wytykaniem tego za każdym razem w code-review, to coś jest nie tak. Ale po kolei!
Czym jest semantic HTML?
To określenie na stosowanie tagów, które mają przypisaną do siebie jakąś “rolę”. Na przykład h1 oznacza nagłówek sekcji, jak np. nazwa rozdziału strony (często napisana dużymi, grubymi literami). Z kolei p to paragraf, wydzielony fragment tekstu. Problem w tym, że jeszcze kilka lat temu, to były jedne z niewielu takich tagów.
Większość kodu ogarniało się za pomocą div, który był takim “uniwersalnym opakowaniem na wszystko inne”.
Po co jest semantic HTML?
Jest kilka powodów, ale nie każdy zawsze ma takie samo znaczenie.
SEO
Optymalizacja działania silników wyszukiwania (SEO). Wszystkie zautomatyzowane narzędzia do interpretowania treści na stronie mają dużo prostszą robotę jeżeli dostają semantyczny kod HTML. Oczywiście pod warunkiem, że ktoś tych semantycznych tagów używa poprawnie. Dzięki temu nasza strona może potencjalnie wyżej się pozycjonować w wynikach wyszukiwania Google.
Kiedy nie ma to znaczenia: Jeżeli tworzymy aplikację zamkniętą dla świata to ten punkt nie będzie miał dla nas znaczenia.
Accessibility
Pod tym terminem kryje się to jak bardzo nasza strona jest dostępna dla różnego rodzaju odbiorców. Dzięki użyciu semantycznego HTML, narzędzia pomocnicze, takie jak czytniki ekranowe, obsługa głosowa i inne, mogą działać sprawniej.
Czy wiedziałeś, że na świecie jest ok 2.2 miliarda osób z niepełnosprawnością wzrokową? Około 466 milionów ma znaczną utratę słuchu (globalnie), osób z niepełnosprawnością ruchową w samych stanach jest ok 13.7%, a tych z zaburzeniami neurologicznymi ok 10.8%.
Z kolei do 2050 roku, liczba osób starszych na świecie (powyżej 60 roku życia) wzrośnie aż do 2.1 miliarda. Wiesz co łączy te wszystkie grupy? Mogą skorzystać ze stron i aplikacji o wysokiej dostępności.
Kiedy nie ma to znaczenia: Nie każda aplikacja musi spełniać normy zapewniające wysoką dostępność. Nie oszukujmy się, tworząc aplikację na użytek wewnętrzny w firmie, o wąskim gronie odbiorców, dodatkowy czas poświęcany na dbanie o accessibility nigdy się nie zwróci.
Uwaga! Niektóre tagi mają znaczenie semantyczne tylko po umieszczeniu ich w odpowiednim miejscu. Więcej o tym piszę w artykule o landmarkach HTML.
Czytelność kodu
Używając tagów semantycznych, sprawiamy, że dużo prościej jest zrozumieć “co jest czym w kodzie”. Mam na myśli to, że bez użycia komentarzów, możemy “przeskanować” plik i całkiem nieźle zrozumieć jaka jest jego struktura, czemu służy i jak może wyglądać.
Kiedy to ma mniejsze znaczenie: Kiedy stosujemy zasady atomic design i budujemy naszą aplikację z małych komponentów. Wtedy i tak nazywamy je zgodnie z ich przeznaczeniem więc kod jest zrozumiały w takim samym, a nawet większym stopniu.
Podsumowanie
Semantyczny HTML jak najbardziej ma znaczenie, ale nie zawsze równie duże. Jeżeli tworzysz aplikację na użytek wewnętrzny (nie będzie dało się jej wyszukać przez Google i inne podobne narzędzia), znasz użytkowników i ich ograniczenia zdrowotne (np. wszyscy mają sprawny wzrok - choć to akurat nie jest coś co jest dane nam na zawsze), a na dodatek używasz CSS-in-JS albo dzielisz kod na wiele małych komponentów - jest spora szansa, że nie musisz sobie nimi szczególnie zaprzątać głowy.
Pamiętaj po prostu aby decyzja o używaniu ich lub nie, była efektem analizy w każdym projekcie z osobna.
Początkowo, ucząc się o dobrych praktykach, ma się wrażenie, że są one świętymi zasadami. Prawda jest jednak taka, że prawdziwe ich zrozumienie zaczyna się wtedy kiedy potrafimy podjąć przemyślaną decyzję o tym by ich nie używać. Nie z lenistwa czy braku wystarczającej wiedzy, tylko z pragmatyzmu. Jeżeli sukces produktu zależy od dostarczenia go bardzo szybko aby pierwsze osoby mogły go testować, to uzasadnione bywają drogi na skróty.
Tagi:
