Getting Started with HTML

What You Need

You don't need to install anything special to write HTML. All you need is:

A text editor â€” VS Code (recommended), Notepad, or any editor
A web browser â€” Chrome, Firefox, or Edge

Setting Up VS Code

VS Code is the most popular editor for web development. It's free and has excellent HTML support.

Download VS Code from code.visualstudio.com
Install the Live Server extension (by Ritwick Dey) â€” it auto-refreshes your browser when you save
Create a new file, save it as index.html
Type ! and press Tab â€” VS Code generates a full HTML boilerplate instantly

Your First HTML File

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First Page</title>
</head>
<body>
    <h1>Hello, World!</h1>
    <p>This is my first HTML page.</p>
    <a href="https://www.tutorialslogic.com">Visit Tutorials Logic</a>
</body>
</html>

How to Run It

Method 1 (Live Server): Right-click the file in VS Code â†’ "Open with Live Server"
Method 2 (Direct): Double-click the .html file â€” it opens in your default browser
Method 3 (Drag): Drag the file into an open browser window

Viewing Page Source & DevTools

Every browser has built-in developer tools â€” essential for learning and debugging HTML.

Browser Shortcuts

# View page source (raw HTML)
Ctrl + U  (Windows/Linux)
Cmd + U   (Mac)

# Open DevTools (inspect elements, console, network)
F12
Ctrl + Shift + I  (Windows/Linux)
Cmd + Option + I  (Mac)

# Inspect a specific element
Right-click on any element â†’ "Inspect"

HTML File Naming Rules

Use .html extension (or .htm â€” both work)
Name your homepage index.html â€” web servers serve this by default
Use lowercase letters and hyphens: about-us.html, not About Us.html
Avoid spaces and special characters in filenames