HTML Editors
In this page:
Plain Text vs. Code Editors
While simple tools like Notepad or TextEdit can write HTML, dedicated code editors provide syntax highlighting, auto-completion, and error detection. Features like bracket matching and linting catch typos before you ever reload the page.
Note: Download a free, popular editor like VS Code or Sublime Text to make coding much easier.
Warning: Do not use word processors like Microsoft Word to write code because they inject hidden formatting characters that break HTML.
Example: Plain Text vs. Code Editors
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
</head>
<body>
<p>Hello world</p>
</body>
</html>Saving Your HTML Files
The browser will not recognize your file as a webpage unless you save it with the correct extension. This extension tells the computer to open the file in a browser. Most editors default to .txt, so you must explicitly choose .html when saving.
Note: Always save your primary homepage file with the name index.html.
Warning: Make sure your editor does not secretly append a .txt extension to the end of your filename.
Example: Saving Your HTML Files
<!-- Save this file as: index.html -->
<!DOCTYPE html>
<html>
<body>
<p>This file must be saved with a .html extension, not .txt</p>
</body>
</html>Viewing Your Files in a Browser
To see how your code looks, you can open your saved HTML file directly in any browser. You can also use code editor extensions for live, real-time previews. Refreshing the browser tab after each save is the fastest feedback loop for beginners.
Note: Double-click your saved HTML file to quickly launch it in your default web browser.
Warning: Local file previews run directly from your hard drive, which behaves slightly differently than a live website hosted online.
Example: Viewing Your Files in a Browser
<!DOCTYPE html>
<html>
<body>
<p>Open this file in your browser to see it rendered.</p>
</body>
</html>Using Browser Developer Tools
Every modern browser includes built-in developer tools, opened with F12 or right-click > Inspect, that let you view the live HTML structure of a page, test small changes instantly, and see errors without editing the saved file at all.
Example: Using Browser Developer Tools
<!DOCTYPE html>
<html>
<body>
<p>Right-click this text and choose "Inspect" to open developer tools.</p>
</body>
</html>Choosing a Code Editor
Popular free code editors like VS Code, Sublime Text, and online editors like CodePen or JSFiddle each offer syntax highlighting and live preview, so the right choice usually comes down to whether you want a full desktop application or a zero-install browser tool.
Example: Choosing a Code Editor
<!--
Desktop editors: VS Code, Sublime Text
Online editors: CodePen, JSFiddle
-->
<!DOCTYPE html>
<html>
<body>
<p>The same HTML works in any of these editors.</p>
</body>
</html>- Writing code in Microsoft Word and expecting it to run correctly.
- Saving your webpage file as a text document instead of index.html.
- Forgetting to refresh your web browser to view your newly saved edits.
- You can write HTML in basic text programs or advanced code editors.
- Always save your primary homepage file with the name index.html.
- Use live previews to check your layout shifts as you write your code.
The output from standard text files is supported identically across all modern browsers.
Chapter Quiz — Complete all 11 topics to unlock
0/11 topics done
Complete these topics first: