← Back to all tutorials
HTML Tutorial for BeginnersEpisode 4

Your First Web Page

Create your very first HTML web page from scratch and open it in a browser.

Your First Web Page

Let's create your very first HTML page! Follow these steps exactly and you'll have a working web page in minutes.

Step 1: Create a File

  1. Open your text editor (we recommend Visual Studio Code)
  2. Create a new file
  3. Save it as index.html (the name "index" is the convention for the main page)

Step 2: Write the HTML

Type the following code into your file:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First Web Page</title>
</head>
<body>
    <h1>Hello, World!</h1>
    <p>This is my very first web page. I built it with HTML!</p>
</body>
</html>

Step 3: Open in a Browser

  1. Save the file
  2. Find the file in your file explorer
  3. Double-click the index.html file
  4. It will open in your default browser!

Understanding Each Line

CodePurpose
<!DOCTYPE html>Tells the browser this is an HTML5 document
<html lang="en">Root element; lang="en" specifies English
<head>Contains metadata (not visible on the page)
<meta charset="UTF-8">Sets character encoding for special characters
<meta name="viewport" ...>Makes the page responsive on mobile devices
<title>Sets the text shown in the browser tab
<body>Contains all visible content
<h1>A top-level heading
<p>A paragraph of text

The HTML Boilerplate

The code above is called the HTML boilerplate — a standard template that every HTML page should start with. In VS Code, you can type ! and press Tab to auto-generate this boilerplate.

Key Takeaways

  • Every HTML page starts with <!DOCTYPE html>
  • The <html> element wraps everything
  • <head> contains metadata; <body> contains visible content
  • Save files with the .html extension
  • Double-click the file to open it in a browser