Creating Your First Web Page | Beginner HTML Tutorial

Creating Your First HTML Page

Now that you understand some of the basic concepts behind HTML and the web, it is time to create your first HTML document and view it in a web browser.

You only need a plain-text or code editor and a web browser to complete this tutorial. You will create a simple HTML document, save it as index.html, open it in your browser, and then make a few changes to see how editing the source code changes the webpage.

Create a Website Folder

Before creating your HTML document, create a folder on your computer where you can keep the files for your first website. Keeping website files together in a dedicated folder makes them easier to organize and prepares you for working with websites that contain multiple HTML documents, stylesheets, images, and other resources.

Create a new folder somewhere that is easy to find and give it a simple name, such as:

my-first-website

For now, this folder will contain only one HTML file. As you continue learning HTML, you can add additional files and directories to it.

Open Your Code Editor

Open the plain-text or code editor you selected in the previous tutorial. Windows users can use Notepad or Notepad++, while macOS users can use TextEdit in plain-text mode or another code editor.

If you are using TextEdit on macOS, choose Format > Make Plain Text before entering your HTML. HTML source code must be saved as plain text rather than as a formatted word-processing document.

Create a new blank document. You are now ready to enter the markup for your first webpage.

Your First HTML Document

Enter the following markup into your editor. Type the example yourself rather than copying and pasting it if possible. Typing the markup will help you become familiar with HTML elements, opening and closing tags, indentation, and the basic structure of a document.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>My First Webpage</title>
  </head>
  <body>

    <h1>My First Webpage</h1>

    <p>Hello! I created my first webpage using HTML.</p>

  </body>
</html>

Notice the indentation used in the example. Elements nested inside other elements are indented to visually show the document hierarchy. Continue using the indentation practices introduced in the previous tutorial as you create your own HTML documents.

Understanding the HTML Document

Your first document contains several important pieces of markup. You will learn about each of these in much greater detail throughout the HTML tutorials, so you do not need to memorize everything yet.

<!doctype html> — tells the browser that the document uses modern HTML.
<html lang="en"> — represents the root HTML element and identifies the primary language of the document as English.
<head> — contains information about the document that is not part of the main visible page content.
<meta charset="utf-8"> — specifies UTF-8 character encoding for the document.
<title> — provides the document title used by browsers and other software.
<body> — contains the content displayed as part of the webpage.
<h1> — creates the primary heading for the page.
<p> — creates a paragraph of text.

One of the most important things to recognize at this stage is the hierarchy. The head and body elements are inside the html element, while the heading and paragraph are inside the body element. The indentation makes these relationships easier to see.

Save the HTML Document

Save the document inside the my-first-website folder you created earlier. Name the file:

index.html

The .html filename extension identifies the file as an HTML document. Make sure the file is saved as plain text and that your editor does not add another extension such as .txt.

Your website folder should now look like this:

my-first-website/
└── index.html

The name index.html is commonly used for the main page of a website. As you learned in the FTP tutorial, web servers are often configured to automatically serve an index document when a visitor requests a website or directory without specifying a filename.

View the Webpage in a Browser

Locate index.html in your website folder and open it with a web browser. You can usually double-click the file or right-click it and choose the browser you want to use.

The browser reads the HTML document and displays the content contained within the body element. You should see a heading followed by a paragraph:

My First Webpage

Hello! I created my first webpage using HTML.

You are viewing a local webpage stored on your computer. It does not need to be uploaded to a web server for you to create, edit, and test it while learning HTML.

Make Changes to Your Webpage

Now return to your code editor and change the heading or paragraph. For example, add another paragraph below the first one:

<p>I am learning how HTML structures content on a webpage.</p>

Make sure the new paragraph is placed inside the body element and aligned with the existing paragraph because both paragraphs are at the same nesting level.

<body>

  <h1>My First Webpage</h1>

  <p>Hello! I created my first webpage using HTML.</p>

  <p>I am learning how HTML structures content on a webpage.</p>

</body>

Save the document again, return to the browser, and refresh the page. The new paragraph should appear on the webpage.

This edit, save, and refresh process is one of the basic workflows you will use throughout these tutorials. As you change the HTML source code, refreshing the browser allows you to see how those changes affect the webpage.

Complete Example

The following example contains the complete HTML document you have created. You can edit the markup directly in the example and see how your changes affect the webpage.

Play in Editor

Try changing the heading, editing the paragraph text, or adding another paragraph. The Play in Editor button opens the same example in a full browser window, giving you more room to experiment with the markup.

Common Beginner Problems

If your first webpage does not work as expected, do not assume that you have done something terribly wrong. Many problems when learning HTML are caused by small mistakes that become easier to recognize with practice.

The file opens as text instead of a webpage — make sure the filename ends with .html and not .txt.
Your changes do not appear — save the file in your editor and then refresh the webpage in the browser.
The wrong version appears — make sure you are editing and viewing the same HTML file.
Part of the page looks incorrect — check your opening and closing tags and make sure elements are nested correctly.
The markup is difficult to follow — check your indentation and make sure elements at the same nesting level are aligned.

Browsers can often display a webpage even when the HTML contains mistakes, which is one reason learning to read and organize your markup carefully is important.

Summary

You have now created a complete HTML document, saved it as index.html, opened it in a web browser, edited the source code, and viewed your changes. You have also seen how indentation helps reveal the hierarchy of an HTML document.

This basic workflow provides the foundation for the rest of the HTML tutorials. From here, you will learn how to create more complete document structures and use HTML elements and attributes to organize and describe different types of webpage content.