Czy kiedykolwiek zastanawiałeś się, jak ogromne znaczenie na funkcjonowanie Twojej strony w Internecie ma struktura kodu HTML, z której jest zbudowana?

Oto czynniki mające wpływ na jakość pisanego kodu HTML:

1. Zgodność ze standardami
2. Semantyka
3. Kultura pisania kodu

Poniżej przedstawiam każdy z nich.

1. Zgodność ze standardami

HTML jest z natury łaskawym językiem dla Front-End Developerów. Oznacza to, że nawet słabej jakości kod, niezgodny ze standardami, jest przez przeglądarkę renderowany. Dlaczego więc dbać o poprawną walidację kodu HTML? Oto kilka powodów:

• przewidywalność renderowania strony
  Zachowanie strony, która przechodzi walidację HTML poprawnie, jest przewidywalne dla danej przeglądarki. W przypadku błędów, jak np. zwykłego niedomknięcia znacznika HTML, zachowanie strony może prowadzić do nieoczekiwanych rezultatów. Nowoczesne przeglądarki potrafią wyświetlić prawidłowo stronę pomimo napotkania niektórych błędów, co nie zwalnia programistę z dbałości o poprawność pisanego kodu.
• zapewnienie kompatybilności w przód
  Standardy webowe wciąż ewoluują, a przeglądarki rozwijają się w błyskawicznym tempie. W lipcu 2014 konsorcjum W3C ogłosiło ukończenie specyfikacji standardu HTML 5, a już powstała idea HTML 5.1, której data premiery jest przewidywana na 2016 r. ^[1] Kod napisany zgodnie z obecnymi standardami zapewnia poprawność funkcjonowania strony w przyszłości.
• łatwość konserwacji kodu
  W kodzie HTML napisanym zgodnie standardami, który nie jest „zupą tagów”, łatwiej jest dokonywać zmian, nawet przez osobę niebędącą jego autorem.
• oznaka profesjonalizmu
  Tylko profesjonaliści dbają, aby ich był zgodny ze standardami.

Narzędziem, dzięki któremu można sprawdzić, czy strona przechodzi walidację, jest wydany przez konsorcjum W3C Validator.

Poniżej przykład zgodnego i niezgodnego kodu ze standardem HTML 5.

Niepoprawny kod wygląda następująco:

<p>Lorem <strong>ipsum</p></strong>

Poprawny kod wygląda następująco:

<p>Lorem <strong>ipsum</strong></p>

2. Semantyka

W odnieniesiu do języka HTML, semantyka oznacza stosowanie znaczników zgodnie z ich przeznaczeniem. Wprowadzenie do HTML5 wielu nowych elementów otworzyło znaczne większe możliwości budowania semantycznych stron internetowych. Jakie ma to znaczenie i dla kogo?

• SEO,
  
• dostępność dla niepełnosprawnych.

SEO

Język HTML dla robotów wyszukiwarek, podobnie jak język polski dla Polaków, powinien być napisany w sposób zrozumiały, tworząc logiczną całość. Tak napisana strona jest bardziej wartościowa pod kątem SEO. Ważną rzeczą pod kątem SEO jest odpowiednie posługiwanie się nagłówkami

Zastosowanie opisów rozszerzonych HTML („rich snippets”), do których należą:

• Microdata,
• Microformats,
• RDFa.

pozwala podsumować treść strony, aby bezpośrednio w wynikach wyszukiwania znalazły się ważne informacje dla użytkownika, takie jak np.:

• średnia ocena produktu wraz z liczbą opinii,
• cena produktu,
• dane kontaktowe,
• informacje o wydarzeniu.

Pełna lista zastosowań znajduje się tutaj.

Źródło: https://support.google.com/webmasters/answer/99170?hl=en

Takie wyniki zdecydowanie są chętniej klikane, a więc odpowiednio przygotowany w tym celu HTML zwiększy ilość odwiedzających stronę.

Dostępność dla niepełnosprawnych

Przy budowaniu kodu HTML nie można zapominać o osobach niepełnosprawnych, które korzystają z Internetu. Mogą to być osoby np.:

• niedowidzące lub niewidome,
• niedosłyszące lub głuche,
• niepełnosprawne ruchowo.

które przeglądają strony internetowe w nietypowy sposób, np.:

• przy użyciu czytników ekranu,
• przy użyciu przeglądarek tekstowych,
• przy użyciu samej klawiatury.

Z tego względu pisząc HTML warto zwrócić m.in. uwagę na:

• tytuł strony
  Jest pierwszą rzeczą czytaną przez czytniki ekranu, opisujący zawartość całej strony.
• nagłówki
  Funkcją nagłówków jest zatytułowanie logiczne danych sekcji strony krótkim tekstem. Są odpowiednikiem spisu treści dla strony, dlatego ważne jest stosowanie nagłówków

  –

  zgodnie z hierarchią, aby osoby korzystające z czytników ekranu mogły się swobodnie poruszać po sekcjach strony.

• tabele
  Powinny służyć jedynie jako forma prezentacji treści. Nie wolno używać ich do budowania całego layoutu strony.
• określenie języka dla części stron
  język obcojęzycznych tekstów powinien być oznaczany odpowiednim atrybutem lang.
• obrazki
  Powinny posiadać atrybut alt opisujący, co znajduje się na obrazku
• linki
  Powinny być opisane atrybutem title
• używanie znaczników HTML zgodnie z ich przeznaczeniem
  Pozwala prawidłowo interpretować elementy na stronie. W HTML5 wprowadzano wiele nowych elementów o semantycznym znaczeniu

• atrybuty WAI-ARIA
  są to atrybuty pomagające czytnikom ekranu prawidłowo interpretować elementy nie mające domyślnie semantycznego znaczenia
• poruszanie się po stronie za pomocą samej klawiatury

Podstawowym dokumentem zawierającym wskazówki, jak budować dostępne serwisy internetowe jest WCAG 2.0.

3. Kultura pisania kodu

Każdy kod powinien być pisany w sposób uporządkowany, przejrzysty, możliwie najprostszy oraz dobrze udokumentowany. Dzięki temu:

• łatwo można nim zarządzać nawet przez osobę, która nie napisała danego kodu,
• po powrocie do projektu po dłuższym czasie, szybko i sprawnie można odnaleźć się w kodzie,
• strona jest bardziej zoptymalizowana przez mniejszą ilość kodu,
• wiadomo, że pracuje się z profesjonalistami dbającymi nawet o najmniejsze szczegółu.

Podsumowanie

Jak zostało przedstawione, nie ważne jest tylko jak strona internetowa wygląda na ekranie naszego monitora, ale na jakich fundamentach jest oparta. Dobrze napisany kod HTML jest punktem wyjściowym do sukcesu funkcjonowania web aplikacji w sieci.

Bibliografia

^[1] http://techcrunch.com/2014/10/28/w3c-declares-html5-standard-done/

Materiały dodatkowe

Google HTML/CSS Style Guide

HTML5 Semantics

Writing Your Best Code

Web Style Guide

W3C Validator