Start HTML Setup VS Code Create First Page

What You Need

A valid HTML page needs a doctype, language, head metadata, and body content. Save it with the correct extension, inspect it in a browser, and validate the resulting document.

Getting started with HTML is simple because you do not need a complex setup. A basic text editor and a modern web browser are enough to create and preview your first web page. This makes HTML one of the easiest technologies for beginners to start learning.

A text editor such as VS Code, Notepad, or Sublime Text
A web browser such as Chrome, Firefox, or Edge
A folder where you can save your practice files neatly

Setting Up VS Code

VS Code is a beginner-friendly code editor with syntax highlighting, extensions, and a fast editing workflow. It is not required, but it makes learning HTML smoother.

Download VS Code from code.visualstudio.com
Install the Live Server extension if you want automatic browser refresh while editing
Create a new file and save it as index.html
Type ! and press Tab to generate a ready-made HTML boilerplate in VS Code

Your First HTML File

This basic example shows the core structure of an HTML document. It includes the document type declaration, the root html element, the head for metadata, and the body for visible page content. If you understand this structure, you can build almost any page step by step.

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>

Understanding the Boilerplate

The generated HTML template may look long at first, but every part of it has a clear role. Learning what each line does helps you write HTML with confidence instead of copying blindly.

<!DOCTYPE html> tells the browser to use modern HTML5 rules.
<html lang="en"> wraps the whole page and declares the primary language.
<head> stores metadata such as the title, character encoding, and linked files.
<meta charset="UTF-8"> ensures text and symbols render correctly.
<meta name="viewport"> helps the page display properly on phones and tablets.
<title> sets the text shown in the browser tab.
<body> contains the headings, paragraphs, links, images, and everything the user sees.

How to Run It

As you edit and save the file, refresh the browser to see your latest changes. If you use Live Server, that refresh can happen automatically.

Method 1 (Live Server): Right-click the file in VS Code and choose "Open with Live Server"
Method 2 (Direct): Double-click the .html file to open it in your default browser
Method 3 (Drag): Drag the file into an already open browser window

Viewing Page Source & DevTools

Browsers include developer tools that help you inspect HTML, test small changes, and understand how pages are built. These tools are extremely helpful when you are learning.

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 and choose "Inspect"

Recommended Project Structure

Even a beginner project feels easier to manage when the files are organized. Keeping HTML, CSS, JavaScript, and images in separate folders makes your project cleaner and easier to expand later.

Example Folder Structure

my-first-website/
|-- index.html
|-- about.html
|-- css/
|   `-- style.css
|-- js/
|   `-- script.js
`-- images/
    `-- logo.png

HTML File Naming Rules

Use the .html extension for web pages
Name your homepage index.html because many servers load it by default
Use lowercase letters and hyphens, such as about-us.html
Avoid spaces and special characters in filenames

Beginner Workflow Tips

Build one small page first instead of trying to create a full website at once.
Save often and preview your file frequently in the browser.
Keep indentation neat so parent and child elements are easy to read.
Test your page on both desktop and mobile-sized screens when possible.
Use comments and meaningful filenames when your project grows.