How to Write Your First HTML Code: Beginner’s Guide (2026)

How to write first code in HTML? It is easier than you think. You only need a computer, a free program called Notepad, and about 15 minutes. By the end of this complete HTML tutorial for beginners, you will have built your own real web page with headings, text, lists, a picture, and a clickable link. No experience needed. We explain everything in simple words, so even a 5th standard student can follow along.

Last updated: November 2026 • Reading time: about 18 minutes • Level: Absolute beginner

<!DOCTYPE html>
<html>
  <head>
    <title>My First Page</title>
  </head>
  <body>
    <h1>Hello, World!</h1>
    <p>This is my first HTML code.</p>
  </body>
</html>

What You Will Learn (Table of Contents)

1. What is HTML? (Explained Like You Are 10)
2. What You Need Before You Start
3. Video 1: Introduction to HTML
4. Video 2: WYSIWYG vs Writing Code
5. Write Your First HTML Code (Step by Step)
6. The Basic Structure of an HTML Page
7. Video 3: Opening and Closing Tags
8. Video 4: HTML Headings (h1 to h6)
9. Video 5: Paragraphs and Break Tags
10. Video 6: Text Formatting (Bold, Italic and More)
11. Video 7: HTML Lists
12. Video 8: Adding Images
13. Video 9: Hyperlinks
14. Put It All Together: Your Complete Web Page
15. 7 Common Beginner Mistakes (and Easy Fixes)
16. Practice Challenges
17. HTML Cheat Sheet
18. Simple Glossary
19. Frequently Asked Questions
20. What to Learn Next

What is HTML? (Explained Like You Are 10)

Imagine you are building a house. First you need the skeleton: walls, doors, windows, and rooms. Later you paint the walls (that is CSS) and add lights and switches that work (that is JavaScript).

HTML is the skeleton of a website. It tells the browser: “This is a big title. This is a paragraph. This is a picture. This is a link.”

The full name is HyperText Markup Language. Let us break the name into easy pieces:

• HyperText: text that can take you to another page when you click it (a link).
• Markup: special marks (tags) we put around text to explain what it is.
• Language: a set of rules the computer understands.

Think of tags like labels on boxes when you move to a new home. A box labelled “Kitchen” goes to the kitchen. A text labelled “Heading” becomes a heading on the page.

Every website you visit, from YouTube to your school website, uses HTML. Learning it is the very first step to becoming a web developer, a blogger who controls their own site, or a digital marketer who can fix small website problems.

What You Need Before You Start

Good news: you do not need to buy anything. You need only three things.

Tip for beginners: Start with Notepad. When you feel confident, move to Visual Studio Code, a free editor loved by professional developers. It colours your code and helps you find mistakes.

Video 1: Introduction to HTML

Let us begin with a short video that introduces HTML and shows you what you will build in this course.

What you learn in this video: what HTML is, why every website needs it, and what we will cover in the next lessons.

Video 2: WYSIWYG vs Writing Code

WYSIWYG (say it like “wizzy-wig”) means What You See Is What You Get. When you use tools like Microsoft Word or the WordPress visual editor, you click a button to make text bold, and you instantly see bold text. You never see the code behind it.

When you write HTML yourself, you type the code, and then the browser shows you the result. Both ways make the same page. Learning the code gives you full control and helps you fix problems that visual editors cannot solve.

How to Write Your First HTML Code (Step by Step)

Now the fun part. Follow these steps exactly and you will see your own web page in a few minutes.

Step 1: Open a text editor

• Windows: Click Start, type Notepad, and press Enter.
• Mac: Open TextEdit, then click Format and choose Make Plain Text.

Step 2: Type this code

<!DOCTYPE html>
<html>
  <head>
    <title>My First Page</title>
  </head>
  <body>
    <h1>Hello, World!</h1>
    <p>This is my first HTML code.</p>
  </body>
</html>

Step 3: Save the file correctly

1. Click File, then Save As.
2. Name the file index.html. The .html ending is very important.
3. In “Save as type”, choose All Files (Windows) so Notepad does not add .txt.
4. Save it on your Desktop so it is easy to find.

Step 4: Open it in your browser

Double-click index.html. Your browser opens and shows a big “Hello, World!” with a line of text below it. Congratulations, you just wrote your first HTML code!

Step 5: Change it and refresh

Go back to Notepad, change “Hello, World!” to your own name, save the file, and press F5 (refresh) in the browser. You will see the change at once. This is how real developers work: write, save, refresh.

The Basic Structure of an HTML Page

Every HTML page has the same skeleton. Here is what each part does:

Easy way to remember: A person has a head (thinking, hidden details) and a body (what everyone sees). An HTML page is the same.

Video 3: Opening and Closing Tags

Tags are the most important idea in HTML. A tag is a word inside angle brackets, like <p>.

Most tags come in a pair:

• The opening tag starts something: <p>
• The closing tag ends it, and has a slash /: </p>

<p>I am a paragraph.</p>

Everything between the opening and closing tag is the content. Together, the opening tag, content, and closing tag are called an element.

Real-life example: Opening a tag is like opening a door. Closing a tag is like closing it again. If you leave the door open, cold air comes in. If you forget to close a tag, your page can look broken.

Video 4: HTML Headings (h1 to h6)

Headings are like the titles in a school book. There are six sizes, from <h1> (biggest and most important) to <h6> (smallest).

<h1>Main Title</h1>
<h2>Big Section</h2>
<h3>Smaller Section</h3>
<h4>Even Smaller</h4>
<h5>Very Small</h5>
<h6>Smallest</h6>

Golden rules for headings:

• Use only one <h1> on each page. It is the main title.
• Do not skip levels. Go h1, then h2, then h3.
• Do not use headings just to make text big. Use them to show structure. Search engines such as Google read your headings to understand your page.

Video 5: Paragraphs and Break Tags

The paragraph tag

The <p> tag holds a paragraph of text. The browser adds a little space before and after it.

<p>This is the first paragraph.</p>
<p>This is the second paragraph.</p>

The line break tag

The <br> tag moves text to the next line, like pressing Enter. It is a special tag with no closing tag, because it has no content inside. These are called empty tags or void tags.

Roses are red,<br>
Violets are blue.

The horizontal line tag

The <hr> tag draws a straight line across the page. It is also an empty tag.

<p>Above the line</p>
<hr>
<p>Below the line</p>

Important: Pressing Enter in your code does not make a new line on the web page. The browser ignores extra spaces and Enter keys. Always use <p> or <br>.

Video 6: Text Formatting (Bold, Italic and More)

You can change how text looks using formatting tags.

Difference between <b> and <strong>: Both look bold. But <strong> tells browsers and screen readers that the text is truly important. Use <strong> and <em> when meaning matters.

Nesting tags: You can put one tag inside another. Close the inner tag first.

<p>This is <strong>very <em>important</em></strong> text.</p>

Video 7: HTML Lists

Lists help you show items neatly, like a shopping list or the steps of a recipe. HTML has two main kinds.

Unordered list (bullet points)

Use <ul> when order does not matter. Each item goes inside <li> (list item).

<ul>
  <li>Apple</li>
  <li>Banana</li>
  <li>Mango</li>
</ul>

Result:

• Apple
• Banana
• Mango

Ordered list (numbers)

Use <ol> when order matters, like steps.

<ol>
  <li>Wake up</li>
  <li>Brush teeth</li>
  <li>Go to school</li>
</ol>

Result:

1. Wake up
2. Brush teeth
3. Go to school

Memory trick: UL = Unordered List (dots). OL = Ordered List (numbers). LI = List Item.

Video 8: How to Add an Image in HTML

Pictures make pages fun. We use the <img> tag. It is an empty tag, so it has no closing tag.

<img src="cat.jpg" alt="A cute orange cat sitting on a sofa" width="300">

The extra words inside the tag are called attributes. They give more information:

Tips for images:

• Put the image file in the same folder as your index.html, or the picture will not show.
• Always write a clear alt text. It is good for accessibility and for SEO.
• Use small, compressed images so your page loads fast.
• Pictures can be .jpg, .png, .gif, .webp, or .svg.

Video 9: How to Create a Hyperlink in HTML

Links are what make the web a “web”. They connect one page to another. We use the anchor tag: <a>.

<a href="https://www.google.com">Go to Google</a>

Here, href means hypertext reference. It holds the address where the link goes. The text between the tags is what people click.

Open a link in a new tab

<a href="https://www.google.com" target="_blank" rel="noopener noreferrer">Google (new tab)</a>

Make an image clickable

<a href="https://www.google.com">
  <img src="cat.jpg" alt="A cute orange cat" width="200">
</a>

Link to another page on your own website

<a href="about.html">About Me</a>

Put It All Together: Your Complete Web Page

Let us combine everything you learned into one page. Copy this code into Notepad, save it as myself.html, and open it.

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

    <h1>All About Me</h1>

    <img src="me.jpg" alt="My smiling photo" width="200">

    <h2>Who Am I?</h2>
    <p>Hello! My name is <strong>Your Name</strong>.<br>
    I am learning <em>HTML</em> and it is fun!</p>

    <hr>

    <h2>My Favourite Fruits</h2>
    <ul>
      <li>Mango</li>
      <li>Apple</li>
      <li>Grapes</li>
    </ul>

    <h2>My Morning Routine</h2>
    <ol>
      <li>Wake up</li>
      <li>Brush teeth</li>
      <li>Have breakfast</li>
    </ol>

    <h2>My Favourite Website</h2>
    <p>I love to search on
      <a href="https://www.google.com" target="_blank" rel="noopener noreferrer">Google</a>.
    </p>

  </body>
</html>

Two new lines appeared in the <head>. They are good habits:

• <meta charset="UTF-8"> makes sure all letters and symbols show correctly.
• <meta name="viewport" ...> makes your page fit nicely on mobile phones.

7 Common Beginner Mistakes (and Easy Fixes)

1. Forgetting the closing tag. Always close what you open, for example <p>...</p>.
2. Saving as .txt. Your file must end with .html. Choose “All Files” when saving.
3. Wrong order when nesting. Close the inner tag first: <b><i>Text</i></b>, not <b><i>Text</b></i>.
4. Image not showing. Check the file name, spelling, capital letters, and that the image is in the right folder.
5. Forgetting quotes. Attribute values need quotes: href="page.html".
6. Not refreshing the browser. After saving changes, press F5.
7. Using curly “smart” quotes. Type straight quotes " in code. Word processors may change them and break your code.

Practice Challenges

Reading is good, but practice makes you a coder. Try these without looking at the answers.

1. Easy: Make a page with your name as an h1 and your school name in a paragraph.
2. Easy: Add a list of your 5 favourite cartoons.
3. Medium: Create a recipe page with a title, a picture, an ingredients list (bullets), and steps (numbers).
4. Medium: Make a “My Favourite Websites” page with three working links that open in a new tab.
5. Challenge: Build a page about your best friend with headings, bold and italic words, an image, a list, and a link.

HTML Cheat Sheet for Beginners

Simple Glossary

Browser

A program that opens websites, like Chrome or Edge.

Tag

A word inside angle brackets that tells the browser what something is.

Element

An opening tag, its content, and its closing tag together.

Attribute

Extra information inside a tag, such as src or href.

Nesting

Putting one tag inside another.

Source code

The text of the program you write.

Text editor

A simple program where you write code.

WYSIWYG

What You See Is What You Get. Editing without seeing code.

Frequently Asked Questions (FAQ)

How do I write my first code in HTML?

Open Notepad, type a basic HTML page with <html>, <head>, and <body> tags, save it as index.html, and open it in your browser. The full steps are in the “Write Your First HTML Code” section above.

Is HTML a programming language?

Not exactly. HTML is a markup language. It describes the structure of a page but does not do logic or calculations like Python or JavaScript. It is still the best first step for beginners.

How long does it take to learn HTML?

Most beginners understand the basics in a few hours and can build simple pages within a week of regular practice. Mastering everything takes longer, but you can start building real pages very quickly.

Do I need to install any software to learn HTML?

No. A basic text editor like Notepad and any web browser are enough. Later you can switch to a free editor such as Visual Studio Code.

Can a child learn HTML?

Yes. HTML uses simple English words and gives instant results, so children around 10 years old can learn it easily with examples and practice.

What is the difference between HTML, CSS, and JavaScript?

HTML builds the structure (skeleton), CSS adds style (colours, fonts, layout), and JavaScript adds action (buttons that work, animations). Together they make modern websites.

Why is my HTML page showing code instead of a web page?

Your file was probably saved as .txt or you opened it in the editor instead of the browser. Save it with the .html ending and double-click it.

Is HTML case sensitive?

HTML tag names are not case sensitive, but writing them in lowercase is the standard good habit. File names for images, however, should match exactly.

What to Learn Next

You now know the foundation of every website. Here is a simple roadmap:

1. More HTML: tables, forms, buttons, and semantic tags like <header>, <nav>, <footer>.
2. CSS: add colours, fonts, spacing, and layouts to make your pages beautiful.
3. JavaScript: make your pages interactive.
4. Publish your site: put your page online so the world can see it.

For a trusted, free reference, visit the MDN Web Docs HTML guide.

Conclusion

You started with zero and now know how to write your first code in HTML: structure, tags, headings, paragraphs, line breaks, formatting, lists, images, and links. The best way to improve is to practice a little every day. Build small pages about things you love and your skills will grow fast.