How to Create an index.html File?

Last Updated : 03 Apr, 2025

Creating an index.html file is a fundamental step in HTML programming and website development. This file serves as the backbone of a basic HTML webpage. In this article, we will explore four straightforward methods to create an index.html file, which is important for building and serving web content.

Steps to create index.html file in VScode

You can use any code editor to create the index.html file, but for this method, we will use Visual Studio Code (VS Code) since it is widely used. Follow the steps below:

Step 1: Open Visual Studio Code

First of all, open Visual Studio Code, you can see in the image below I have opened VScode but you can open any code editor of your choice, then go to File>New File to create a new file:

Step 2: Name the File

Once you have performed the above steps required, you will now see a window that shows what you want to name the file as, for this you will have to make sure that "Save as Type" to "All Files" and follow the following naming convention for the file:

index.html

Step 3: Write Template of HTML

Once you have successfully created the index.html file, you will have to create the HTML code, as you may be aware that HTML file follows a proper template for writing code, below is the syntax for a simple HTML file:

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
</head>
    <body>
        <p>Default code has been loaded into the Editor.</p>
    </body>
</html>

In HTML, the <head>, <body>, and <html> tags serve different and unique purposes:

<html> Tag: This is known to be the root element of the HTML page. it's the mandatory tag that tells when a HTML code begins and ends.
<head> Tag: This section contains meta-information about the document, such as - title, character encoding, links to external resources etc.
<body> Tag: This section contains the main content for the document or webpage, including text, images, multimedia elements, and structural elements like headings, paragraphs, lists, etc.

Step 4: Print Hello Word on the Screen

Let's take a look at an example of an HTML file that prints hello world on the screen, for this we will need to write the following code in the index.html file:

HTML

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h2>Hello World</h2>
</body>
</html>

Steps to Run the index.html File

Now, let's understand the steps required to run the index.html file:

Step 1: Save the File

Once you have written the above code in the VScode, simply click on the File>Save, otherwise you can also use the shortcut CTRL+S to save the file.

Step 2: Open the File

Now that you have saved the file, simply open the directory where the file is saved and double click to open it, it will automatically get opened via the default browser.

Output:

Example: Let's take a look at an example where we print "Kishan from GeeksforGeeks!" in green color while also using a <title> tag as well.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>Kishan from GeeksforGeeks!</title>
    <style>
        /* CSS to style the text */
        body {
            background-color: #f0f0f0;
            /* Background color */
        }

        .green-text {
            color: green;
            /* Text color */
        }
    </style>
</head>

<body>
    <h1 class="green-text">Kishan from GeeksforGeeks!</h1>
</body>

</html>

Output:

In conclusion, he index.html file plays a crucial role in HTML programming and website development. It serves as the default file that web servers look for and provides the basic structure for your website. By following the steps outlined in this article, you can easily create your own index.html file and kickstart your journey in the world of web development.

How To Add a Favicon in HTML?

kishankaushik

Improve

Article Tags :

How to Create an index.html File?

Steps to create index.html file in VScode

Step 1: Open Visual Studio Code

Step 2: Name the File

Step 3: Write Template of HTML

Step 4: Print Hello Word on the Screen

Steps to Run the index.html File

Step 1: Save the File

Step 2: Open the File

Similar Reads

Thank You!

What kind of Experience do you want to share?