Walidator W3C to must have do sprawdzenia nowego kodu lub problemeów z witryną. Jako programista WordPress Divi będziesz chciał mieć pewność, że kod Twojej witryny jest przejrzysty, prawidłowy i dostępny. Może to również pomóc w zwiększeniu optymalizacji pod kątem wyszukiwarek (SEO). Na szczęście możesz użyć walidatora W3C , aby upewnić się, że Twoja praca jest zgodna ze standardami.
Pzyjrzymy się bliżej W3C i jego różnym walidatorom. Następnie pokażemy, jak zweryfikować kod za pomocą tych narzędzi i zinterpretować wyniki.
Co to jest walidacja W3C?
W3C to skrót od World Wide Web Consortium i jest to międzynarodowa organizacja, która nadzoruje standardy kodowania w sieci. Oferuje usługi walidatora, które pomogą Ci zweryfikować, czy Twój kod HTML i CSS jest prawidłowy i wolny od błędów. Walidator CSS nazywa się Jigsaw i sprawdza zawartość pod kątem standardów internetowych W3C .
Przestrzegając standardów możesz zapewnić, że Twoje treści są przyjazne dla użytkownika i dostępne. Narzędzia te pomogą również zweryfikować zgodność międzyplatformową Twojej pracy, tworząc lepsze środowisko użytkownika (UX) ,a to z kolei może poprawić wyniki Core Web Vitals i poprawić SEO.
Jak zweryfikować kod za pomocą walidatora W3C?
Jak wspomniano wcześniej, walidatory W3C skanują kod HTML i CSS, aby upewnić się, że spełniają one standardy sieciowe określone przez organizację. Ten samouczek pokaże Ci, jak korzystać z tych narzędzi, aby sprawdzić swoją pracę.
Sprawdź poprawność kodu HTML
Zacznijmy od walidatora HTML. Możesz wpisać URI dokumentu, który chcesz sprawdzić, przesłać plik zawierający Twój kod lub wpisać znacznik, który chcesz zweryfikować w odpowiednim polu:
Po przesłaniu strony lub dokumentu do sprawdzenia, walidator wygeneruje listę wszystkich błędów i ostrzeżeń związanych z kodem HTML
Najlepiej byłoby mieć zero błędów i ostrzeżeń. Jednak nie zawsze jest to możliwe, ponieważ walidator nie bierze pod uwagę wszystkiego, co użytkownik może zobaczyć.
Na przykład, jeśli masz obraz z gradientem, narzędzie do sprawdzania poprawności zgłosi błąd informujący, że kontrast między obrazem a tłem jest niewyraźny. Można to jednak wyraźnie odróżnić za pomocą ludzkiego oka.
Pamiętaj, że jeśli Twoja strona zawiera JavaScript lub CSS, walidator HTML tego nie sprawdzi. W tym celu będziesz musiał użyć narzędzia W3C Jigsaw dla CSS lub JSHINT dla JavaScript.
Sprawdź poprawność CSS
Walidator CSS działa w ten sam sposób. Po przesłaniu identyfikatora URI, dokumentu lub znacznika do weryfikacji otrzymasz stronę z błędami i ostrzeżeniami:
Jak interpretować wyniki walidatora W3C
Walidatory generują dwa różne wyniki: błędy i ostrzeżenia. Często można zignorować ostrzeżenia, ponieważ nie wskazują one na żadne poważne problemy. Dobrą praktyką jest jednak publikowanie treści bez błędów.
Pamiętaj, że błędy wykryte przez walidator HTML wpłyną na użytkowników korzystających z pomocy dla osób niepełnosprawnych (takich jak czytniki ekranu) w celu uzyskania dostępu do treści online. Programista może łatwo przeoczyć te problemy z dostępnością . Mimo to mogą mieć negatywny wpływ na odbiorców. W następnej sekcji przyjrzymy się bliżej tym typowym błędom.
Typowe błędy walidacji W3C
Zarówno walidatory CSS, jak i HTML podświetlą wszelkie błędy w Twoim kodzie. Niektóre z najczęstszych problemów to:
- Niezamknięty element. Dodanie nowego elementu do strony wymaga tagu open i close. Gdy pojawi się ten błąd, oznacza to, że nie dołączyłeś tagu zamykającego. Jest to dość powszechny problem podczas pracy z siatkami.
- Brak tagu alt. Każdy obraz wymaga znacznika alt, który wyświetli się, jeśli grafika się nie załaduje. Opisuje obraz, a czytnik ekranu go odczyta. Dodanie znaczników alt jest podstawowym wymogiem dostępności.
- Nieprawidłowe użycie tagów nagłówka. Ten problem CSS pojawia się, gdy programista używa znaczników <h> jako stylu czcionki dla określonych podtytułów. Tagi są przeznaczone do celów nawigacyjnych, a nie stylistycznych, dlatego podtytuły nienawigacyjne powinny mieć rozmiar przy użyciu atrybutu font:size=#
Jak naprawić typowe błędy walidacji W3C?
Na szczęście walidator W3C mówi, gdzie znaleźć błędy i jak je naprawić. Na przykład, jeśli brakuje Ci tagu alt, walidator poinformuje Cię, gdzie należy go uwzględnić.
Jeśli masz otwarty tag, walidator nie powie ci, gdzie jest tag zamykający. Jednak poda lokalizację otwartego tagu, więc możesz po prostu przejść do tego bloku kodu i dodać brakujący tag.
Ponadto, jeśli użyjesz opcji bezpośredniego wprowadzania w walidatorze, zostanie wyświetlony pełny kod z podświetlonymi błędami. Dlatego możesz porównać go z oryginalnym kodem w swoim IDE, aby szybciej znajdować i naprawiać błędy.
Podsumowanie
Korzystanie z walidatora W3C może poprawić ogólną wydajność witryny. Pozwala uniknąć rozrostu kodu, rozwiązać problemy z dostępnością i naprawić typowe błędy. Wszystkie te elementy mogą prowadzić do szybszego czasu ładowania i lepszego UX, co z kolei może poprawić SEO Twojej witryny.
Jak widzieliśmy, możesz użyć W3C do walidacji kodu HTML i CSS. Narzędzie wygeneruje listę ostrzeżeń i błędów wraz z propozycjami ich naprawy. Typowe problemy to niezamknięte elementy, brakujące tagi alt i błędy analizy.
