As we mentioned in a post about HTNL5 new tags and where to use them, we want to talk about HTML5 best practices and what bad practices to avoid . It is essential to have a well structured markup that could be read and maintain easily.
First things first. Doctype should be your first line in you HTML code and its HTML5 is the recommended one:
All tags should have a closing tag unless they are self closing tags. Self closing tags are:
<br>, <hr>, <img>, <input>, <link>, <meta><area>, <base>, <col>, <command>, <embed>, <keygen>, <param>, <source>, <track>, <wbr>
Know them? HTML and body and head are actually optional. Yes that is right. They are considered as present even if you oit them.
The “lang” attribute
Although earlier we said HTML is an optional tag but for internationalisation purposes it is best practice to have the “lang” attribute in the markup.
Avoid XML declarations unless
Unless you right a XML document.You don’t need this declaration before Doctype:
The “base” tag
It is a ver useful tag but remember it makes all links relative to the href it specifies:
<base href="https://www.example.com/" />
unless you specify the link explicitly.
For example, an internal link
href="#internal"will be interpreted as
Also, linking an external webpage like
href="example.org"will be interpreted as
It is safer to always use absolute paths for your links.
For accessibility you should always declare this tag in the page.
<meta charset='utf-8'> to ensure the page will be viewed correctly.
Description meta tag
It is best practice to use it as search engines and crawlers pull that out as page description when they crawl the page:
Do not use deprecated tags
These tags are deprecated. Never use them. Also avoid using stylistic tags like and and . Instead use CSS as it is best practice.
tag to format the layout
tag is not for layout formatting and you should use CSS margin and padding to add spaces. You better use
inside an element to addd line breaks:
The alt attribute
Always use alt attribute for your images as an alternative when the image couldn’t get loaded.
The title attribute
Do not use title attribute for images. It is best practice not to as it is a tooltip that is shown with the image and in lacks in compatibility with touch only browsers in phones and tablets. Use “alt” attribute to describe the image.
The tag does not preserve any newline or white spaces but
tag does. So usetag alone to avoid this.
Use comments on closing tags especially divs to increase the readability of your code:
</div><!-- .nextclass" -->
</div><!-- .myclass -->
We will talk about General coding best practices later on. Also will explain about CSS best practices in a seperate article. Hope this HTML guideline was helpful.