How to Create a Valid and Proper HTML Document


To create a proper HTML document you should use HTML document doc type declaration, meta tags for responsiveness, HTML5 tags, use styles and script files in proper order, use defer in script tags and more. In this video we discuss how can we create a proper and valid HTML document along with good assets management practice.

How To Create a Proper HTML Document – English

How To Create a Proper HTML Document – Urdu/Hindi

Corrections

  • We do not suggest to use async and defer in jQuery script tag
  • Use one anchor link inside a single list item (li) in an ordered or un-ordered list, specially in navigation and menus.

Code for the Sample Document

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Template</title>
    <meta name="description" content="">
    <meta name="keywords" content="">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="assets/styles/vendors.min.css">
    <link rel="stylesheet" href="assets/styles/custom.css">
    <link rel="stylesheet" href="assets/styles/responsive.css">
    <!-- <link href="assets/styles/custom.min.css" rel="stylesheet"> -->
    <!-- <link href="assets/styles/responsive.min.css" rel="stylesheet"> -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js" defer></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js" defer></script>
    <![endif]-->
    <link rel="shortcut icon" type="image/png" href="assets/images/favicon.png">
  </head>
  <body>
    <section>
      <div class="container">
        <div class="row">
          <div class="col-lg-4">
            ...
          </div>
          <div class="col-lg-4">
            ...
          </div>
          <div class="col-lg-4">
            ...
          </div>
        </div>
      </div>    
    </section>
    <div class="flex-row">
      <div class="flex-col">
        ...
      </div>
      <div class="flex-col">
        ...
      </div>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.bundle.min.js" defer></script>
    <!-- <script src="assets/scripts/vendors.min.js" defer></script> -->
    <script src="assets/scripts/custom.js" defer></script>
    <!-- <script src="assets/scripts/custom.min.js" defer></script> -->
  </body>
</html>

Related Posts