The Simplest Template for index.html

Every web project, no matter how big or small, starts with an index.html file. Start yours with this template.

Published Categorized as HTML

The index.html file is what gets displayed in the user’s browser when they visit the URL of the directory that it’s stored in.

<!doctype html>
<html lang="en">
    <head>
        <title>Your page's title goes here</title>
    </head>
    <body>
        <h1>This is a heading</h1>
        <p>And this is a paragraph.</p>
    </body>
</html>

Now that you’ve seen what a simple HTML document looks like, let’s break down its structure and take a minute or two to talk about why each of these tags is there.

The <!doctype html> tag is for the doctype declaration. It tells web browsers that the document is an HTML5 document and that it must be rendered in accordance with the standards defined in the HTML5 specification.

Unlike most of the other tags in your HTML document, the doctype declaration doesn’t need to be closed—and it has no other elements nested inside it. Think of it as a kind of preamble that tells web browsers what’s about to follow.

The <html> tag is for the root element of your HTML document. Its lang attribute tells search engines and web browsers about the language of the page, and it may optionally inform them about the country.

The <head> and <body> tags must be the only two direct descendants of the <html> tag for the root element. All other tags must be nested inside them (effectively becoming indirect descendants of the root element).

The <head> tag is for your HTML document’s header. Nest your document’s title, favicon, meta tags, styles, and scripts inside it.

The <body> tag is for your HTML document’s body. Nest your document’s containers (sections, articles, asides, divs, etc.) and content (headings, paragraphs, lists, figures, audio, video, etc.) inside it.

Where to Go From Here

This template is as basic as it gets, and it’s intended to help you familiarize yourself with HTML if you’re new to web development. However, a lot more goes into developing a fully-functional HTML/CSS/JS website.

As a next step, I recommend you take a look at the HTML5 Boilerplate. This is the free and open-source starter template I use for all my web development projects, and, without a shadow of a doubt, one of the best starter templates out there.

By Dim Nikov

Editor of Maker's Aid. Part programmer, part marketer. Making things on the web and helping others do the same since the 2000s. Yes, I had Friendster and Myspace.

Leave a comment

Your email address will not be published. Required fields are marked *