• Hajipur, Bihar, 844101

☰
❮
❯

HTML

HTML5 Basics

HTML Styling and Design

HTML Links and Media

HTML Layout and Structure

HTML Forms

HTML Graphics

HTML APIs

HTML Advanced Topics

HTML Editors

← Previous Next →

An HTML editor is a software application used to write and edit HTML code. It helps developers build and manage webpages by providing features like syntax highlighting, error detection, auto-complete, and live preview.

There are two types of editors:

1. Text Editors

These are plain code editors where you write raw HTML code manually.

Examples:

  • Notepad (Windows)

  • Notepad++

  • Visual Studio Code (VS Code)

  • Sublime Text

  • Atom

These are preferred by developers because they give full control over the code.

2. WYSIWYG Editors

WYSIWYG means “What You See Is What You Get”. These editors allow you to create web pages visually, like using MS Word.

Examples:

  • Adobe Dreamweaver

  • Wix Editor

  • WordPress Visual Editor

These are useful for designers who want to build without writing code, but the code they generate can be messy or inefficient.

🛠 How to Write HTML Using a Text Editor

Let’s use Notepad or VS Code as an example.

👉 Step 1: Open the Editor

  • In Notepad: Start → Search "Notepad"

  • In VS Code: Open the software from your desktop

👉 Step 2: Write Your HTML Code
<!DOCTYPE html>
<html>
<head>
  <title>My First Web Page</title>
</head>
<body>
  <h1>Welcome to My Website</h1>
  <p>This is a paragraph written in HTML.</p>
</body>
</html>
👉 Step 3: Save the File

  • Click File > Save As

  • Save it with a .html extension like: index.html

  • Choose Encoding: UTF-8

👉 Step 4: Open in a Browser

  • Locate your saved file

  • Double-click it

  • It will open in your default browser and display the content

🔍 Features of Good HTML Editors

Feature Benefit
Syntax Highlighting Color codes tags, attributes, values
Auto-completion Speeds up coding
Code Formatting Improves readability
Live Preview Instantly shows your page in a browser
Extensions/Plugins Add extra tools (e.g., Emmet, Beautify)

💡 Example: Using VS Code with Live Server

<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
  <title>Live Server Example</title>
</head>
<body>
  <h2>This page auto-updates!</h2>
</body>
</html>

To preview:

  • Install “Live Server” extension in VS Code

  • Right-click the file → "Open with Live Server"

⚠️ Common Mistakes in Editors

  • Forgetting to save the file with .html extension

  • Using Word or Excel to edit HTML (they add extra hidden code)

  • Not closing tags properly

  • Using non-UTF-8 encoding which can break symbols and characters

Practice Questions

Q1. Write a basic HTML file in Notepad that displays “Hello World”.

Q2. Use VS Code to create an HTML file with a heading and a paragraph.

Q3. Create an HTML file named index.html with a <title> and <body>.

Q4. Use Sublime Text to write HTML code with one <h1> and one <p>.

Q5. Save an HTML file with the .html extension and open it in a browser.

Q6. Create a file in Atom that includes an image using the <img> tag.

Q7. Add a comment in your HTML code describing what the page is about.

Q8. Use Notepad++ to create a webpage that links to https://www.google.com.

Q9. Set up a basic HTML structure using only a text editor (no WYSIWYG).

Q10. Open your HTML file in a browser and check if the title appears on the tab.

HTML Editors Quiz

Q1: Which of the following is a text editor?

A. Adobe Dreamweaver
B. Notepad++
C. Wix
D. Google Sites

Q2: What is the full form of WYSIWYG?

A. What You Say Is What You Got
B. What You See Is What You Get
C. When You Start, You Go
D. What You Submit Is Good

Q3: Which editor provides syntax highlighting and auto-complete?

A. Notepad
B. VS Code
C. WordPad
D. Paint

Q4: Which of these is not a code editor?

A. Atom
B. VS Code
C. Notepad
D. MS Word

Q5: Which extension should be used when saving an HTML file?

A. .txt
B. .html
C. .exe
D. .doc

Q6: What is the purpose of an HTML editor?

A. To write CSS only
B. To design databases
C. To create and edit HTML code
D. To draw images

Q7: Which of the following supports WYSIWYG editing?

A. Dreamweaver
B. Notepad
C. Atom
D. Terminal

Q8: Which editor is discontinued by GitHub?

A. Sublime Text
B. Notepad
C. Atom
D. Brackets

Q9: What does syntax highlighting do?

A. Changes file names
B. Highlights spelling errors
C. Highlights code in different colors
D. Enlarges text

Q10: Which is best suited for writing raw HTML code?

A. Notepad
B. Paint
C. Chrome
D. MS Excel
← Previous Next →
Login
Go Back Top