Write Simple HTML Code in Notepad

September 16, 2025 - By notepad

If you’re just starting with web development, Notepad is one of the easiest tools to begin with. You don’t need fancy editors to learn HTML — Notepad lets you write pure HTML files and view them in your browser. In this guide you’ll learn how to write a simple, working HTML page in Notepad, step by step. No prior experience required.

Why use Notepad for HTML?

It’s simple and free (built into Windows).
You see the raw HTML — great for learning how web pages are built.
No automatic formatting or hidden code — what you write is exactly what the browser receives.
It’s fast to open and lightweight on any PC.

If you later want more features (syntax highlighting, multiple files, live preview), you can move to editors like Notepad++ or VS Code. But Notepad is perfect to start.

What is HTML (very short)?

HTML (HyperText Markup Language) is the language used to create web pages. You write tags like <h1> and <p> to tell the browser how to display headings, paragraphs, lists, images, and links. Add a little CSS and JavaScript later to style and add behavior.

If you want quick references while learning, check:

First page: step-by-step

1) Open Notepad

Press Windows, type Notepad, and open it.

2) Type this basic HTML

Copy or type the following into Notepad exactly:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>My First HTML Page</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
  <h1>Hello — Welcome to NotePad Z!</h1>
  <p>This is my first HTML page written in Notepad. I am learning HTML step by step.</p>

  <h2>Simple list</h2>
  <ul>
    <li>Learn basic tags</li>
    <li>Save as .html</li>
    <li>Open in browser</li>
  </ul>

  <p>Visit <a href="https://www.w3schools.com/html/" target="_blank" rel="noopener">W3Schools HTML Tutorial</a> to learn more.</p>
</body>
</html>

3) Save the file as HTML

Click File → Save As…
At the bottom, set Save as type to All Files.
Enter a file name like index.html (make sure it ends with .html).
Set Encoding to UTF-8.
Save to your Desktop or a folder you can find.

4) Open in browser

Go to the saved file and double-click index.html.
It will open in your default web browser and show the page you wrote.

Congrats — you just made a web page with Notepad!

Quick explanation of the code

<!DOCTYPE html> — tells the browser this is HTML5.
<html lang="en"> — root element; lang helps search engines and screen readers.
<head> — meta information (title, charset, responsive settings).
<meta charset="utf-8"> — ensures correct character display (use UTF-8).
<title> — appears on the browser tab.
<body> — visible content (headings, paragraphs, links).
<h1>, <h2> — headings.
<p> — paragraph.
<ul> / <li> — unordered list.
<a href="..."> — link to another page.

Add an image and a table (extra examples)

Image

Save an image file (sample.jpg) in the same folder as your index.html and add:

<h2>Image example</h2>
<img src="sample.jpg" alt="Sample image" width="400">

Table

Simple table example:

<h2>Sample Table</h2>
<table border="1" cellpadding="6">
  <tr><th>Name</th><th>Role</th></tr>
  <tr><td>Alice</td><td>Writer</td></tr>
  <tr><td>Bob</td><td>Designer</td></tr>
</table>

Save and refresh the browser to see changes.

View source and learn by editing

Right-click the browser page → View Page Source (or press Ctrl+U) to see exactly the HTML you wrote. Editing the file in Notepad and refreshing the browser shows changes immediately. This loop (edit → save → refresh) is how beginners learn HTML quickly.

Useful tags to learn next (short list)

<strong> / <em> — bold and italic emphasis.
<ol> — ordered list.
<img> — images (with alt attribute).
<a> — links (add target="_blank" to open in new tab).
<div> / <span> — containers for layout.
<form> — collect user input.
<input>, <textarea>, <button> — form controls.

For guided lessons, try:

HTML basics on MDN
Try HTML in the browser on CodePen (interactive playground)

Common beginner mistakes & fixes

Saved as index.html.txt — Windows hides known extensions sometimes. When saving, pick All Files and type .html explicitly.
Wrong encoding — use UTF-8 to avoid strange characters.
Browser shows old version — press Ctrl+F5 to force refresh.
Image not showing — make sure src path is correct and file is in same folder (or use a full URL).
Tag not closed — missing </p> or </div> can break layout; always close tags.

Basic Notepad tips for HTML

Turn Word Wrap off (Format → Word Wrap) so long HTML lines don’t wrap unexpectedly.
Set Notepad font to a monospaced font (Format → Font → choose Consolas or Courier New) for easier reading.
Use Save As → Encoding: UTF-8 to avoid character issues.
For larger projects, move to a code editor (Notepad++, Visual Studio Code) that highlights syntax and supports multiple files.

How to test responsiveness (mobile friendly)

Add this meta tag (we already included earlier):

<meta name="viewport" content="width=device-width, initial-scale=1">

Then open the page, right-click → Inspect (or press F12) and use the device toolbar to check how the page looks on phones and tablets.

Next steps after you master basics

Learn CSS to style pages (colors, layout, fonts). (Start: CSS basics on W3Schools)
Learn JavaScript to add behavior (click handlers, interactive forms). (Start: JS on MDN)
Try building a multi-page site and use relative links like about.html.

Security & sharing tips

If you use images or scripts from the web, prefer secure https:// links.
Don’t upload sensitive data to public pages.
To share your page with others, compress the folder (ZIP) or host using GitHub Pages or simple hosting services.

Short checklist before publishing a simple site

Links open correctly and external links use rel="noopener" for safety.

Files saved with .html extension and UTF-8 encoding.

All images placed in the same folder or correct paths used.

alt attributes added for images (accessibility).

Page title set and meta viewport included.