HTML Coding Standards

Latest HTML version ( HTML5 )

Must use latest HTML5 version.


<!-- Bad HTML -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <title>Page title</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  </head>

  <body>
  </body>
</html>

<!-- Good HTML -->
<!DOCTYPE html>
<html>
  <head>
    <title>Page title</title>
    <meta charset="UTF-8">
  </head>

  <body>
  </body>
</html>

Meta tags and favicon icon

Each html page must use below meta tags and favicon icon.


<!-- only use this meta tag in responsive HTML -->
<meta name="viewport"  content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

<!-- only use this meta tag in normal (without responsive) HTML -->
<meta name="viewport" content="width=1024">

<!-- SEO related meta tag -->
<meta name="description" content="">
<meta name="keywords" content="">

<!-- Number related meta tag -->
<meta name="format-detection" content="telephone=no">

<!-- Favicon icon link tag -->
<link rel="icon" href="images/favicon.png" type="image/png">

HTML5 version attr types

Latest HTML5 version not required any of type value type="text/javascript" in script line and type="text/css" in css line.


<!-- Bad HTML -->
<link rel="stylesheet" href="css/style.css" type="text/css">
<script src="js/jquery-1.11.2.min.js" type="text/javascript"></script>

<!-- Good HTML -->
<link rel="stylesheet" href="css/style.css">
<script src="js/jquery-1.11.2.min.js"></script>

Commenting

Each include file in head tag should be proper commented.


<!-- main css -->
<link rel="stylesheet" href="css/style.css">

<!-- responsive css -->
<link rel="stylesheet" href="css/responsive.css">

<!-- fonts css -->
<link rel="stylesheet" href="fonts/fonts.css">

<!-- main script -->
<script src="js/jquery-1.11.2.min.js"></script>

<!-- placeholder script -->
<script src="js/placeholder.js"></script>
             
<!-- Header Part -->
<header>
    <div class="container">
    </div>
</header>

<!-- Banner Part -->
<div class="banner">
    <div class="container">
    </div>
</div>

Sticky footer

Always use sticky footer

Sticky means if there is less content in the HTML then footer should be in the bottom of browser window.
If there is more content in HTML page then footer should followed with content of the page and not the sticky with bottom of browser.

Typography

Must be create extra page (Typography page) for each projects.