Beginner friendly

Your First HTML Program

• Chapter 07

Your First HTML Program

Let's create your first HTML page from scratch. You will create an index.html file, write a simple page, open it in a browser, and understand exactly what each line does.

🚀Your first goal

Create a file called index.html, add a heading and paragraph, save it, and open it in your browser.

That's it — you have created your first real web page.

ℹ️Remember: HTML files use the .html extension. The browser reads your HTML and renders the page.

1️⃣ Create your HTML file

Open your project folder

Open the folder where you want to keep your HTML files in VS Code.

Create a new file

Create a new file and name it index.html.

Write your HTML

Type the basic HTML structure and add your first heading and paragraph.

Save and open it

Save the file and open index.html in a web browser.

2️⃣ Write your first HTML program

index.html

📝 Edit Code

👁 Live Preview

💡 Change the text inside <h1> or <p>, then click Run to see your changes.

3️⃣ Understand it line by line

1<!DOCTYPE html>

Line 1: Declares the document as an HTML document and enables standards-based rendering.

2<html lang="en">

Line 2: Starts the root HTML element. The lang attribute identifies English as the document's primary language.

3 <head>

Line 3: Starts the head section, which contains information about the document and its resources.

4 <meta charset="UTF-8">

Line 4: Sets the character encoding to UTF-8.

5 <title>My First HTML Page</title>

Line 5: Sets the document title, normally shown in the browser tab.

6 </head>

Line 6: Closes the head section.

7<body>

Line 7: Starts the body, where the page's visible content is placed.

8 <h1>Hello, World!</h1>

Line 8: Creates the main heading displayed on the page.

9 <p>This is my first HTML program.</p>

Line 9: Creates a paragraph of text.

10</body>

Line 10: Closes the body section.

11</html>

Line 11: Closes the root HTML element.

4️⃣ What will you see?

Browser output

Hello, World!

This is my first HTML program.

💡The browser does not show the HTML tags themselves. It uses them to understand the structure and displays the resulting content.

5️⃣ Try changing the page

<h1>

Change the heading

Replace Hello, World! with your own heading.

<p>

Change the paragraph

Write a sentence that describes yourself or your project.

<title>

Change the tab title

Replace the title with the name of your website.

6️⃣ Add more HTML elements

practice.html

📝 Edit Code

👁 Live Preview

💡 This example introduces headings, paragraphs, lists and links.

7️⃣ Common beginner mistakes

❌ Saving the file as .txt

Make sure the filename ends with .html, for example index.html.

❌ Writing tags with the wrong spelling

HTML tags must be written correctly. For example, use <h1>, not <h01>.

❌ Forgetting closing tags

Elements such as <h1> and <p> normally need matching closing tags.

❌ Not saving before refreshing

Save your changes before checking the page again in the browser.

🎯 Your first challenge

Build a simple personal page

Create an HTML page containing:

A page title
Your name as an <h1>
A short introduction using <p>
An <h2> called "My Skills"
A list of at least three skills
A link to a website you like

🎤 Interview questions

What is the purpose of <!DOCTYPE html>?

It declares that the document is an HTML document and helps the browser use standards mode.

What is the difference between <head> and <body>?

The head contains document information and resources; the body contains the content displayed on the page.

What does the <h1> element do?

It represents a level-one heading and is commonly used for the main heading of a page or section.

What does the <p> element do?

It represents a paragraph of text.

What happens when an HTML file is opened in a browser?

The browser parses the HTML and renders the document according to its elements and structure.

✅Congratulations! You have created your first HTML page. From here, you can build more pages by learning headings, paragraphs, links, images, lists, forms and other HTML elements.

⚡ Quick Summary

Create an HTML file using the .html extension.
Start with <!DOCTYPE html>.
Use <html> as the root element.
Put page information inside <head>.
Put visible content inside <body>.
Use <h1> for a main heading and <p> for a paragraph.
Save the file and open it in a browser to see the result.

←

PreviousInstalling VS Code for HTML

HTML Tutorial

NextHello World in HTML →

Your First HTML Program