HTML

Create HTML Hello World Page in 5 Minutes: Step-by-Step for Beginners

Q: How do I write Hello World in HTML?

Place the text inside a heading or paragraph tag: <h1>Hello, World!</h1> Save the file using the .html extension and open it in a web browser.

Q: Why is my HTML file opening as text?

The file may have been saved as .txt rather than .html. Rename it from index.html.txt to index.html and open it again in a browser.

By Vaishali

Jul 26, 2026 7 Min Read 44151 Views

(Last Updated)

Every web developer starts with a simple first project: displaying “Hello, World!” in a browser.

Creating an HTML Hello World page helps beginners understand how webpages are structured. You only need a text editor, a browser, and a few lines of HTML code.

This guide explains how to create your first HTML page, save it correctly, and open it in Chrome or Firefox. You will also learn what each HTML tag does and which concepts to study next.

HTML Hello World at a Glance

What Is an HTML Hello World Page?
What Do You Need Before Creating Your First HTML Page?
How to Create an HTML Hello World Page

Create a New Project Folder
Create an HTML File
Add the DOCTYPE Declaration
Add the HTML Element
Add the Head Section
Add the Body Section
Combine the Complete HTML Code
Open the Page in a Browser

Understanding the Basic HTML Structure

Opening and Closing Tags

HTML Floor Plan: How the Tags Fit Together
How to Open an HTML File in a Browser: Chrome and Firefox Steps
Open an HTML File in Google Chrome

Method 1: Double-Click the File
Method 2: Use “Open With”
Method 3: Open the File Inside Chrome

Open an HTML File in Mozilla Firefox

Method 1: Use “Open With”
Method 2: Open the File Inside Firefox

Refresh the Page After Editing
Common Errors Beginners Make in Their First HTML Page

Saving the File With the Wrong Extension
Forgetting Closing Tags
Placing Visible Content Inside the Head
Forgetting to Save the File
Using Curly Quotation Marks
Misspelling HTML Tags
Opening the Wrong File
Forgetting the DOCTYPE Declaration
Using a Word Processor

How to Improve the Hello World Page

Add Another Heading
Add a Link
Add an Image
Add an Unordered List

What to Learn After Hello World HTML

Step 1: Learn Essential HTML Elements
Step 2: Learn Semantic HTML
Step 3: Learn HTML Forms
Step 4: Learn CSS
Step 5: Learn JavaScript
Step 6: Learn Git and GitHub
Step 7: Build Responsive Projects
Step 8: Learn a Frontend Framework

Recommended Beginner Web Development Path
Conclusion
FAQs

How do I write Hello World in HTML?
Which software is required to create an HTML page?
Why is my HTML file opening as text?
Does HTML require internet access?
What should I learn after basic HTML?

HTML Hello World at a Glance

An HTML Hello World page is a basic webpage that uses standard HTML tags to display a simple message in a browser.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello World</title>
</head>
<body>
    <h1>Hello, World!</h1>
</body>
</html>

Key points:

<!DOCTYPE html> declares an HTML5 document.
<html> contains the complete webpage.
<head> stores page details and browser settings.
<title> sets the browser-tab title.
<body> contains the visible page content.
<h1> displays the main heading.
Save the file as index.html and open it in a browser.

What Is an HTML Hello World Page?

An HTML Hello World page is a basic webpage that displays a short message in a browser. It introduces the fundamental structure used by almost every HTML document.

Here is the complete code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello World Page</title>
</head>
<body>
    <h1>Hello, World!</h1>
    <p>This is my first HTML page.</p>
</body>
</html>

The browser reads this code and displays a heading followed by a short paragraph.

What Do You Need Before Creating Your First HTML Page?

You do not need expensive software or advanced programming knowledge.

You only need:

A computer
A text editor
A web browser
A folder for saving the project

Beginners can use Notepad on Windows or TextEdit on macOS. Code editors such as Visual Studio Code provide better formatting and syntax highlighting.

Google Chrome, Mozilla Firefox, Microsoft Edge, and Safari can display HTML pages.

How to Create an HTML Hello World Page

Follow these numbered steps to build your first webpage.

1. Create a New Project Folder

Create a folder on your desktop and name it:

hello-world

This folder will contain your HTML file and any future CSS, JavaScript, or image files.

2. Create an HTML File

Open your preferred text editor and create a new file.

Save the file as:

index.html

The .html extension tells the computer that the file contains an HTML document.

Avoid saving it as:

index.html.txt

That format creates a text file rather than a webpage.

3. Add the DOCTYPE Declaration

Add the following line at the top:

<!DOCTYPE html>

The DOCTYPE declaration tells the browser that the document uses HTML5.

It is not a regular HTML element. However, every modern HTML page should begin with it.

4. Add the HTML Element

Place the opening and closing <html> tags below the DOCTYPE declaration:

<!DOCTYPE html>
<html lang="en">

</html>

The <html> element contains the entire webpage.

The lang="en" attribute tells browsers and screen readers that the page content uses English.

5. Add the Head Section

Add the <head> element inside the HTML tags:

<!DOCTYPE html>
<html lang="en">
<head>

</head>
</html>

The head section stores information about the webpage. Most of this information does not appear directly on the page.

Add the character encoding, viewport settings, and page title:

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello World Page</title>
</head>

The tags perform the following functions:

<meta charset="UTF-8"> supports letters, symbols, and special characters.
The viewport tag helps the page display correctly on mobile devices.
<title> sets the text shown on the browser tab.

6. Add the Body Section

Add the <body> element after the closing </head> tag:

<body>

</body>

The body contains everything visitors can see on the webpage.

Add a heading and paragraph:

<body>
    <h1>Hello, World!</h1>
    <p>This is my first HTML page.</p>
</body>

The <h1> tag creates the main page heading. The <p> tag creates a paragraph.

7. Combine the Complete HTML Code

Your final index.html file should look like this:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello World Page</title>
</head>
<body>
    <h1>Hello, World!</h1>
    <p>This is my first HTML page.</p>
</body>
</html>

Save the file after adding the complete code.

8. Open the Page in a Browser

Locate the index.html file inside your project folder.

Double-click the file. Your default browser should open and display:

Hello, World!

This is my first HTML page.

You have now created your first HTML webpage.

Understanding the Basic HTML Structure

The code contains four essential parts.

HTML Element	Purpose
`<!DOCTYPE html>`	Declares that the document uses HTML5
`<html>`	Contains the complete HTML document
`<head>`	Stores metadata, settings, and the page title
`<body>`	Contains visible webpage content

Opening and Closing Tags

Most HTML elements use an opening tag and a closing tag.

<p>This is a paragraph.</p>

The opening tag is:

<p>

The closing tag contains a forward slash:

</p>

The content appears between these tags.

Some HTML elements, such as <meta>, do not need a separate closing tag.

HTML Floor Plan: How the Tags Fit Together

HTML follows a nested structure.

html
├── head
│   ├── meta
│   ├── meta
│   └── title
└── body
    ├── h1
    └── p

The <head> and <body> elements sit inside the <html> element.

The heading and paragraph sit inside the <body> element.

Correct nesting helps browsers understand the page structure.

How to Open an HTML File in a Browser: Chrome and Firefox Steps

An HTML file can be opened directly without running a server.

Open an HTML File in Google Chrome

Method 1: Double-Click the File

Open the project folder.
Locate index.html.
Double-click the file.
Chrome will open it when Chrome is your default browser.

Method 2: Use “Open With”

Right-click index.html.
Select Open with.
Choose Google Chrome.

Method 3: Open the File Inside Chrome

Open Google Chrome.
Press Ctrl + O on Windows or Command + O on macOS.
Select the index.html file.
Click Open.

Open an HTML File in Mozilla Firefox

Method 1: Use “Open With”

Right-click the HTML file.
Select Open with.
Choose Mozilla Firefox.

Method 2: Open the File Inside Firefox

Open Mozilla Firefox.
Press Ctrl + O on Windows or Command + O on macOS.
Locate the HTML file.
Select it and click Open.

Refresh the Page After Editing

A browser does not always display new changes automatically.

Follow this process after editing the code:

Save the HTML file.
Return to the browser.
Press Ctrl + R on Windows.
Press Command + R on macOS.

A hard refresh may help when old content remains visible:

Windows: Ctrl + Shift + R
macOS: Command + Shift + R

Common Errors Beginners Make in Their First HTML Page

Small mistakes can prevent the browser from displaying the expected result.

1. Saving the File With the Wrong Extension

A file named index.html.txt opens as a text document.

Correct filename:

index.html

Incorrect filename:

index.html.txt

Enable file extensions in your operating system when the complete filename is not visible.

2. Forgetting Closing Tags

Incorrect code:

<h1>Hello, World!
<p>This is my first page.

Correct code:

<h1>Hello, World!</h1>
<p>This is my first page.</p>

Browsers may still display incorrect HTML, but the page structure can break as the project grows.

3. Placing Visible Content Inside the Head

Incorrect structure:

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

Visible headings and paragraphs belong inside the body:

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

4. Forgetting to Save the File

The browser cannot display changes that have not been saved.

Press Ctrl + S on Windows or Command + S on macOS before refreshing the page.

5. Using Curly Quotation Marks

Code copied from formatted documents may contain curly quotation marks.

Incorrect:

<html lang=“en”>

Correct:

<html lang="en">

Code editors use straight quotation marks by default.

6. Misspelling HTML Tags

Incorrect:

<tilte>Hello World</tilte>

Correct:

<title>Hello World</title>

Browsers cannot interpret misspelled tags correctly.

7. Opening the Wrong File

Multiple files with similar names can create confusion.

Confirm that the browser displays the correct file path. The address bar may show something similar to:

file:///C:/Users/Name/Desktop/hello-world/index.html

8. Forgetting the DOCTYPE Declaration

A missing DOCTYPE may cause browsers to use an older rendering mode.

Add this line at the beginning of every modern HTML document:

<!DOCTYPE html>

9. Using a Word Processor

Microsoft Word and Google Docs add formatting that can damage source code.

Use plain-text or code-editing software, such as:

Notepad
TextEdit in plain-text mode
Visual Studio Code
Sublime Text
Notepad++

How to Improve the Hello World Page

A basic HTML page can be expanded with headings, links, images, and lists.

Add Another Heading

<h2>About This Page</h2>

Add a Link

<a href="https://www.example.com">Visit Example</a>

Add an Image

<img src="image.jpg" alt="A sample image">

Add an Unordered List

<ul>
    <li>Learn HTML</li>
    <li>Learn CSS</li>
    <li>Learn JavaScript</li>
</ul>

A larger example may look like this:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First Webpage</title>
</head>
<body>
    <h1>Hello, World!</h1>

    <p>This is my first HTML page.</p>

    <h2>My Learning Goals</h2>

    <ul>
        <li>Understand HTML structure</li>
        <li>Style pages using CSS</li>
        <li>Add interactions using JavaScript</li>
    </ul>
</body>
</html>

What to Learn After Hello World HTML

The Hello World page introduces the basic structure of a webpage. The next step is learning how to build complete, accessible, and responsive websites.

Step 1: Learn Essential HTML Elements

Study the tags used for:

Headings
Paragraphs
Links
Images
Lists
Tables
Forms
Buttons
Audio and video

Build small pages instead of memorising every tag.

Step 2: Learn Semantic HTML

Semantic elements explain the purpose of each page section.

Important elements include:

<header>
<nav>
<main>
<section>
<article>
<aside>
<footer>

Semantic HTML improves page organisation, accessibility, and search engine understanding.

Step 3: Learn HTML Forms

Forms allow users to enter and submit information.

Study:

Text inputs
Email inputs
Password fields
Radio buttons
Checkboxes
Dropdown menus
Labels
Validation
Submit buttons

Create a registration or contact form as a practice project.

Step 4: Learn CSS

CSS controls the visual appearance of HTML pages.

Focus on:

Colours
Fonts
Margins and padding
Borders
The box model
Flexbox
CSS Grid
Responsive design
Media queries

A personal profile page is a useful first HTML and CSS project.

Step 5: Learn JavaScript

JavaScript adds behaviour and interaction to webpages.

Begin with:

Variables
Functions
Conditions
Loops
Arrays
Objects
Events
DOM manipulation

Create projects such as a counter, calculator, quiz, or task list.

Step 6: Learn Git and GitHub

Git tracks code changes. GitHub helps developers store and share projects online.

Learn how to:

Create a repository
Commit changes
Push code
Create branches
Publish projects through GitHub Pages

Step 7: Build Responsive Projects

Create websites that work on desktop, tablet, and mobile screens.

Beginner project ideas include:

Personal portfolio
Product landing page
Restaurant website
Registration form
Blog layout
Business homepage

Step 8: Learn a Frontend Framework

A strong HTML, CSS, and JavaScript foundation should come first.

React, Angular, or Vue can be studied after completing several JavaScript projects.

Recommended Beginner Web Development Path

Follow this sequence:

HTML
↓
Semantic HTML and accessibility
↓
CSS fundamentals
↓
Flexbox and CSS Grid
↓
Responsive web design
↓
JavaScript fundamentals
↓
DOM manipulation
↓
Git and GitHub
↓
Frontend framework
↓
Backend development
↓
Full-stack projects

The learning path builds one practical skill at a time. Regular project work helps convert concepts into job-ready experience.

Creating a Hello World page is only the first step. A structured learning programme can help you progress from basic HTML to responsive websites and complete web applications. HCL GUVI’s Full-Stack Development Course helps learners study essential frontend and web development concepts through guided lessons and practical exercises. Build a strong foundation in HTML, CSS, JavaScript, responsive design, and application development while working on portfolio-ready projects.

Conclusion

Creating an HTML Hello World page takes only a few minutes, but it teaches the structure behind every webpage.

The DOCTYPE declares HTML5, the <html> tag contains the document, the <head> stores page information, and the <body> displays visible content.

Save the document with the .html extension and open it in Chrome or Firefox. Small experiments with headings, paragraphs, links, images, and lists will help strengthen your HTML skills.

The strongest next step is to study semantic HTML, CSS, JavaScript, Git, and responsive web development. Each concept brings you closer to building complete websites independently.

FAQs

How do I write Hello World in HTML?

Place the text inside a heading or paragraph tag:
<h1>Hello, World!</h1>
Save the file using the .html extension and open it in a web browser.

Which software is required to create an HTML page?

A plain-text editor and web browser are enough. Beginners can use Notepad, TextEdit, or Visual Studio Code. Chrome, Firefox, Edge, and Safari can display the finished page.

Why is my HTML file opening as text?

The file may have been saved as .txt rather than .html. Rename it from index.html.txt to index.html and open it again in a browser.

Does HTML require internet access?

HTML files can run locally without internet access. An internet connection is only required for external resources, online tools, remote images, or hosted libraries.

What should I learn after basic HTML?

Study semantic HTML, forms, accessibility, CSS, responsive design, JavaScript, Git, and GitHub. Build small projects throughout the learning process before moving to advanced frameworks.

Success Stories

About the Author

Vaishali

I'm a seasoned writer with four years of experience across technical, non-technical, and just about every genre or niche you can imagine. Adaptable and curious, I enjoy exploring new topics and making information engaging and easy to understand. Fueled by a steady stream of tea, I approach each project with creativity, reliability, and genuine enthusiasm for storytelling.

View all posts by Vaishali