HTML BasicsLesson 2 of 36

HTML Editors

An HTML editor is just the program you type your code into. It can be a bare text editor or a full app with color coding and helpful hints. The one thing every editor must do is save plain text, because an HTML file is a text file with an .html ending. Fancy formatting does not matter here.

An HTML editor is just the program you type your code into. It can be a bare text editor or a full app with color coding and helpful hints. The one thing every editor must do is save plain text, because an HTML file is a text file with an .html ending. Fancy formatting does not matter here.

Your computer already has a basic editor. Notepad on Windows and TextEdit on Mac can both write HTML, and both are free. Online editors like the one in this course run in your browser and show the result instantly, which makes them ideal while you learn. You change one word and the preview updates right away.

When you outgrow Notepad, free tools like Visual Studio Code and Notepad++ add real help. They color tags, complete closing tags for you, and show line numbers so error messages make sense. Do not spend time picking the perfect tool. Any editor you already have is good enough to start.

What to look for

A good editor for beginners needs three things. First, it must save plain text. Word processors add hidden formatting, and a file saved as a document will not run as a page. Second, look for line numbers, because error messages point to a line and you need to find it. Third, choose something with syntax highlighting, which colors tags differently from content and makes a missing bracket easy to spot.

Opening a saved file

Save your work with the .html extension, then double-click the file. It opens in your default browser, ready to view. If it opens as text instead, the extension is wrong, often because the editor hid it. On Windows, turn on file name extensions in the view menu so you can see and control what you save.

Syntax

HTML
<!DOCTYPE html>
<html>
  <head>
    <title>My page</title>
  </head>
  <body>
    <h1>Written in my editor</h1>
  </body>
</html>

Your Editor's Invisible BOM Can Break UTF-8 Pages

Notepad/VS Code saving as 'UTF-8 with BOM' prepends invisible bytes that render as  before <html> and break PHP headers/JSON APIs. Stack Overflow reports fetch() 'Unexpected token' errors traced to BOM. Solution: in VS Code set Files: Encoding = utf8 (without BOM) and enable 'Insert Final Newline'.

HTML
// VS Code settings.json
"files.encoding": "utf8", "files.insertFinalNewline": true

Good to know

  • Any plain text editor can write HTML.
  • Save files with the .html extension, not .txt or .docx.
  • Online editors show results instantly, great for practice.
  • Syntax highlighting and line numbers make mistakes easy to find.
Try it Yourself Edit the code, press Run, then check what changed in the Result.
Ready
Code
Result

Practice makes it stick

Open the Playground and build your own page with the tags you just learned.

→ Open Playground