Powrót do kategorii
Frontend
tagi
css3, html, html5, semantyka, seo,

Dlaczego pisanie wysokiej jakości kodu HTML5 ma znaczenie?

Artur
Artur, 09/01/2015

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:

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

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 <h1> – <h6> na stronie, by tworzyły poprawny konspekt strony.

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

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

Pełna lista zastosowań znajduje się tutaj.

rich-snippets

Ź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.:

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

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

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:

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

Podobne artykuły

Zalety stosowania zasady „Mobile first“ przy tworzeniu stron RWD

O zaletach koncepcji „Mobile first” i tworzenu RWD zaczynając od urządzeń mobilnych.

Ograniczenia CSS Sprites, czyli optymalizacja z rozsądkiem

Na co zwracać uwagę budując CSS Sprites i jak nie przedobrzyć z optymalizacją.