Editing HTML Content
Opening HTML Files
-
Get a code editor:
- Free options: VS Code, Sublime Text, Notepad++
- Simple: Just use Notepad (not recommended) -
Right-click an HTML file
- Select Open with → Your Editor
Understanding HTML Structure
Basic HTML template has:
Welcome
Page content...
What Each Part Does:
- <head> - Meta information, styles, title
- <title> - Browser tab title and search results
- <body> - Visible content
- <h1-h6> - Headings (h1 most important)
- <p> - Paragraphs
- <a> - Links
Editing Text Content
- Open HTML file in editor
- Find text you want to change
- Select the text inside the tags
- Type your new text
- Save file (Ctrl+S or Cmd+S)
Example:
Welcome to Our Site
Welcome to My Business
Important Rules
- Don't delete tags - Keep
<h1>and</h1>around text - Match opening/closing tags -
<p>text</p>not<p>text - Proper nesting - Don't overlap tags
- Don't break structure - Keep file organized
Editing Links
Links use <a> tags:
About Us
href- Where the link goes- Text between tags - What appears on page
Changing link destination:
External links:
Example Site
Adding New Text Sections
To add new paragraph:
This is a new paragraph I want to add.
To add new heading:
This is a subheading
Editing Form Text
Forms look like:
Change label text:
Change placeholder (hint text):
Change button text:
Common HTML Elements
| Element | Use | Example |
|---|---|---|
<h1>-<h6> |
Headings | <h1>Main Title</h1> |
<p> |
Paragraphs | <p>Text content</p> |
<a> |
Links | <a href="page.html">Link</a> |
<img> |
Images | <img src="image.jpg" alt="Description"> |
<button> |
Buttons | <button>Click Me</button> |
<input> |
Forms | <input type="text"> |
<ul>/<li> |
Lists | <ul><li>Item</li></ul> |
Saving Your Changes
- After editing, save file (Ctrl+S)
- Reload in browser (F5 or refresh)
- See your changes
Best Practices
- Make small changes at a time
- Save frequently
- Test changes in browser
- Keep backup of original
- Comment confusing sections
Common Editing Mistakes
❌ Deleting closing tags - <h1>Text (missing </h1>)
❌ Breaking tag structure - Text outside tags
❌ Extra spaces break links - href="about .html" (space breaks it)
❌ Forgetting to save - Make changes but forget Ctrl+S
❌ Editing wrong file - Editing backup instead of current