• Tutorial List

Create and Run an HTML file

Last updated Jul 08, 2020
How to Create and run an HTML File

How to Create an HTML File?

Follow the below steps to creat an HTML Document –

Step 1: Writing HTML Code

We will use the Notepad to write the HTML code. You can use other editors, such as – Notepad++, TextEdit, etc.

Open your text editor & write the following code –

<!DOCTYPE html>
<html>
  
<head>
    <title>My Page Title</title>
</head>
  
<body>
	<h1>My first Website!</h1>
</body>
  
</html>
Writing HTML code in Notepad

Step 2: Saving the HTML Code

Now Save the HTML Document on your Desktop or anywhere. I’ll save my HTML Document on the Desktop.

Saving HTML Document

Here I have named the HTML Document index.html. It is not mandatory to give the same name, you can choose any name. But the file extension must be .html. Like – example.html, mywebsite.html, test.html.

Saving the HTML Document on desktop

Step 3: Opening the HTML document on the Web Browser

To run the index.html file on your browser, just double click on it. If it is not opening on the browser, right-click on the index.html and Open with > Choose your Browser, or open your browser and drag the file to it.

Run the index.html File on Browser

Explanation of the above HTML code

<!DOCTYPE html>

  • It tells the web browser that this document is an HTML5 document.
  • It is case-insensitive. You can also write like this – <!doctype html> or <!Doctype HTML>
  • When you write an HTML document, you must have to declare it at the top of the document.
<!DOCTYPE html>

<html>…</html>

  • This is the root element or tag of an HTML page.
  • Inside this tag, you are allowed to write only two tags or elements.
    1. <head> Tag
    2. <body> Tag
<!DOCTYPE html>
<html>
  
	...
  
</html>

<head>…</head>

  • This tag is always written inside the <html>...</html> Tag.
  • This element is used to store information about an HTML document or a Web Page. Such as the page title <title>
<!DOCTYPE html>
<html>
  
  <head>
  	...
  </head>
  
</html>

<title>…</title>

The HTML title tag is used to define the Title of a web page –

<!DOCTYPE html>
<html>
  
  <head>
    <title>My Page Title</title>
  </head>
  
</html>
HTML Title on Browser
HTML Title on Google serach Result

<body>…</body>

This <body>...</body> tag contains the content (Headings, paragraphs, Images, Tables, etc.) of a Web Page, and this content will be rendered in the web browser for display to the user.

<!DOCTYPE html>
<html>
  
<head>
    <title>My Page Title</title>
</head>
  
<body>
	<h1>This is a Heading</h1>
	<p>This is a paragraph</p>
</body>
  
</html>
HTML Body tag output on browser

Ask Questions

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