HTML Editors

HTML Editors

Choosing Your HTML Editor

You can write HTML using any text editor. For learning the very basics, even simple programs like Notepad (Windows) or TextEdit (Mac) will work.

However, to write HTML efficiently and professionally, you should use a dedicated code editor. Modern code editors offer features that significantly improve productivity and code quality:

• Syntax Highlighting: Makes code easier to read by coloring different parts (tags, attributes, values).
• Code Completion (IntelliSense): Suggests tags, attributes, and values as you type, reducing errors.
• Error Checking/Linting: Helps identify syntax errors or potential problems in your code.
• Integrated Terminal: Allows you to run commands (like Git or build tools) directly within the editor.
• Extensions/Plugins: Customize your editor with tools for specific languages, frameworks, or workflows.

Popular Free Code Editors:

• Visual Studio Code (VS Code): Highly popular, versatile, and extensible. Excellent choice for web development.
• Sublime Text: Fast, lightweight, and highly customizable (requires a license for continued use, but has an unlimited free trial).
• Atom: Another powerful and customizable editor developed by GitHub.
• Brackets: An editor specifically focused on web design.

We recommend starting with VS Code, but feel free to try others and see which one you prefer.

Creating Your First HTML Page (General Steps)

Regardless of the editor you choose, the basic steps are similar:

Step 1: Open Your Editor

Launch the code editor you installed (e.g., VS Code).

Step 2: Create a New File

Go to File > New File (or use the keyboard shortcut, often Ctrl+N or Cmd+N).

Step 3: Write Some HTML Code

Type or paste the following basic HTML structure into the editor:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First Web Page</title>
</head>
<body>

    <h1>My First Heading</h1>
    <p>My first paragraph.</p>

</body>
</html>

Notice how a code editor will likely color the tags, attributes, and text differently, making it much easier to read than plain Notepad.

Step 4: Save the HTML File

Go to File > Save As... (or use Ctrl+S / Cmd+S).

Choose a location on your computer to save the file.

Name the file index.html. Using .html as the file extension is the standard practice. While .htm also works, .html is preferred.

Ensure the Encoding is set to UTF-8. This is crucial for proper display of various characters and is the standard for the web. Most modern editors default to UTF-8.

Tip	The name index.html is special. Web servers usually look for a file named index.html by default when you navigate to a directory.

Step 5: View the Page in Your Browser

Open your computer’s file explorer and navigate to where you saved index.html.

Double-click the index.html file. It should open in your default web browser, displaying your heading and paragraph.

Alternatively, you can often right-click the file and choose “Open With” to select a specific browser.

Congratulations! You’ve created and viewed your first web page using a modern workflow.