-
Validating web page: The concept is while we work there might be mistake/human error/typo adn so on, as a result our website may not look as expected. In this situation, we can use html validator and css validator to find the potential errors in our code.
-
HTML Validator: Let’s run our code in a standard html validator. So we visit to https://validator.w3.org this is a standard markup validation service.
-
Here we have 3 methods to validate html markup:
- Validate by we address(if the site is live)
- Validate by file upload
- Validate by direct input
-
Report: We directly input the code and check. This point we got; one warning, one error, and one info.
-
Fixing codes:
- Warning: The warning says, we did not add the language attribute to the html. This the best practice to add lang attribute to tell search engines what is the language of the webpage. So that it can display a better results. This is very easy to fix. Add lang attribute and set this to “en” inside the tag.
<!DOCTYPE html>
<html lang="en"></html>
- Error: The error says the img element mush have an alt attribute. alt attribute contains the description of image and incase the image does not display then the altranative text will be displayed. Let’s add the alt attribute and set an “image_description” inside img tag.
<body>
<img src="images/nameera.jpeg" alt="Evening girl" />
<p class="username">@khalid</p>
<p>Evening sun in West</p>
</body>
- Info: This says the img tag should not have trailing slash. It is because the image element does not have child element so trailing slash does not required. To fix this just remove ’/’ from the closing tag.
<img src="images/nameera.jpeg" alt="Evening girl" />
-
Now save the changes and check the the codes in the validator once more time and see the error resolved or not.
-
CSS Validator: Let’s go to https://jigsaw.w3.org/css-validator/, a standard css validator service. This is the same interface as html validator. So we can validate css by address, upload file or can direct input.
-
Separate css file: For this page we embeded all our css code inside the html markup. But when the things are complex we separated the css files so that codes becode more cleaner. For now copy the css codes and check in the validator.