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!
Cookies are important to the proper functioning of a site. To improve your experience, we use cookies to remember log-in details and provide secure log-in, collect statistics to optimize site functionality, and deliver content tailored to your interests. Click Agree and Proceed to accept cookies and go directly to the site or click on View Cookie Settings to see detailed descriptions of the types of cookies and choose whether to accept certain cookies while on the site.
About Author
Himanshu Khurana
Himanshu is an experienced Frontend developer with experience and capabilities to build compelling UI's for Web and Mobile Applications. Himanshu likes playing cricket and listening music.