HTML

Ach, HTML, drugie z brzydkich kaczątek Sieci, obok CSS-a. No bo w końcu to ten śmieszny język znaczników, który nawet nie jest programowaniem. Cóż może być w nim takiego trudnego, prawda?

Otóż, wbrew pozorom, bardzo dużo. Bo mimo wszystko HTML stanowi warstwę treści. Najłatwiej porównać go do formatowania, jakie dostępne jest w edytorze tekstu. W Wordzie też mogę pogrubić jakiś tekst, przekreślić go, wskazać, że stanowi nagłówek… Formatowanie pozwala treści lepiej wyrażać swoje znaczenie. Dokładnie tak samo jest w przypadku Sieci i HTML-a. To najbardziej podstawowa forma strony WWW, jej szkielet. I jeśli on będzie nieprawidłowy, to wiele rzeczy może nie działać poprawnie – nawet jeśli na pierwszy rzut oka nie sposób to zauważyć.

W kontekście HTML-a najczęściej mówi się o semantyce – czyli o znaczeniu poszczególnych elementów. I w sumie nic w tym dziwnego: semantyka to tak naprawdę trzon HTML-a. Tylko że jest to też trzon bardzo abstrakcyjny, który nie brzmi porywająco. Gdy mówi się o tym, że należy odpowiednio dobrać elementy na stronie, to często nie czuć stawki. No bo co złego tak naprawdę się stanie, gdy zamiast nagłówka użyjemy odpowiednio ostylowanego akapitu? Przecież widoczny rezultat jest dokładnie ten sam…

I tutaj na scenę wkracza Vasilis van Gemert z pojęciem HTML-owego UX-u. Owszem, HTML to semantyka – ale przecież można ją sprzedać w odpowiedni sposób. Zamiast skupiać się na teoretycznej poprawności i egzotycznych przypadkach, takich jak article vs section, skupmy się na przypadkach, w których odpowiedni wybór elementu może dać faktyczną korzyść osobie użytkowniczej. Wracając do naszego nagłówka: prawdziwy nagłówek pozwala choćby na nawigację po stronie przy pomocy technologii asystującej. Krótka demonstracja tego, w jaki sposób przeskakiwać między nagłówkami przy pomocy czytnika ekranowego, o wiele bardziej uzmysłowiłaby ważność nagłówków, niż nawet najdłuższe elaboraty o ważności semantyki. Najbardziej wdzięcznymi przykładami jednak bez wątpienia są elementy interaktywne. Ot, taki przycisk. Ten domyślny, HTML-owy – a więc element button – dostarcza bardzo sporo UX-u. Można go sfocusować przy pomocy klawiatury, kliknąć przy pomocy Entera albo spacji, domyślnie jest też nieprzeciągalny, może wysłać formularz i to bez potrzeby dodawania żadnego JS-a… Słowem: odtworzenie tego zachowania skryptami jest niezwykle trudne.

A po takich “wow” elementach można przejść do tych bardziej abstrakcyjnych. Bo okazuje się, że sekcje i artykuły też mają swoje praktyczne zastosowanie. Jednym z nich jest choćby dobór treści w trybie czytania w przeglądarkach. I tak można schodzić głębiej i głębiej, pokazując np. jak obrazki bez atrybutu [alt] wpływają na osoby użytkownicze czytników ekranowych. I nagle się okaże, że ludzie mimowolnie dbają o semantykę. I to nawet nie dlatego, że jest ważna i że należy to robić. A dlatego, że dobry HTML to dobry UX.

Źródła

Dodatkowe materiały