Ostatnia aktualizacja:

3 września 2025

Opublikowano:

1 lutego 2017

Standardy W3C – walidacja strony internetowej

Standardy W3C – walidacja strony internetowej

W3C czyli Word Wide Web Consortium to organizacja założona 1 października 1994 roku, która zajmuje się ustanawianiem standardów tworzenia stron WWW. Konsorcjum powstało aby powstrzymać proces niepoprawnie tworzonych stron, które źle się wyświetlały na różnych przeglądarkach. Organizacja ta zajmuje się również ocenianiem zawartości stron pod kątem przemocy i pornografii, dbaniem o prawa autorskie oraz bezpieczeństwem w sieci. W3C oferuje bezpłatne walidatory HTML i CSS, dzięki którym możemy sprawdzić czy dana strona jest zgodna ze standardami.

W tym artykule dowiesz się:
  1. Walidacja stron internetowych
  2. Korzyści walidacji W3C?

Więcej o temacie możesz przeczytać na stronach:

Walidacja stron internetowych

W3C głównie zajmuje się opracowywaniem standardów tworzenia protokołów http, standardy tworzenia stron w języku HTML, XHTML, standardy CSS, XML oraz DOM. Postaram się przybliżyć nieco na czym polega taka walidacja na podstawie języka HTML oraz CSS.

Na początek może w skrócie co to jest HTML. Język ten używa tagów znaczników do opisywania stron internetowych, są one otoczone nawiasami ostrymi jak <html> oraz najczęściej występują w parach, jak <b> </b>. Podczas walidacji sprawdzane są otwarcia i zamknięcia tagów, czy są w dobrym miejscu użyte oraz czy nie są np. puste. Na stronie walidatora organizacji W3C mamy trzy opcje walidacji: poprzez podanie adresu URL strony, wgranie pliku, który chcemy sprawdzić oraz wklejenie samego kodu bezpośrednio na stronie walidatora. Ja użyję drugiej opcji i wgram plik utworzony przeze mnie:

Walidacja za pomocą pliku
Walidacja za pomocą pliku

Po kliknięciu przycisku Wybierz plik wybieramy plik, który chcemy przetestować. Zawartość mojego pliku wygląda następująco:

<!DOCTYPE html>
<html>
  <head>
    <title></title>
  </head>
  <body>
    <h1>Przykładowa strona</h1>
  </body>
</html>

W3C walidator natomiast zwrócił mi dwa błędy, z których wynika, że nie umieściłam w dokumencie polecenia deklaracji strony kodowej oraz tag <title> pozostawiono pusty.

Wynik walidacji
Wynik walidacji

Poprawa moich błędów będzie polegać na dodaniu w tagu <head>:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

oraz uzupełnienie brakującego tekstu. Po tych krokach sprawdzam plik raz jeszcze, a oto wynik:

Poprawna walidacja
Lepszy wynik

W3C walidator nie wykrył już żadnych błędów, więc możemy uznać, że nasz plik HTML spełnia standardy języka HTML. CSS czyli kaskadowe arkusze stylów, to język służący do opisu formy wyświetlania strony internetowej. To lista dyrektyw, które mówią jak ma zostać wyświetlona zawartość danego elementu na stronie. Mój przykładowy kod CSS zawierający błędy, wygląda następująco:

body {
  background-color: #ff;
  color: black;
  margin: 0;
  padding: 0;
  border: 0;
}
h1 {
  font-size: 12px;
  font-weight: normal
  line-height: 20pt;
  font-color: #000;
}

W przypadku walidacji pliku CSS przenieśmy się na stronę https://jigsaw.w3.org/css-validator/ i tutaj też mamy trzy opcje do wyboru: podanie url pliku, załadowanie pliku z dysku lub wpisanie ręcznie kodu w polu. Ja wkleję powyższy kod do okna i zobaczymy jakie błędy zwróci walidator.

Walidacja CSS
Walidacja CSS

W3C walidator wykrył popełnione przeze mnie błędy w kodzie co widać na powyższym zdjęciu. Zwrócił, że podana została zła wartość jeśli chodzi o kolor tła, zapomniałam dodać średnik po jednej z dyrektyw oraz podałam właściwość która nie istnieje. Po poprawieniu tych rzeczy walidacja została zakończona pomyślnie i nie występują już błędy w kodzie.

Korzyści walidacji W3C?

Największą zaletą jest chyba to, że nasza strona będzie się dobrze wyświetlać na każdej przeglądarce. Jeśli będziemy się stosować do standardów to nasze strony prawie zawsze będą poprawnie działać na przeglądarkach dla osób niepełnosprawnych. Posiadanie na rynku takiej strony jest na pewno pewnego rodzaju prestiżem. Firma projektująca strony pod kątem tych standardów na pewno nie może narzekać na brak klientów.

Ostatnia aktualizacja:

3 września 2025

Opublikowano:

1 lutego 2017

W tym artykule dowiesz się:
  1. Walidacja stron internetowych
  2. Korzyści walidacji W3C?

Polecane artykuły

AI zmienia e-Commerce szybciej niż myślisz. Przygotuj się na ruch agentów AI – Marcin Kamiński

AI nie jest już „nowym trendem”. To zmiana, która właśnie trwa - a większość firm wciąż nawet nie wie, że już je dotknęła. W tym odcinku rozmawiam z Marcinem Kamińskim, który jako jeden z pierwszych w Polsce mówi o ruchu agentowym - nowym źródle odwiedzin w e-Commerce, którego… nie widzisz w Google Analytics. Mówimy o tym: ➡️ jak AI i ChatGPT zmieniają sposób wyszukiwania i zakupów online, ➡️ dlaczego Twoją stronę coraz częściej odwiedzają boty, a nie ludzie, ➡️ jak przygotować się na zakupy bezpośrednio z ChatGPT, ➡️ i czemu przyszłość e-commerce to nie SEO, tylko SEO dla agentów AI. To rozmowa o tym, co wydarzy się szybciej, niż myślisz – i dlaczego teraz jest moment, żeby się przygotować.

Czytaj więcej
Wyszukiwarka w sklepie internetowym

Wyszukiwarka Produktów w sklepie internetowym, czyli jak zwiększyć konwersję?

Żeby klient kupił u Ciebie produkt, musi go najpierw znaleźć. Jednak jeśli w swojej ofercie masz tysiące produktów, to zadanie nie należy do łatwych. Z pomocą może przyjść wyszukiwarka w Twoim sklepie internetowym. Musi być jednak zrobiona dobrze, bo inaczej zamiast ułatwiać odnalezienie odpowiedniego produktu, staje się narzędziem tortur dla niecierpliwych klientów. Dlaczego wyszukiwarka produktów […]

Czytaj więcej
Integracja Magento

Integracja z Magento 2 — stabilność integracji, obsługa awarii, kolejkowanie

Każde zaawansowane Magento wdrożenia wiążą się z integracją. W końcu Twoja firma funkcjonuje w dużo większym kontekście biznesowym. Sprzedaż to nie wszystko! Ważne są też zarządzanie dostawami, zamówieniami, klientami, produktami i tak dalej. Jeśli używacie więcej niż jednego systemu, prawdopodobnie temat integrowania masz już za sobą. Co więcej, z dużym prawdopodobieństwem niekoniecznie wspominasz go z […]

Czytaj więcej
demo magento

Przetestuj demo Magento 2

O technologii Magento napisaliśmy i powiedzieliśmy już wiele. Teraz możesz samodzielnie przetestować ją w praktyce. Udostępniamy Ci zupełnie darmowe demo Magento z frontendem i dostępem do panelu administracyjnego. Przetestuj je samodzielnie lub umów się na pokaz na żywo. Co zawiera demo Magento? Magento to lider oprogramowania do tworzenia sklepów internetowych B2B i systemów sprzedażowych B2B […]

Czytaj więcej

Skontaktuj się z nami

Opowiedz nam o swoich ambicjach związanych z e-commerce i pozwól nam wspólnie je zrealizować.

Skontaktuj się z nami