Home Blog Contact

Web Design Tutorial — Lesson 6 of 27 [ Updated: 19 Jul 2026 ]

Write Your First HTML Code – Beginner HTML Tutorial

Learning Objectives

After completing this tutorial, you will be able to:

  • Write your first HTML code.
  • Understand the basic HTML page template.
  • Recognize the five essential parts of every HTML document.
  • Prepare for learning each HTML element in detail.

Table of Contents

  1. Introduction
  2. Your First HTML Code
  3. Understanding the HTML Template
  4. Saving the File
  5. Opening the File in Your Browser
  6. Practice Exercise
  7. Assignment
  8. Summary
  9. Frequently Asked Questions
  10. Next Tutorial

Introduction

Congratulations!

You've already created your first project folder and your first index.html file.

Now it's time for the most exciting moment—writing your very first HTML code.

Don't worry if you don't understand every line yet.

At this stage, your goal is simply to become familiar with the structure. In the next few tutorials, we'll study each line individually, so there is no need to memorize anything today.

Professional web developers also started with this exact template.

Your First HTML Code

Open index.html in your code editor and type the following code exactly as shown.

<!DOCTYPE html>
<html>
<head>
    <title>My First Website</title>
</head>

<body>

</body>
</html>

Take your time while typing.

Do not copy and paste.

Typing the code yourself helps you remember the structure and improves your confidence.

Understanding the HTML Template

Let's look at the code without going into too much detail.

<!DOCTYPE html>

This tells the browser that the document uses HTML5.

<html>

This is the root element. Everything on your web page will be placed inside it.

<head>

The <head> section contains information about the page. Visitors don't usually see this information directly, but browsers and search engines use it.

<title>My First Website</title>

The text inside the <title> tag appears on the browser tab.

<body>

Everything visible on your website—such as headings, text, images, buttons, and links—will be placed inside the <body> element.

Remember, this is only a quick introduction.

Starting from the next tutorial, we'll explore each part one by one with examples, diagrams, and real-world explanations.

Saving the File

Once you've finished typing the code:

  1. Save the file.
  2. Make sure the file name is still index.html.
  3. Close and reopen the file to confirm that everything has been saved correctly.

Saving your work frequently is a good habit that every developer should develop.

Opening the File in Your Browser

Now, locate the index.html file on your computer.

Double-click it.

Your default web browser should open.

You may notice that the page appears completely blank.

This is expected.

Although the page contains HTML code, there is nothing inside the <body> element yet, so the browser has nothing to display.

However, look at the browser tab.

You should see the text:

My First Website

That text comes from the <title> element.

Congratulations—you've just created and opened your first web page!

Practice Exercise

Complete the following steps:

  • Type the HTML template yourself.
  • Save the file.
  • Open it in your browser.
  • Check the browser tab.
  • Confirm that the page opens without errors.

Assignment

Change the text inside the <title> element.

For example:

<title>John's Portfolio</titleor<title>My Learning Website</title>

Save the file and refresh the browser.

Notice how only the browser tab title changes, while the page itself remains blank.

This simple experiment will help you understand that different HTML elements have different purposes.

Summary

In this tutorial, you wrote your first HTML code and created the standard HTML page structure used by every website. You also learned that the page appears blank because the <body> element is empty, while the browser tab displays the text from the <title> element.

Most importantly, you discovered that every line in the HTML template has a specific purpose. In the upcoming tutorials, you'll learn each element in detail.

Frequently Asked Questions

Why is my page blank?

Because the <body> element doesn't contain any content yet. The browser has nothing to display.

Is this the same template professionals use?

Yes. This is the standard HTML5 document structure used by web developers around the world.

Do I need to memorize this code?

No. By using it repeatedly throughout the course, you'll naturally remember it.

← Previous Next →