Definition and Usage

An HTML editor is where you write the markup this tutorial teaches— <html>, <head>, <body>, headings, paragraphs, and links—then preview it as a real web page.

What counts as an HTML editor in this tutorial?

Anything that lets you type tags and see (or save) HTML: CodeToFun Try It in the browser, desktop tools like Visual Studio Code, Cursor, and Sublime Text, or a plain editor like Notepad. The browser only needs a .html file (or an in-page preview)—not a special “HTML program.”

How this page fits the HTML learning path

After HTML Basic, you need a place to practice. This chapter shows the quickest practice loop (Try It), then how to work locally in VS Code so you can follow every later chapter—comments, CSS in HTML, tags, and attributes—with the same habits.

Why You Need an Editor for HTML

HTML is plain text, but a good editor makes the tutorial easier:

Start with CodeToFun Try It

For this HTML tutorial, Try It is the recommended first editor. No install, no project folder—edit the sample, run it, and move on to the next concept.

1. Click Try It Yourself on any example on this site.
2. Change headings, paragraphs, or attributes in the left panel.
3. Run / preview to see how the browser paints your HTML.
4. When you are ready for files and folders, install VS Code (or Cursor) and save the same markup as index.html.

Recommended Editors for HTML

Pick one desktop editor when you want files on disk. All of these work with the same HTML this tutorial uses.

Visual Studio Code (recommended desktop)

Free editor from Microsoft. Best default for following an HTML tutorial: colorized tags, Emmet abbreviations (type ! then Tab for a full document skeleton), and extensions such as Live Server for auto-refresh preview.

• Best for: daily HTML/CSS/JS practice and multi-file pages.
• Platforms: Windows, macOS, Linux.
• Tip: File → Open Folder on your project, create index.html, then Go Live.

Cursor

Built on the VS Code foundation with AI assistance. Same HTML editing skills and many of the same extensions; useful if you want explanations while you edit markup.

Sublime Text

Fast, lightweight text editor. Excellent for editing HTML when you prefer a minimal UI. Still save .html and open in the browser the same way.

Notepad / TextEdit (zero install)

Enough to prove that HTML is plain text: create index.html, type a <!DOCTYPE html> page, save, open in the browser. Switch to VS Code when you want highlighting.

Other online playgrounds

CodePen, JSFiddle, and JSBin are fine for sharing snippets. For CodeToFun lessons, prefer Try It so examples stay tied to each tutorial page.

How to Write and Preview HTML

The same workflow whether you use Try It or VS Code.

1. Create a file named index.html (or open Try It).
2. Add <!DOCTYPE html>, <html>, <head>, and <body> as in HTML Basic.
3. Put visible content in <body>—headings, paragraphs, links.
4. Save, then open the file in a browser (or use Live Server / Try It preview).
5. Change one tag at a time and refresh—that is how this tutorial builds skill.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My first page</title>
</head>
<body>
  <h1>Hello, HTML</h1>
  <p>Saved from my editor.</p>
</body>
</html>

Copy this into VS Code or open Try It Example 1 and edit it live.

HTML Examples

Six starter patterns you will reuse throughout the HTML tutorial. Use View Output here, or Try It Yourself to edit in our online editor.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My first page</title>
</head>
<body>
  <h1>Hello, World!</h1>
  <p>I wrote this in an HTML editor.</p>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Structured page</title>
</head>
<body>
  <header><h1>Site title</h1></header>
  <main><p>Main content goes here.</p></main>
  <footer><p>&copy; 2026 My Site</p></footer>
</body>
</html>

<header>
  <h1>My Blog</h1>
  <nav><a href="/">Home</a></nav>
</header>
<main>
  <article>
    <h2>First post</h2>
    <p>Semantic tags make code easier to navigate.</p>
  </article>
</main>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>HTML + CSS</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 2rem; }
    h1 { color: #2563eb; }
    .card { padding: 1rem; border: 1px solid #e2e8f0; border-radius: 8px; }
  </style>
</head>
<body>
  <h1>Styled page</h1>
  <div class="card">
    <p>CSS can live in head or a linked file.</p>
  </div>
</body>
</html>

<!-- ===== Header ===== -->
<header><h1>Portfolio</h1></header>
<!-- ===== Projects ===== -->
<section>
  <h2>Projects</h2>
  <p>Section comments help you jump around in your editor.</p>
</section>
<!-- ===== Footer ===== -->
<footer><p>Contact: [email protected]</p></footer>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Website</title>
</head>
<body>
  <header><h1>Welcome</h1></header>
  <main>
    <h2>About this template</h2>
    <p>Save as index.html and start editing.</p>
  </main>
  <footer><p>&copy; 2026 My Website</p></footer>
</body>
</html>

Key Takeaways