HTML Editors
You only need a simple text editor and a web browser to write HTML.
Do I Need Special Software?
No. An HTML file is just a plain text file with the .html ending. Any program that saves plain text can write it.
Professional developers use a code editor, because it colours your code, completes tags for you and shows mistakes. Beginners can start with whatever is already on the computer.
| Editor | Good for | Price |
|---|---|---|
| Notepad (Windows) | Your very first page | Free, already installed |
| TextEdit (Mac) | Your very first page | Free, already installed |
| Visual Studio Code | Everyday work, used by most developers | Free |
| Sublime Text | Fast, light editing | Free to try |
| Online editor (our Try it page) | Practice without installing anything | Free |
We recommend Visual Studio Code (VS Code). It is free, works on Windows, Mac and Linux, and is the editor we use in Workownix classes.
Step 1: Open an Editor
On Windows, press the Start button, type Notepad and open it. On a Mac, open TextEdit, then choose Format > Make Plain Text so it does not save as a Word-style document.
If you installed VS Code, open it and choose File > New File.
Step 2: Write Some HTML
Type or paste this code into the editor:
Example
<!DOCTYPE html>
<html>
<head>
<title>Ali's First Page</title>
</head>
<body>
<h1>Hello from Karachi!</h1>
<p>I made this page myself with a text editor.</p>
</body>
</html>Step 3: Save the File
Choose File > Save As and follow these rules:
- Choose a folder you can find again, for example a new folder called
websiteon your Desktop. - Name the file
index.html. The ending must be.html(or.htm). - In Notepad, set Save as type to All Files and Encoding to UTF-8.
If the file is saved as index.html.txt, the browser will show your code as plain text. Turn on "File name extensions" in Windows File Explorer to see the real ending.
index.html is a special name: web servers open it automatically as the home page of a folder.
Step 4: Open It in a Browser
Double-click the file, or right-click it and choose Open with and a browser such as Chrome or Edge. The browser reads the tags and shows only the content:
Hello from Karachi! I made this page myself with a text editor.
The words "Ali's First Page" appear in the browser tab, not on the page.
Step 5: Edit and Refresh
Go back to the editor, change the text, and save again (Ctrl + S on Windows, Cmd + S on Mac). Then press F5 or the refresh button in the browser to see the change.
Example
<h1>Hello from Karachi!</h1>
<p>I made this page myself with a text editor.</p>
<p>Tomorrow I will add a list of my favourite foods.</p>This "edit, save, refresh" loop is how every web developer works, every day.
Useful VS Code Tips
- Type
!and press Tab in an empty.htmlfile to get a full page skeleton. - Install the Live Server extension to refresh the browser automatically when you save.
- Press Alt + Shift + F (Windows) to tidy up the spacing of your code.
Exercise
Exercise
You saved your page in Notepad, but the browser shows the tags as plain text. What is the most likely problem?