The Ultimate HTML Template

General Showcase
1

With this template, you will never have to pause and contemplate your life choices after you create a new HTML file. Optimized for all platforms. Now you can ensure that your website appearance will be consistent, and that your code won’t turn into spaghetti.

REPL:

Template

Fork this repl:
https://replit.com/@python660/Template#index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Replit Web Template</title>
  <meta name="description" content="A simple web template for new projects.">
  <meta name="author" content="python660">
  <meta property="og:title" content="Replit Web Template">
  <meta property="og:type" content="website">
  <meta property="og:url" content="https://replit.com/@python660">
  <meta property="og:description" content="A simple web template for new projects.">
  <meta property="og:image" content="preview.png">
  <link rel="preconnect" href="https://cdnjs.cloudflare.com">
  <link rel="icon" href="/favicon.ico" type="image/x-icon">
  <link rel="apple-touch-icon" href="/apple-touch-icon.png">
  
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>404 Not Found</h1>
  <p>The server is currently teasing you for being dumb.</p>
  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js" integrity="sha512-3gJwYpMe3QewGELv8k/BX9vcqhryRdzRMxVfq6ngyWXwo03GFEzjsUm8Q7RZcHPHksttq7/GFoxjCVUjkjvPdw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  <script src="script.js"></script>
</body>
</html>
Explain 
<!DOCTYPE html>
<html lang="en"> <!-- Can replace with your own locale -->
<head>
  <!-- Compatability -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <!-- Title and Description -->
  <title>Replit Web Template</title>
  <meta name="description" content="A simple web template for new projects.">
  <meta name="author" content="python660">

  <!-- Social media -->
  <meta property="og:title" content="Replit Web Template">
  <meta property="og:type" content="website">
  <meta property="og:url" content="https://replit.com/@python660">
  <meta property="og:description" content="A simple web template for new projects.">
  <meta property="og:image" content="preview.png">

  <!-- Preconnect to certain useful domains as needed -->
  <link rel="preconnect" href="https://cdnjs.cloudflare.com">

  <!-- Favicons and icons -->
  <link rel="icon" href="/favicon.ico" type="image/x-icon">
  <link rel="apple-touch-icon" href="/apple-touch-icon.png">

  <!-- Link your CSS up here -->
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <!-- Website Content -->
  <h1>404 Not Found</h1>
  <p>The server is currently teasing you for being dumb.</p>

  <!-- Javascript -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js" integrity="sha512-3gJwYpMe3QewGELv8k/BX9vcqhryRdzRMxVfq6ngyWXwo03GFEzjsUm8Q7RZcHPHksttq7/GFoxjCVUjkjvPdw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  <script src="script.js"></script>
</body>
</html>

It’s not finished, yet

You still have to adhere to some guidelines to avoid turning your whole project upside down.

  1. Use consistent indentation
  2. Separate code blocks using a consistent number of blank lines (I like to use 1)
  3. Use either UPPERCASE or lowercase, but not intertwined
  4. Group similar items. For example, put CSS with other CSS, and modal code with modal content.
4 Likes