How to Edit an HTML File: Beginner's Guide

HTML files are just text files with a .html extension. Here's how to edit them on any computer, even if you've never coded before.

What You Need

To edit HTML, you need:

A text editor (not Word - we'll explain why)
A web browser to preview changes
That's it!

Step 1: Choose a Text Editor

Free Options (Recommended)

Visual Studio Code (Best for beginners)

Free from code.visualstudio.com
Syntax highlighting
Auto-complete
Live preview extensions

Notepad++ (Windows)

Lightweight and fast
Syntax highlighting
Free and simple

Sublime Text (Mac/Windows/Linux)

Fast and clean
Free to evaluate

TextEdit (Mac) or Notepad (Windows)

Already on your computer
Basic but works

Why Not Microsoft Word?

Word adds hidden formatting that breaks HTML. Always use a plain text editor, not a word processor.

Step 2: Open the HTML File

Method 1: Right-Click

Find your HTML file
Right-click → Open with
Select your text editor

Method 2: From the Editor

Open your text editor
File → Open
Navigate to your HTML file
Click Open

Method 3: Drag and Drop

Drag the HTML file onto your text editor icon.

Step 3: Understand the Structure

A basic HTML file looks like this:

<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
</head>
<body>
    <h1>Main Heading</h1>
    <p>This is a paragraph.</p>
</body>
</html>

Key parts:

<head> - Contains title and metadata (not visible on page)
<body> - Contains visible content
Tags come in pairs: <tag>content</tag>

Common Edits

Change the Page Title

Find this line:

<title>Old Title</title>

Change it to:

<title>New Title</title>

Edit Text Content

Find the text you want to change and edit it directly:

<!-- Before -->
<p>Old text here</p>

<!-- After -->
<p>New text here</p>

Change a Heading

<!-- Before -->
<h1>Welcome to My Site</h1>

<!-- After -->
<h1>Welcome to My Awesome Site</h1>

Update a Link

Find the link:

<a href="https://old-url.com">Click here</a>

Change the URL:

<a href="https://new-url.com">Click here</a>

Change an Image

Find the image tag:

<img src="old-image.jpg" alt="Description">

Update the source:

<img src="new-image.jpg" alt="New description">

Add New Content

Add a new paragraph in the <body> section:

<body>
    <h1>Heading</h1>
    <p>Existing paragraph.</p>
    <p>New paragraph I just added!</p>  <!-- New -->
</body>

Step 4: Save Your Changes

Important: Save as a plain text file with .html extension.

Windows: File → Save (Ctrl + S)
Mac: File → Save (Cmd + S)

If using Notepad:

File → Save As
Change "Save as type" to "All Files"
Name it filename.html (include .html)

Step 5: Preview Your Changes

Method 1: Browser

Find your HTML file
Double-click to open in browser
Refresh (F5 or Ctrl+R) after each save

Method 2: Live Preview

VS Code with Live Server extension:

Install "Live Server" extension
Right-click HTML file → "Open with Live Server"
Changes appear automatically

Method 3: Online Viewer

Use LinkyHost HTML Viewer:

Paste your HTML code
See live preview
No setup required

Common HTML Tags

Tag	Purpose	Example
`<h1>` to `<h6>`	Headings	`<h1>Big Heading</h1>`
`<p>`	Paragraph	`<p>Text here</p>`
`<a>`	Link	`<a href="url">Click</a>`
`<img>`	Image	`<img src="photo.jpg">`
`<ul>`, `<li>`	Bullet list	See below
`<strong>`	Bold	`<strong>Bold text</strong>`
`<em>`	Italic	`<em>Italic text</em>`
`<br>`	Line break	`Line 1<br>Line 2`
`<div>`	Container	Groups content

List Example

<ul>
    <li>First item</li>
    <li>Second item</li>
    <li>Third item</li>
</ul>

Adding CSS (Styling)

Inline Styles

<p style="color: blue; font-size: 18px;">Blue text</p>

Internal Stylesheet

Add in the <head> section:

<head>
    <style>
        body {
            font-family: Arial, sans-serif;
        }
        h1 {
            color: navy;
        }
    </style>
</head>

Troubleshooting

Page Looks Broken

Check for:

Missing closing tags (</p>, </div>)
Typos in tag names
Missing quotes around attributes

Changes Not Showing

Try:

Hard refresh: Ctrl+Shift+R (Windows) or Cmd+Shift+R (Mac)
Clear browser cache
Make sure you saved the file

Weird Characters Appearing

Cause: Wrong file encoding

Fix: Save with UTF-8 encoding:

VS Code: Click encoding in bottom bar → Save with Encoding → UTF-8
Notepad: Save As → Encoding dropdown → UTF-8

Images Not Loading

Check:

File path is correct
Image file exists
File name matches exactly (case-sensitive)

<!-- If image is in same folder -->
<img src="photo.jpg">

<!-- If image is in images subfolder -->
<img src="images/photo.jpg">

Editing HTML from Email or Download

If you received an HTML file:

Save it to your computer
Open in text editor
Make your changes
Save the file
Test in browser

To share your edited file:

Upload to LinkyHost
Get a shareable link

Best Practices

Always Backup First

Before editing, make a copy:

myfile.html → myfile-backup.html

Indent Your Code

Makes it easier to read:

<!-- Hard to read -->
<div><p>Text</p><p>More</p></div>

<!-- Easy to read -->
<div>
    <p>Text</p>
    <p>More</p>
</div>

Use Comments

Leave notes for yourself:

<!-- This section is the header -->
<header>
    ...
</header>

<!-- TODO: Add footer later -->

Validate Your HTML

Check for errors at validator.w3.org

Hosting Your HTML File

After editing, you can:

View Locally

Double-click to open in browser (only you can see it)

Share Online

Upload to LinkyHost Free Website Hosting:

Upload your HTML file
Get a public URL
Share with anyone

View HTML Online

Use LinkyHost HTML Viewer for quick previews

FAQ

Can I edit HTML on my phone?

Yes, with apps like:

iOS: Textastic, Koder
Android: QuickEdit, Dcoder

Do I need to learn programming?

Basic HTML edits don't require programming knowledge. Just understand the tag structure.

What's the difference between HTML and HTM?

Nothing functional. .htm is an older convention from when extensions were limited to 3 characters. Both work the same.

Can I edit HTML in Google Docs?

No. Use a proper text editor or online HTML editor.

Summary

To edit HTML:

Open in a text editor (VS Code, Notepad++, etc.)
Make your changes
Save the file
Preview in browser

Key tips:

Use a plain text editor, not Word
Tags come in pairs: <tag>content</tag>
Refresh browser to see changes
Backup before editing

To share: Upload to LinkyHost