HTML5 Best Practice

Posted By Himanshu Khurana | 20-Mar-2018

These tips are for beginners and those who want to refresh themselves using the best HTML practices. I've tried to list many things here, albeit very simple, but they are very different in terms of readability of the code. I hope everyone who has read this article can learn something new. enjoy!

 

1. Declare the DocType

 

This is not an HTML tag, it is a description of the HTML version of your page by a web browser. Always add a label declaration! The DOCTYPE is added to the HTML document so that the browser knows the desired document type.

 

<!-- HTML 5 -->>
<!DOCTYPE html>

<!-- HTML 4.01 Strict -->>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">

 

2. Tags
   
Although it may not be a problem, be sure to close the tag. You will never know how your site will behave under different browsers, conditions, and technologies; if you do not follow these standards, it will be much easier to have problems.

 

HTML is not case sensitive, but that doesn't mean that we should... LOL ... Personally, I recommend using lowercase letters, but if you must use capital letters, try to make it a standard and avoid Make changes throughout the site.

 

3. Descriptive Meta Tags:

 

Meta elements are often used to specify page descriptions, keywords, authors of documents, latest changes and other metadata, and to make your website more meaningful to user agents, such as engine spider search.

 

<head>
      <meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
</head>

 

4. Avoid Inline Styles

 

HTML is not a hypertext-style language, so CSS has a number of reasons for using styles as resources online when necessary.

 

<h1 style="color:blue;">Is is really necessary?</h1>
 
 
5. Use CSS in Place of JavaScript and Sprites


Using only HTML5 and CSS3, you can provide native support for many of the components, effects, and technologies that were previously implemented only through JavaScript. One example is "CSS Transformation" which provides a good visual conversion between the two states.

 

div.box {
left: 40px;
-webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
        -o-transition: all 0.3s ease-out;
            transition: all 0.3s ease-out;
}
div.box.totheleft { left: 0px; }
div.box.totheright { left: 80px; }    

 

Thanks!

Request for Proposal

Recaptcha is required.

Sending message..