Skip to content
html.sh

Your First HTML Page

Your First HTML Page

Section titled “Your First HTML Page”

Now that you understand what HTML is, let’s create your first complete webpage! You’ll learn the essential structure that every HTML document needs.

What you’ll learn:

  • The basic structure of an HTML document
  • DOCTYPE and document type declaration
  • The <html>, <head>, and <body> elements
  • How to create and save an HTML file
  • How to view it in a web browser

Prerequisites:

  • Completed What is HTML?
  • A text editor (Notepad, VS Code, Sublime Text, etc.)

The Basic Structure

Section titled “The Basic Structure”

Every HTML document follows a standard structure. Think of it like a sandwich:

  • Top bun: DOCTYPE declaration
  • Lettuce: <html> element (everything)
  • Cheese: <head> element (information about the page)
  • Meat: <body> element (the visible content)
  • Bottom bun: Closing tags

Here’s what a complete HTML document looks like:

Result

Let’s break down each part:

Step 1: The DOCTYPE Declaration

Section titled “Step 1: The DOCTYPE Declaration”
<!DOCTYPE html>

This tells the browser that this is an HTML5 document. It must be the very first line of every HTML file. Think of it as a label on the document.

Step 2: The <html> Element

Section titled “Step 2: The <html> Element”
<html lang="en">
  <!-- Everything else goes inside here -->
</html>

The <html> element wraps your entire document. Notice the lang="en" attribute? That tells search engines and assistive devices that the page is in English.

Step 3: The <head> Element

Section titled “Step 3: The <head> Element”
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My First Webpage</title>
</head>

The <head> element contains information about the page, not content users see. It includes:

Essential Head Elements

Section titled “Essential Head Elements”

<meta charset="UTF-8">

  • Tells the browser how to interpret characters
  • UTF-8 is the universal standard that supports all languages

<meta name="viewport" ...>

  • Makes your page look good on mobile devices
  • Without this, mobile sites look zoomed out

<title>...</title>

  • The text that appears in the browser tab
  • Also used by search engines
  • Keep it under 60 characters for best results

Step 4: The <body> Element

Section titled “Step 4: The <body> Element”
<body>
  <h1>Welcome to My Website!</h1>
  <p>This is my first HTML page.</p>
</body>

Everything inside <body> is visible on the webpage. This is where you put headings, paragraphs, images, links—all the content users see.

Create Your First File

Section titled “Create Your First File”

Let’s make this real! Follow these steps:

  1. Open a text editor — Use Notepad, VS Code, Sublime Text, or any text editor

  2. Copy this code:

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>My Awesome First Page</title>
      </head>
      <body>
        <h1>Hello, World!</h1>
        <p>I just created my first HTML page!</p>
      </body>
    </html>

  3. Save the file — Name it index.html

    • Make sure it ends with .html (not .txt)
    • Save it somewhere easy to find

  4. Open in a browser — Double-click the file to open it

    • You’ll see your webpage!

Try It Yourself

Section titled “Try It Yourself”

Edit this code to personalize your page:

Result

Experiment with:

  1. Changing the <title> text (look at the browser tab)
  2. Modifying the heading text
  3. Adding more paragraphs with different information

Common Mistakes

Section titled “Common Mistakes”

The Page Template

Section titled “The Page Template”

Here’s a template you can use for all your future pages. Just copy and modify:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Page Title Here</title>
  </head>
  <body>
    <!-- Your content goes here -->
  </body>
</html>

Summary

Section titled “Summary”
  • Every HTML document needs: <!DOCTYPE html>, <html>, <head>, and <body>
  • The <head> contains metadata like title and viewport settings
  • The <body> contains all visible content
  • Always save files with the .html extension
  • The <title> appears in browser tabs and search results

Next Steps

Section titled “Next Steps”

Text & Headings

Learn how to format text with headings, paragraphs, and emphasis. Continue →

Element Reference

Look up any HTML element you need. Browse →