HTML: Viewing, Editing & Tools

Viewing HTML files

HTML files are just text files with a .html extension. Open them directly in any browser — no server required:

open index.html       # macOS
start index.html      # Windows (or double-click in File Explorer)
xdg-open index.html   # Linux

The browser renders the HTML and displays the page. For advanced features (PHP, server-side includes, routing), you need a web server.

Editors

You can write HTML in any text editor, but some make it much easier:

VS Code — install HTML CSS Support + Live Preview extensions. Live Preview shows updates as you type.
WebStorm — JetBrains IDE with excellent HTML/CSS/JS support (paid).
Sublime Text — lightweight, fast, with great syntax highlighting.
Notepad++ — free, simple, Windows-only.

Browser DevTools

Your browser's Developer Tools are the best way to inspect and debug HTML:

Press F12 (or right-click anywhere and select Inspect)
Elements tab: see the HTML tree, modify attributes and content live
Styles panel: see and edit CSS rules applied to any element
Console: see JavaScript errors, run commands

HTML validation

Always validate your HTML to catch errors:

W3C Markup Validation Service — official validator
VS Code extensions like HTMLHint can validate as you type

Common file naming conventions

Convention	Example	Notes
`index.html`	`index.html`	Default file served by web servers (always name your homepage this)
`about.html`	`about.html`	About page
`style.css`	External stylesheet
`script.js`	External JavaScript

Putting it all together

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Semantic Page</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header>
    <h1>My Website</h1>
    <nav><a href="/">Home</a> | <a href="/about">About</a></nav>
  </header>
  <main>
    <article>
      <h2>Article Title</h2>
      <p>Article content here.</p>
    </article>
    <aside>Related links</aside>
  </main>
  <footer>&copy; 2026 My Website</footer>
</body>
</html>

Quick check below!