LearnAI ToolsCareerPractice BuildsPlayContact
Lesson 58 min read

Your First HTML Page

Create your very first HTML webpage from scratch and learn how HTML code becomes visible content inside a web browser.

Introduction

In the previous lesson, you prepared your HTML development environment by installing a code editor, choosing a web browser, setting up a local development server, and creating a project folder.

Now you are ready to create your first complete HTML webpage.

Every website begins with HTML documents. A small personal website, a company website, an online store, a social platform, and a large web application all depend on HTML to define the structure and meaning of webpage content.

Create HTML File
↓
Write HTML Code
↓
Save File
↓
Open in Browser
↓
View Webpage
↓
Modify and Repeat
Your First Practical HTML Lesson

This lesson connects everything you have learned so far. You will create a real HTML document, open it in a browser, modify the code, and observe how the webpage changes.

What is an HTML Page?

An HTML page is a text document that contains HTML markup and is normally saved using the .html file extension.

When a browser opens the document, it reads the HTML markup, interprets the elements, creates an internal document structure, and displays the visible content as a webpage.

HTML File to Webpage
HTML File
    │
    │ Contains HTML Markup
    ▼
Web Browser
    │
    │ Reads and Interprets
    ▼
Document Structure
    │
    │ Rendered on Screen
    ▼
Visible Webpage
FilenamePossible Purpose
index.htmlHomepage or default page
about.htmlAbout page
services.htmlServices page
contact.htmlContact page
products.htmlProducts page

HTML Source Code

  • Stored inside a text file.
  • Contains HTML tags and content.
  • Written by the developer.
  • Read and interpreted by the browser.

Webpage Output

  • Displayed inside the browser.
  • Shows visible headings and paragraphs.
  • Viewed and used by visitors.
  • Generated from the HTML document.
HTML File and Webpage Are Related but Different

The HTML file contains the source code. The webpage is the visual result produced when the browser processes that source code.

Why Do We Need It?

A browser needs a document or application response containing web content before it can display a useful webpage.

Without an HTML Page

  • There is no document structure to display.
  • There are no headings or paragraphs.
  • There is no page content for visitors.
  • There is no basic foundation for the webpage.
  • Other web technologies have no document structure to work with.

With an HTML Page

  • Content can be structured meaningfully.
  • Headings and paragraphs can be displayed.
  • Images and links can be added.
  • Multiple pages can form a website.
  • CSS and JavaScript can work with the document.

Structure Content

HTML organizes webpage information into elements such as headings, paragraphs, lists, tables, forms, and sections.

Create Webpages

An HTML document provides the basic structure that a browser can process and display.

Connect Pages

HTML pages can be connected using hyperlinks to create complete websites.

Add Styling

CSS can be connected to HTML documents to control presentation and layout.

Add Interactivity

JavaScript can interact with HTML elements to create dynamic behavior.

Describe Meaning

Proper HTML elements help communicate the meaning and structure of content.

Real-World Analogy

Imagine writing a letter. You begin with a blank piece of paper, write information on it, save or store the letter, and give it to someone who reads the content.

Creating an HTML page follows a similar process.

Writing a Letter

  • Take a blank piece of paper.
  • Write the message.
  • Save or store the letter.
  • Give it to a reader.
  • The reader understands the content.

Creating an HTML Page

  • Create an HTML file.
  • Write HTML markup.
  • Save the .html file.
  • Open it in a browser.
  • The browser displays the content.
Letter vs HTML Analogy
Letter Writing              HTML Development
────────────────            ────────────────


Blank Paper                  Create HTML File
     │                              │
     ▼                              ▼
Write Content                 Write HTML Code
     │                              │
     ▼                              ▼
Save Letter                   Save .html File
     │                              │
     ▼                              ▼
Give to Reader                Open in Browser
     │                              │
     ▼                              ▼
Reader Understands            Browser Displays
The Browser Is the Reader

You write HTML markup for the browser to process. The browser then converts the document into a visual webpage for the user.

Creating Your First Page

You already created a project folder in the previous lesson. You will now create an HTML document inside that folder.

Open Project Folder
↓
Create index.html
↓
Write HTML Code
↓
Save the File
↓
Start Live Server
↓
View the Webpage

Step 1: Open Your Project Folder

Launch Visual Studio Code and open the complete project folder that you created during the setup lesson.

Initial Project
html-course/
│
└── index.html

Step 2: Create index.html

If the file does not already exist, create a new file inside the project folder and name it index.html.

Incorrect

  • index
  • index.txt
  • index.html.txt
  • Index.HTML.txt

Correct

  • index.html
  • Uses the .html extension.
  • Can be recognized as an HTML document.
  • Commonly used for a homepage.

Step 3: Write the HTML Code

Click the index.html file in the Explorer and enter the complete HTML document shown in the next section.

Step 4: Save the File

Save Shortcut
Windows / Linux:


Ctrl + S




macOS:


Cmd + S

Step 5: Open the Page

Start your local development server and open the page in the browser.

Save index.html
↓
Start Live Server
↓
Browser Opens
↓
HTML Is Processed
↓
Webpage Appears
Keep the Editor and Browser Open Together

A convenient learning workflow is to keep your code editor and browser visible so you can quickly compare the HTML source with the rendered result.

The HTML Code

Enter the following code inside your index.html file.

index.html
<!DOCTYPE html>
<html>


<head>
    <title>My First Webpage</title>
</head>


<body>


    <h1>Hello World!</h1>
    <p>Welcome to HTML.</p>


</body>


</html>

This small document contains the basic parts of a complete HTML page.

Basic Document Structure
HTML Document
│
├── Document Type Declaration
│
└── html
    │
    ├── head
    │   │
    │   └── title
    │
    └── body
        │
        ├── h1
        │
        └── p
Do Not Memorize Everything Immediately

The purpose of this first page is to understand the overall structure. Each important part will be explored in much greater detail in upcoming lessons.

Line-by-Line Explanation

Understanding each part of the document will help you see how the browser interprets the page.

1. Document Type Declaration

Document Type
<!DOCTYPE html>

The document type declaration tells the browser that the document should be processed as modern HTML.

DOCTYPE Is a Declaration

The DOCTYPE declaration is not a normal HTML element. It provides document-type information to the browser and should appear at the beginning of the document.

2. The html Element

Root Element
<html>


</html>

The html element is the root element of the HTML document. The main document structure is placed inside it.

Root Structure
html
│
├── head
│
└── body

3. The head Element

Head Section
<head>
    <title>My First Webpage</title>
</head>

The head element contains information about the document and resources associated with the page.

The head section can contain elements for metadata, the document title, stylesheets, scripts, icons, and other page information.

4. The title Element

Page Title
<title>My First Webpage</title>

The title element defines the document title commonly shown in the browser tab or window interface.

HTML Source

  • <title>My First Webpage</title>
  • Written inside the head element.
  • Not displayed as normal page content.

Browser Interface

  • My First Webpage
  • Commonly appears in the browser tab.
  • Helps identify the document.

5. The body Element

Body Section
<body>


    <h1>Hello World!</h1>
    <p>Welcome to HTML.</p>


</body>

The body element contains the main document content that is rendered as part of the webpage.

Text

Headings, paragraphs, labels, and other textual content.

Images

Pictures, illustrations, icons, and graphics.

Links

Navigation between pages and online resources.

Lists

Ordered and unordered collections of information.

Tables

Structured information arranged into rows and columns.

Forms

Controls that allow users to enter and submit information.

6. The h1 Element

Main Heading
<h1>Hello World!</h1>

The h1 element represents a top-level heading in the document.

HTML Source

  • <h1>Hello World!</h1>
  • Contains opening and closing tags.
  • Defines the heading in the document.

Browser Output

  • Hello World!
  • Displayed as a prominent heading.
  • Default appearance depends on browser styles.

7. The p Element

Paragraph
<p>Welcome to HTML.</p>

The p element represents a paragraph of text.

Complete Structure

HTML Document Tree
Document
│
├── <!DOCTYPE html>
│
└── html
    │
    ├── head
    │   │
    │   └── title
    │       │
    │       └── "My First Webpage"
    │
    └── body
        │
        ├── h1
        │   │
        │   └── "Hello World!"
        │
        └── p
            │
            └── "Welcome to HTML."

Browser Output

After saving the file and opening it in a browser, the page displays the visible content defined inside the body element.

My First Webpage

Hello World!

Welcome to HTML.

Browser Tab

  • My First Webpage
  • Comes from the title element.
  • Part of the browser interface.

Visible Page

  • Hello World!
  • Welcome to HTML.
  • Comes from the body element.
HTML Tags Are Normally Not Displayed

The browser interprets HTML markup. Visitors normally see the rendered result rather than the opening and closing tags themselves.

Saving & Modifying

Web development involves repeatedly changing source code and checking the result.

Modify HTML
↓
Save File
↓
Browser Updates
↓
Inspect Result
↓
Modify Again

Modify the Heading

Change the original heading to a different message.

Before

  • <h1>Hello World!</h1>

After

  • <h1>Welcome to Bytecrest</h1>
Modified HTML
<h1>Welcome to Bytecrest</h1>
<p>Welcome to HTML.</p>

Save the file. If your local development server is running with automatic refresh enabled, the browser should update to display the new heading.

Add More Content

Adding Another Paragraph
<h1>Welcome to Bytecrest</h1>


<p>Welcome to HTML.</p>


<p>This is my first webpage.</p>
Experiment with the Page

Change text, add another heading, add more paragraphs, save the document, and observe the browser output. Experimentation is one of the fastest ways to understand HTML.

Creating Multiple Pages

A website can contain one HTML page or many HTML pages.

Each page can have its own HTML file and purpose.

Multi-Page Website
website/
│
├── index.html
│
├── about.html
│
├── services.html
│
├── contact.html
│
└── gallery.html
FilePurpose
index.htmlHomepage
about.htmlInformation about the person or organization
services.htmlServices offered
contact.htmlContact information or contact form
gallery.htmlImages or visual content
Website Navigation Concept
              ┌──────────────┐
              │  index.html  │
              │   Homepage   │
              └──────┬───────┘
                     │
        ┌────────────┼────────────┐
        │            │            │
        ▼            ▼            ▼
┌────────────┐ ┌────────────┐ ┌────────────┐
│ about.html │ │services.html│ │contact.html│
└────────────┘ └────────────┘ └────────────┘
Pages Are Connected with Links

In a later lesson, you will learn how anchor elements and hyperlinks connect separate HTML pages together.

Browser Rendering Process

The browser performs several operations between receiving an HTML document and displaying the page.

Open HTML Document
↓
Read Source Code
↓
Parse HTML
↓
Create DOM
↓
Calculate Presentation
↓
Render Page
Simplified Rendering Process
HTML Document
      │
      ▼
Browser Reads Bytes
      │
      ▼
HTML Is Parsed
      │
      ▼
DOM Is Created
      │
      ▼
Page Structure Is Processed
      │
      ▼
Layout and Painting
      │
      ▼
Visible Webpage

Step 1: Open or Receive the HTML Document

The browser receives the HTML document from a local file, local development server, or remote web server.

Step 2: Read and Parse the HTML

The browser processes the HTML markup and identifies elements, attributes, text, and document relationships.

Step 3: Create the DOM

The browser creates the Document Object Model, commonly called the DOM.

Simplified DOM
Document
│
└── html
    │
    ├── head
    │   │
    │   └── title
    │
    └── body
        │
        ├── h1
        │
        └── p

Step 4: Render the Page

The browser determines how the content should be presented, calculates layout, paints visual elements, and displays the final result.

This Is a Simplified Model

Real browser rendering involves additional processes, especially when CSS, JavaScript, fonts, images, and other resources are included. You will explore these concepts gradually.

Real-World Applications

HTML documents form the structural foundation of websites and browser-based applications across many industries.

Personal Websites

Portfolios, resumes, personal pages, and blogs.

Company Websites

Homepages, about pages, service pages, and contact pages.

E-Commerce

Product pages, category pages, carts, and checkout interfaces.

Web Applications

Dashboards, reports, settings pages, and management systems.

News Websites

Articles, categories, navigation, and media content.

Learning Platforms

Lessons, quizzes, course pages, and documentation.

Social Platforms

Profiles, feeds, posts, comments, and messaging interfaces.

Public Services

Information portals, forms, service pages, and public resources.

Advantages

Beginner-Friendly

Basic HTML pages can be created with a small number of easy-to-understand elements.

Browser Support

HTML is a fundamental web standard supported by modern web browsers.

Lightweight

Simple HTML documents can be small and quick to transfer and process.

Platform Independent

HTML documents can be created and viewed across different operating systems.

Connects Pages

Hyperlinks allow individual documents to become connected websites.

Works with CSS

CSS can control the visual presentation of HTML content.

Works with JavaScript

JavaScript can interact with HTML elements to add dynamic behavior.

Foundation of the Web

HTML provides the document structure used throughout web development.

  • Easy to begin learning.
  • Uses plain-text source files.
  • Does not require compilation.
  • Works with modern web browsers.
  • Supports structured and meaningful content.
  • Can connect multiple pages.
  • Integrates with CSS.
  • Integrates with JavaScript.
  • Supports media and interactive controls.
  • Forms the structural foundation of webpages.

Common Beginner Mistakes

Saving Without the .html Extension

A file without the correct extension may not be recognized as an HTML document.

Creating index.html.txt

Hidden operating-system extensions can cause beginners to accidentally create a text file instead of an HTML file.

Forgetting to Save

The browser cannot display source-code changes that have not been saved to the file.

Opening the Wrong File

A browser may display a different HTML file from the one currently being edited.

Editing the Browser Output

Temporary changes made through browser tools do not normally modify the original HTML source file.

Forgetting Closing Tags

Many HTML elements use both opening and closing tags. Missing tags can create unexpected document structures.

Writing Content Outside the Main Document Structure

Beginners may place content in incorrect locations instead of following the basic html, head, and body structure.

Confusing title with h1

The title element describes the document in browser interfaces, while h1 represents a visible top-level heading in the page content.

Expecting HTML Tags to Appear on the Page

Browsers interpret markup and normally display the resulting content rather than the tags themselves.

Writing Large Amounts of Code Before Testing

Testing small changes frequently makes mistakes easier to identify.

Missing Closing Tag
<!-- ❌ Incorrect -->


<h1>Hello World!




<!-- ✅ Correct -->


<h1>Hello World!</h1>

Incorrect Understanding

  • The browser edits the HTML file.
  • The title appears as the main page heading.
  • HTML must be compiled.
  • Every webpage must use only one file.

Correct Understanding

  • The editor changes the source file.
  • The title commonly identifies the browser tab.
  • The browser processes HTML directly.
  • Websites can contain many HTML files.

Best Practices

  • Use the .html extension for HTML documents.
  • Use index.html for the main page when appropriate.
  • Open the complete project folder in your editor.
  • Keep the basic document structure clear.
  • Place document information inside the head element.
  • Place main webpage content inside the body element.
  • Use meaningful page titles.
  • Use meaningful visible headings.
  • Indent nested HTML elements consistently.
  • Save the file frequently.
  • Test small changes regularly.
  • Keep the browser open during development.
  • Use a local development server when useful.
  • Check that you are editing and viewing the same file.
  • Use lowercase filenames for consistency.
  • Use meaningful filenames for additional pages.
  • Organize related project files.
  • Use browser developer tools when debugging.
  • Do not depend entirely on editor suggestions.
  • Understand the HTML code you write.
Readable Formatting
<!DOCTYPE html>
<html>


<head>
    <title>My First Webpage</title>
</head>


<body>
    <h1>Hello World!</h1>
    <p>Welcome to HTML.</p>
</body>


</html>
Readable Code Matters

Browsers can process many formatting styles, but consistent indentation makes HTML much easier for developers to read, understand, and maintain.

Frequently Asked Questions

An HTML page is a document containing HTML markup that a browser can process and display as a webpage.

HTML documents commonly use the .html extension.

Yes. The .htm extension also exists, although .html is commonly used today.

Many servers and hosting environments commonly use index.html as a default document for a directory.

No. You can use another valid filename, but index.html is a common and useful convention for the main page.

Yes. Many websites contain multiple HTML documents connected through hyperlinks and navigation.

No. Browsers process HTML documents directly.

The DOCTYPE declaration tells the browser how the document should be processed and helps trigger standards-based HTML rendering.

No. It is a document type declaration rather than a normal HTML element.

The html element is the root element of an HTML document.

The head element contains document information and references to resources that are not normally displayed as the main page content.

The body element contains the main content that is rendered as part of the webpage.

The title element identifies the document in browser interfaces, while h1 represents a visible top-level heading in the document content.

The browser interprets the tags as markup instructions and renders the resulting document content.

Check whether the file is saved, whether you are viewing the correct file, and whether your local development server is running correctly.

No. Simple HTML files can be opened directly in a browser, but a local development server provides a convenient workflow.

Browser developer tools can temporarily modify the displayed document, but permanent changes should be made in the source file.

The Document Object Model is an object-based representation of the document structure created and used by the browser.

The browser processes the document stream while parsing the markup and constructing the document structure.

Yes. A simple website can be created with HTML alone, although CSS and JavaScript are commonly added for presentation and behavior.

They cannot have the same filename inside the same folder, but files in different folders can share a filename.

Spaces can work in some situations, but lowercase names with hyphens are usually easier to manage and use in URLs.

The browser may attempt to recover from the mistake, but the resulting document structure may differ from what you intended.

Frequent saving ensures the browser and development tools can work with your latest source code.

The next step is learning HTML headings and understanding how heading levels organize webpage content.

Key Takeaways

  • An HTML page is a text document containing HTML markup.
  • HTML documents commonly use the .html extension.
  • A browser processes HTML and displays the result as a webpage.
  • The source file and rendered webpage are different representations.
  • index.html is commonly used as a main or default page.
  • A website can contain multiple HTML documents.
  • The DOCTYPE declaration appears at the beginning of the document.
  • The html element is the root element.
  • The head element contains document information and resource references.
  • The title element commonly defines the browser-tab title.
  • The body element contains the main rendered page content.
  • The h1 element represents a top-level heading.
  • The p element represents a paragraph.
  • HTML tags are interpreted rather than normally displayed as text.
  • Saving the file is necessary before unsaved changes can be processed.
  • A local development server can refresh the browser after changes.
  • The browser parses HTML and creates the DOM.
  • The DOM represents the document structure.
  • Multiple HTML pages can be connected to form a website.
  • The basic development cycle is edit, save, view, inspect, and repeat.

Summary

You have now created your first complete HTML webpage.

An HTML page begins as a text document containing HTML markup. When the document is opened in a browser, the browser parses the markup, creates an internal document structure, and renders the visible webpage.

Your first document introduced the basic structure of an HTML page: the DOCTYPE declaration, the html root element, the head section, the title element, and the body section.

You also used an h1 element to create a top-level heading and a p element to create a paragraph.

The title element commonly provides the document title shown in the browser interface, while the body element contains the main content rendered as part of the page.

You learned that websites can contain multiple HTML documents such as index.html, about.html, services.html, and contact.html.

You also learned the basic browser process: receive or open the document, parse the HTML, create the DOM, calculate the presentation, and render the final webpage.

Most importantly, you have started the practical web development workflow: write code, save the file, inspect the browser result, make changes, and repeat.

In the next lesson, you will learn how HTML headings organize titles and sections using six different heading levels.

Next Lesson →

Headings