HTML5 Best Practices and what to avoid

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.

Doctype 

First things first. Doctype should be your first line in you HTML code and its HTML5 is the recommended one:

<!DOCTYPE html>

Closing tags 

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>  

Optional tags  

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 href="https://www.example.com/#internal"

Also, linking an external webpage likehref="example.org"will be interpreted as href="https://www.example.com/example.org"

It is safer to always use absolute paths for your links.

Title tag

For accessibility you should always declare this tag in the page.

Character encoding

Always declare <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:

 <meta name="description">

Do not use deprecated tags

<big><center><strike><blink>

These tags are deprecated. Never use them. Also avoid using stylistic tags  like

and and . Instead use CSS as it is best practice.

No
tag to format the layout

The
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:

`

`

`

`

</label>

Type Attribute

The type attribute is not necessary for link and script tags. All browsers expect a link tag for a stylesheet and a script tag as a Javascript tag. So always do this:

`

`

<script src="script.js"></script>

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
 and  tags

The tag does not preserve any newline or white spaces but

 tag does. So use 
tag alone to avoid this.

Comments

Use comments on closing tags especially divs to increase the readability of your code:

<div class="myclass">
<div class="nextclass">
...
</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.

© 2019
Azadeh Faramarzi

This site is created and maintined by Azadeh Faramarzi , A passionate developer, sport and code lover who loves to share and write when she have some time.