Sobota, 21 maja 2022

Czy nadszedł czas, aby zresetować HTML?

25 stycznia 2022

HTML jest jednym z fundamentalnych elementów składowych sieci WWW. Ale tak jak najlepsze praktyki i techniki projektowania stron internetowych zmieniają się z czasem, tak samo zmienia się kod, którego używamy. W miarę ewolucji HTML, niektóre z jego starszych znaczników zostały wycofane z użycia, podczas gdy inne części zostały ponownie wykorzystane.

Czy to jednak stwarza dla nas więcej problemów? Czy nie lepiej byłoby zacząć od nowa, aby upewnić się, że wszyscy pracujemy w tym samym języku, zamiast próbować usuwać fragmenty, których nie chcemy lub nie potrzebujemy?

 

Problemy z trzymaniem się dotychczasowego HTML-a

Przyjrzyjmy się, co się dzieje, gdy zmieniamy zasady HTML z biegiem czasu i jak to wpływa na sieć:

1. Pozostawienie przestarzałego HTML-a jest ryzykowne

Niezależnie od tego, czy pewne funkcje stały się przestarzałe i muszą zostać usunięte, czy też przeglądarki przestały w ogóle wspierać pewne znaczniki, przestarzały kod w końcu staje się problemem.

Długą listę przestarzałego kodu HTML znajdziesz na stronie HTML.com:

W przypadku wielu z nich znaczniki i atrybuty HTML zostały zastąpione przez bardziej wydajne stylizacje CSS. Istnieją również przykłady deprecjacji HTML, ponieważ jego funkcje stały się przestarzałe (jak ramki).

Mimo to, wciąż istnieją strony internetowe, które zawierają przestarzały HTML.

W niektórych przypadkach, HTML siedzi cicho po drugiej stronie strony witryny. Jeśli jednak jest ich wystarczająco dużo, te dodatkowe znaki i dyrektywy mogą spowolnić czas przetwarzania Twojego serwera i spowodować, że strony będą wyświetlane wolniej niż zwykle.

W innych przypadkach, HTML łamie funkcje na front-endzie strony. Weźmy na przykład to ostrzeżenie od Mozilli dotyczące znacznika tagu:

Używanie przestarzałego kodu może spowodować niespójne i złe doświadczenia na front-endzie. A kiedy wszystkie przeglądarki w końcu się dogadają i zdecydują, że nie będą już wspierać znacznika HTML, wszyscy odwiedzający zostaną z uszkodzonym UI.

Tak więc, choć to świetnie, że HTML5 zdeprecjonował starszy HTML, który nie jest już przydatny lub konieczny, nie powinno to powstrzymać wszystkich przed używaniem go lub pozostawieniem na starszych stronach.

2. Starszy kod skupia się na stylu, a nie na semantyce

Jak już wspomniałem, wiele przestarzałego kodu HTML zostało wycofanych i zastąpionych stylizacją CSS. I to jest dobra rzecz.

Pozwólcie, że podam wam prosty przykład...

Moją ulubioną książką jest " The Stand " Stephena Kinga. Kiedy przeczytałem ją po raz pierwszy, nie spałem przez trzy dni. Na szczęście, kiedy wracam do niej co roku, mam mniej koszmarów i mogę bardziej docenić jej fabularny aspekt.

W powyższym akapicie, użyłem znacznika aby wyróżnić kursywą kilka słów.

We wczesnych dniach HTML, oznaczał "kursywę" (tak jak oznaczał "bold"). W HTML5, jednakże, nadal będzie renderowany jako kursywa, ale jego znaczenie semantyczne nie jest tak szerokie. Została ona ponownie użyta do wskazania zmiany stylistycznej, co jest ważne dla takich rzeczy jak nazwy książek i filmów, słowa obce, i tak dalej. Aby wyrazić podkreślenie, używamy znacznika zamiast tego.

Zachowując spuściznę i może jednak prowadzić do problemów.

W powyższej wypowiedzi, kursywą zaznaczyłem nazwę książki (The Stand), jak również liczbę nieprzespanych nocy (trzy dni) z. Niezależnie od tego, czy projektant zdecyduje się dziś, jutro czy za dziesięć miesięcy, że chce zmienić sposób stylizacji literackich lub filmowych odniesień, mój wybór HTML stanie mu na drodze.

Ponieważ cała moja kursywa jest oznaczona przez style nie mogą być uniwersalnie stosowane do konkretnych treści (takich jak odwołania do książek). Zamiast tego, projektant musiałby przejść i wyczyścić mój kod tak, aby wyglądał tak jak ten:

Moją ulubioną książką jest "The Stand " Stephena Kinga. Kiedy przeczytałem ją po raz pierwszy, nie spałem przez trzy dni. Na szczęście, kiedy nieuchronnie powracam do niej co roku, mam mniej koszmarów i mogę bardziej docenić jej fabularny aspekt.

Pozwoliłoby to następnie semantycznie kursywowanej treści pozostać nienaruszoną, podczas gdy projektant lub programista dostosowuje style tytułu książki tutaj i na całej stronie. (Chociaż, tak naprawdę, pierwsze wyróżnione kursywą wyrażenie powinno być otoczone przez ponieważ byłoby to bardziej semantycznie dokładne).

Choć to świetnie, że stworzyliśmy wytyczne dotyczące używania starszego HTML-a w dzisiejszych czasach, utrzymywanie starego kodu może dezorientować pisarzy, projektantów i innych, którzy są zaznajomieni z poprzednim sposobem formatowania treści. Resetując HTML, wyrzucając stare style i tworząc jeden język, którego używamy konsekwentnie w całej sieci, nie przysporzymy sobie później więcej pracy.

3. Przestarzały kod utrudnia dostępność

Innym ważnym powodem, dla którego przestarzały HTML jest problemem, jest dostępność.

Na początek, kiedy zostawiasz przestarzały i nieobsługiwany kod, prawdopodobnie spowoduje on problemy dla czytników ekranu, wyszukiwarek i przeglądarek, które używają HTML jako źródła informacji o treści.

Znaczniki nagłówkowe, nie są używane tylko do widocznego rozbijania dużych fragmentów tekstu. Znaczniki nagłówkowe, a dokładniej ich hierarchia, przedstawiają ważne informacje na temat relacji pomiędzy tematami na stronie - i to jest właśnie ten rodzaj rzeczy, które czytniki ekranu i wyszukiwarki wyłapują.

 

Dlatego właśnie musimy być bardzo ostrożni w kwestii kodu, który pozostawiamy za kulisami, nawet jeśli czytelnicy na frontendzie nie mogą go zobaczyć. Przyjrzyjmy się przykładowi, jak może to wpłynąć na dostępność:

 

Czy w restauracji jest menu à la carte, czy tylko prix fixe?

 

Jeśli czytnik ekranu przeczytałby to zdanie, francuskie zwroty zostałyby wypowiedziane z takim samym naciskiem, jak wszystkie inne wyróżnione kursywą słowa na stronie.

 

Dlatego właśnie HTML5 zachęca do kodowania semantycznego zamiast czysto stylistycznego.

 

Prawidłowy sposób zapisu HTML w powyższej linii brzmiałby:

 

Czy jest menu à la carte, czy tylko prix fixe dziś wieczorem?

 

Istnieją dwa powody, aby to zrobić:

 

  1. Aby wskazać czytnikom ekranu, że nastąpiła zmiana języka.

  2. Aby ułatwić projektantom lub programistom tworzenie niestandardowych stylów dla obcych fraz.

Kodowanie semantyczne jest niezbędne dla projektantów, którzy pracują nad wielojęzycznymi stronami internetowymi.

 

Jak wyjaśnia World Wide Web Consortium, języki takie jak japoński nie używają kursywy ani pogrubienia dla podkreślenia - przynajmniej nie w taki sposób, jak robią to osoby anglojęzyczne.

 

Tak więc, aby poprawnie przetłumaczyć stronę z języka angielskiego, japoński projektant musiałby usunąć kursywę lub pogrubienie i dodać nawiasy otaczające słowa. Jednakże, jeśli wszystko jest zakodowane za pomocą i lub jest to mieszanka i i i będzie naprawdę trudno znaleźć i zastąpić poprawny HTML z łatwością.

 

Tak więc, jeśli dostępność lub internacjonalizacja są dla Ciebie istotne, zrozumienie HTML, którym piszesz, będzie naprawdę ważne.

Podsumowanie

 

Faktem jest, że przepisanie zasad HTML wymaga dużo pracy. Więc chociaż byłoby wspaniale zresetować HTML, nie wiem czy jest to aż tak praktyczne.

 

Wszystko, co możemy zrobić, to być na bieżąco z tym, co dzieje się z językiem, usuwać starszy kod z naszych stron w momencie, gdy staje się on przestarzały i zawsze używać znaczników i atrybutów, które są obsługiwane. Bawiąc się przestarzałym kodem, narażamy na niebezpieczeństwo odwiedzających stronę, dlatego najlepiej jest poświęcić czas na usunięcie starego kodu przy każdej nadarzającej się okazji.

 

Jeśli wszyscy będziemy w stanie się do tego przyzwyczaić, problematyczny HTML w końcu zniknie z naszych stron i pamięci.