Validation of HTML source code, what are the common layout mistakes

31.07.18 IT / Html 2976

When coding site pages, you should adhere to certain rules in order to end up with a high-quality layout page that will pass the check in the HTML validator . There are a lot of common errors that are easily detected during validation.

Where can you go through the validation of the source code of your site pages? There can be many validation services, but it is better to use the official validator from the World Wide Web Consortium - " The W3C Markup Validation Service ", usually available at: validator.w3.org . There you can go through the code review by reference, download the source code manually as a file, or simply paste it into the text field. After checking, the validator will show errors or warnings, if any. The name of the error, the location where it is located, a link to the specification or other regulatory document, and recommendations for resolving the error are given.

You might think, why write valid code, because everything works like that. Why is it important that the page code is valid? There are many arguments, like this:

• valid HTML pages load faster because the browser doesn't have to fix invalid tags;
• on such a page all the elements work correctly; sometimes, due to incorrect layout, the elements may look normal, but not function;
• search engines value well-formed pages, this is important for them, as they use many algorithms, for example, to extract the semantic meaning of tags ;
• various services will correctly process your site - parsers, aggregators, etc.;
• some users can check your site in the validator and judge from this what code you write. Especially relevant for sites offering web development services.

What are common HTML layout errors and warnings ? Here are some examples:

• nesting block elements in inline, e.g. div in span ;
• the absence of the alt attribute for images, it is important, because if suddenly the image is not displayed, a description text will be shown instead;
• nesting items into lists laid out using the ul or ol tags;
• the lang attribute has not been added to the html tag;
• no doctype specified at the beginning of the page;
• specifying the border attribute for images in order to remove the border around the image - this should be done with CSS ;
• specifying the width attribute on various elements, there is also CSS for this;
• using old tags like font ;
• unclosed tags or vice versa, only the closing tag is specified;
• specifying unnecessary and obsolete attributes for the script tag, for example, type and charset .

Only some of the errors and warnings that can most often be found by the HTML validator have been considered. Of course, not all developers pay attention to this and fix layout errors right away, but it is recommended to do it as soon as possible. It's more difficult to fix layout errors because you might have to rewrite a lot of code, so it's better to write valid HTML code right away. To do this, you can first read various guides and articles on this topic.