Your First HTML Page

🌐 HTML5 🟢 Chapter 2 of 37 📂 Phase 01: HTML Introduction 📅 2026 Edition

📌 Covered in this chapter: Creating .html File · <!DOCTYPE html> · <html> · <head> · <body> · <title> · <meta charset> · Live Server Setup · Comments & Indentation · W3C Markup Validation

Welcome to Phase 1 (Chapter 2): Your First HTML Page! In this hands-on lesson, we construct a complete, valid HTML5 page from scratch. We break down every line of the standard HTML5 document boilerplate, explore file naming conventions, set up local development tools (VS Code & Live Server), write clean comments and indentation, and validate code against W3C standards.

1Creating an .html File & File Naming Rules

To create an HTML document, create a plain text file ending with the .html extension (for example, index.html). Observe these production file naming conventions:

Use lowercase letters only: Use about.html instead of About.html (Linux web servers are case-sensitive).
Avoid spaces: Use hyphens instead of spaces (e.g., contact-us.html instead of contact us.html).
Default Home Page: Web servers automatically serve index.html as the home page when navigating to a directory root (e.g., example.com/).

2Line-by-Line Standard HTML5 Boilerplate Breakdown

HTML — Production HTML5 Boilerplate ▶ Run in HTML 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 HTML5 Webpage</title>
</head>
<body>

  <!-- Main Page Content Begins Here -->
  <h1>Welcome to My First Webpage</h1>
  <p>This document is built using standard HTML5 markup.</p>

</body>
</html>

Tag / Line	Technical Purpose
`<!DOCTYPE html>`	Informs browser to render document using standard HTML5 mode (prevents legacy Quirks Mode).
`<html lang="en">`	Root element enclosing all page markup. `lang="en"` tells screen readers & translation engines the primary language.
`<head>`	Container for machine-readable document metadata (title, character encoding, CSS links, scripts) not rendered on screen.
`<meta charset="UTF-8">`	Sets character set encoding to UTF-8, covering all global Unicode characters and symbols.
`<meta name="viewport">`	Configures mobile viewport width and initial zoom scaling for responsive mobile screens.
`<title>`	Defines document title displayed in the browser tab and search engine results.
`<body>`	Container for all visible content rendered inside the browser window (headings, text, images, forms).

3Opening Files in Browser & Live Server Setup

To view your HTML page locally:

Direct File Opening: Double-click your index.html file to open it in your web browser (address bar will display file:///C:/.../index.html).
Live Server Extension (Recommended): In VS Code, install the Live Server extension and click "Go Live". Live Server launches a local web server (e.g. http://127.0.0.1:5500/index.html) that automatically refreshes your browser instantly whenever you save changes.

4HTML Comments, Indentation & W3C Validation

Comments: Use  to insert notes in your code. Comments are ignored by browsers and not rendered on screen.

Indentation: Indent child elements by 2 spaces inside parent elements to maintain clean code readability.

W3C Validation: Test your HTML code at the official W3C Markup Validation Service to ensure zero syntax errors or unclosed tags.

❓ Frequently Asked Questions (FAQ)

Q1: What happens if I omit <!DOCTYPE html> from line 1?

Browsers enter "Quirks Mode", emulating bugs from 1990s legacy browsers (IE6). CSS box model calculations and layout alignment will break unexpectedly.

Q2: Are HTML tag names case-sensitive?

No, HTML tags are case-insensitive (e.g. <BODY> works), but W3C standards and professional industry conventions mandate lowercase tag names.

Written by Our Compiler Technical Editorial Team
Reviewed for accuracy & tested on HTML5 Standards · Last updated August 2026