Your First HTML Page

Introduction

Now you will create a real index.html file and open it in the browser. This chapter introduces the minimum HTML document structure: <!doctype html>, <html>, <head>, and <body>. You will also inspect the result with DevTools so the page is not just text on disk, but a document the browser understands.

Prerequisites

  • Browser and editor ready from HTML development environment
  • A project folder such as html-learning/
  • Live Server or another local preview method

Create the Project Folder

Create a folder named:

text
html-learning/

Inside it, create:

text
index.html

Most static sites use index.html as the default home page. If a server receives a request for a folder, it often looks for index.html automatically.

Write the Minimal Document

Add this code to index.html:

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 HTML Page</title>
  </head>
  <body>
    <h1>Hello, HTML</h1>
    <p>This is my first web page.</p>
  </body>
</html>

Save the file and open it with Live Server. You should see:

  • a large heading: “Hello, HTML”
  • a paragraph below it
  • the browser tab title: “My First HTML Page”

Understand Each Part

<!doctype html>

This tells the browser to use modern HTML parsing rules.

html
<!doctype html>

Without it, browsers may enter “quirks mode,” which imitates old browser behavior. Always include it at the top.

<html lang="en">

This is the root element of the document:

html
<html lang="en">

The lang attribute declares the page language. It helps screen readers, translation tools, and search engines.

For Chinese content, you might use:

html
<html lang="zh-CN">

The head contains metadata: information about the page, not the visible main content.

html
<head>
  <meta charset="UTF-8">
  <title>My First HTML Page</title>
</head>

Common head content:

  • character encoding
  • page title
  • viewport settings
  • SEO description
  • CSS links
  • JavaScript links
  • favicon links

<meta charset="UTF-8">

This sets the character encoding:

html
<meta charset="UTF-8">

UTF-8 supports English, Chinese, emoji, and most modern text. Put it near the top of <head>.

Viewport Meta Tag

This line matters on phones:

html
<meta name="viewport" content="width=device-width, initial-scale=1.0">

It tells the browser to match the page width to the device width. Without it, mobile browsers may render the page as a tiny desktop layout.

<title>

The title appears in the browser tab and search results:

html
<title>My First HTML Page</title>

Write a short, meaningful title. Do not confuse it with <h1>, which appears inside the page content.

<body>

The body contains visible content:

html
<body>
  <h1>Hello, HTML</h1>
  <p>This is my first web page.</p>
</body>

Most elements you learn—headings, paragraphs, links, images, lists, tables, and forms—will go inside <body>.

Update the body:

Refresh the browser. You now have:

  • a heading hierarchy
  • a paragraph
  • an unordered list
  • an external link

Inspect the Page in DevTools

Open DevTools and choose the Elements panel.

Look for:

text
html
├── head
└── body
    ├── h1
    ├── p
    ├── h2
    ├── ul
    └── p

Click the <h1> element in DevTools. You can temporarily edit text there. This changes the DOM in the browser, not your saved file.

Tip

Source vs DOM

Your index.html is the source. DevTools shows the DOM after the browser parses it. Save changes in your editor, not only in DevTools.

Common Beginner Mistakes

Missing closing tags

Bad:

html
<p>This paragraph never closes
<p>This creates confusing structure

Better:

html
<p>This paragraph closes correctly.</p>
<p>This is a separate paragraph.</p>

Putting visible content in <head>

Bad:

html
<head>
  <h1>Hello</h1>
</head>

Better:

html
<body>
  <h1>Hello</h1>
</body>

Using the wrong file extension

Use:

text
index.html

Avoid:

text
index.txt
index.html.txt

If your file opens as plain text, check the extension.

Mini Exercise

Create a small profile page:

  1. Change the <title> to your name.
  2. Change <h1> to “About Me.”
  3. Add one paragraph about what you want to learn.
  4. Add a list of three web skills.
  5. Add one link to a documentation site you like.

Example body:

html
<body>
  <h1>About Me</h1>
  <p>I am learning HTML so I can build clear web pages.</p>
 
  <h2>Skills I want to learn</h2>
  <ol>
    <li>Semantic HTML</li>
    <li>CSS layout</li>
    <li>JavaScript interactions</li>
  </ol>
</body>

FAQ

Do I need every line in the template?

For modern pages, yes: keep doctype, html, head, meta charset, viewport, title, and body. They prevent common rendering and mobile issues.

Can I use uppercase tags?

HTML is forgiving, but lowercase is the modern convention. Use <body>, not <BODY>.

Why does my title not appear on the page?

<title> appears in the browser tab and search result snippets. Use <h1> for the visible page title.

Can I put CSS in the same file?

You can, but later chapters will recommend external CSS files for cleaner structure. This HTML track stays focused on markup first.

What comes next?

HTML syntax basics — tags, elements, attributes, nesting, empty elements, and comments.