HTML & CSS Validator: A way to ensure writing clean markup codes
Tags: html, css, beginners, webdev
Published: 2022-05-16 08:29:55



One of the most repeated advice for beginners is to write clean codes that will be easy to understand for other developers. This is quite hard for a beginner as one is always focus on getting things done and working.

Yes, the code will eventually work, but if it breaks down, it will be hard to fix, and an external helping hand will have a nightmare fixing it, due to the lack of structure of the codebase.

For HTML and CSS, Google Style Guide is quite popular and recommended while Airbnb style guide is usually recommended for writing cleaner JavaScript codes. _Links to both style guide attached at the end of the article._

One thing is common with all Style Guide; if not followed, it does not have an immediate effect on the codebase. Though one might experience a breakdown in the future which could have been avoided if a style guide was followed.

Among the issues with following a style guide is one won't know which part the style guide is not followed since the code will still work perfectly, this make it hard to trace such minor code practice.

This is worse with HTML, because it does not give warning or error message, which is part of its limitation. This is where a validator comes in.

Example of HTML File checked with error
![HTML File checked with error](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bvk7b9sleoc2c1f45665.png)

The above is the error given from one of my project which is already on production and being used. But due to HTML limitations, no warning or error message given to call my attention to the typo error.

For HTML and CSS, the World Wide Web Consortium (W3C) have a validator that allows user to paste their HTML Codes directly, or upload their HTML or CSS files or paste their file URL and then validate it.

## HTML VALIDATOR
To validate your HTML codes/files (or other Markup files), use [W3C HTML Validator](https://validator.w3.org/)

### Step 1: Upload your html file or paste your codes or use the file url

Upload your HTML File
![Upload HTML File](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pbri9p61k33jucepxnoh.png)


### Step 2: Click on the Check button.

Example of HTML File checked without any error
![HTML File checked without any error](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bllx7i1i7j03ynynhnds.png)

Example of HTML File checked with error
![HTML File checked with error](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bvk7b9sleoc2c1f45665.png)


### Step 3: Go ahead to fix the error(s) if there is anyone reported.

---

## CSS VALIDATOR
To validate your CSS codes/files, use [W3C CSS Validator](https://jigsaw.w3.org/css-validator/)

### Step 1: Upload your CSS file or paste your codes or use the file url

Upload your CSS File
![Upload CSS File](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gkzdcvvn32a4hefvrjd8.png)


### Step 2: Click on the Check button.

Example of a CSS File validated  with no error but a minor warning
![CSS File validated  with no error but a minor warning](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jtltcdvvs5z93q5g69d8.png)

Example of CSS File validated without any error or warning
![CSS File validated without any error or warning](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6ag9e0ppn9erl5wgak4b.png)


If your CSS File or codes passed the validator process, a W3C tag is generated which one can place on their website or project, to show their actually put an effort in writing cleaner CSS Codes.

---
Google HTML and CSS Style Guide - https://google.github.io/styleguide/htmlcssguide.html 

Airbnb JavaScript Style Guide - https://github.com/airbnb/javascript 
---

I will love to hear your feedback after validating any of your HTML or CSS codes.
Thanks for reading