I often like to start my minor projects from scratch and avoid using frameworks. HTML5 Boilerplate is a really great resource for creating a style-agnostic web project foundation; all your bases will be covered. However, it's much more than I need for a standard project, and I'd save more time deleting what I only need if I'd keep it for convenience. For major or commercial project I prefer to use framework like Laravel, ReactJS and NodeJS.

A minimal index.html file should always contain a few things, though.

Declare the document type

  • All HTML documents must start with a <!DOCTYPE> declaration.
  • The declaration is not an HTML tag. It is an "information" to the browser about what document type to expect.
  • In HTML 5, the declaration is simple:

<!doctype html>

Define HTML tag

  • The <html> tag represents the root of an HTML document.
  • The <html> tag is the container for all other HTML elements (except for the <!DOCTYPE> tag).
  • You should always include the lang attribute inside the <html> tag, to declare the language of the Web page. This is meant to assist search engines and browsers.

<html lang="en"> ... </html>

Define the character coding

  • The charset attribute specifies the character encoding for the HTML document.
  • The HTML5 specification encourages web developers to use the UTF-8 character set, which covers almost all of the characters and symbols in the world!

<meta charset="utf-8">

Define the width of the viewport

  • The viewport is the user's visible area of a web page.
  • The viewport varies with the device, and will be smaller on a mobile phone than on a computer screen.
  • Before tablets and mobile phones, web pages were designed only for computer screens, and it was common for web pages to have a static design and a fixed size.
  • Then, when we started surfing the internet using tablets and mobile phones, fixed size web pages were too large to fit the viewport. To fix this, browsers on those devices scaled down the entire web page to fit the screen.
  • It's a Optimize for mobile and prevent zoom/horizontal scroll.

<meta name="viewport" content="width=device-width, initial-scale=1">

Define title Tag

  • The <title> tag defines the title of the document. The title must be text-only, and it is shown in the browser's title bar or in the page's tab.
  • The contents of a page title is very important for search engine optimization (SEO)! The page title is used by search engine algorithms to decide the order when listing pages in search results.

<title> ... </title>

Define BODY Tag

  • The <body> tag defines the document's main body.
  • The <body> element contains all the contents of an HTML document, such as headings, paragraphs, images, hyperlinks, tables, lists, etc.

<body> ... </body>

Include Custom CSS and JavaScript Links

  • The <link> tag is used to link to external style sheets.
  • The <script> tag is used to link to external JavaScript.

<link rel="stylesheet" href="css/style.css"> <script src="js/script.js"></script>

Basic index.html

<!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" />
    <title>Hello World</title>
    <link rel="stylesheet" href="css/main.css" />
    <link rel="icon" href="images/favicon.png" />
  </head>
  <body>
    <script src="js/scripts.js"></script>
  </body>
</html>