Your First Page

Introduction

Welcome to your first webpage! HTML, or HyperText Markup Language, is the language used to organize content on the web. HTML tells a browser what each piece of content is, such as a heading, paragraph, image, or link.

In this lesson, you will build a small webpage from scratch. You will learn the basic structure every HTML page needs and practice writing three important parts: a title for the browser tab, a heading visitors can see, and a paragraph of text.

Do not worry about memorizing everything immediately. HTML is made from patterns. Once you understand how opening and closing tags work, you can begin creating useful pages.

What HTML Does

HTML uses elements to describe content. Most elements have an opening tag and a closing tag. Tags are written inside angle brackets.

<p>This is a paragraph.</p>

The opening tag is <p>. The closing tag is </p>, which includes a forward slash. The text between the tags is the paragraph content. Together, the tags and content make a paragraph element.

HTML documents also have a standard structure. The <html> element contains the whole page. The <head> contains information about the page, including its browser-tab title. The <body> contains the content people see on the page.

Worked Example

Here is a complete small HTML document. It includes the required document declaration, page structure, title, heading, and paragraph.

<!DOCTYPE html>
<html>
  <head>
    <title>A Beginner's Webpage</title>
  </head>
  <body>
    <h1>Welcome to My Website</h1>
    <p>I am learning how to create webpages with HTML.</p>
  </body>
</html>

<!DOCTYPE html> tells the browser to use modern HTML rules. The <title> appears in the browser tab, not in the main page. The <h1> is the main visible heading, and the <p> contains a paragraph.

Notice the indentation. Indentation does not change what the browser displays, but it makes the document easier for people to read and check. The elements are also nested: the <title> is inside <head>, while the heading and paragraph are inside <body>.

Guided Activity: Build a Personal Welcome Page

Work in a text editor or an online HTML editor. Save your file as index.html if you are using a computer. Complete each step in order.

1. Start with the document declaration and the opening and closing <html> tags.
2. Add a <head> section. Inside it, write a <title> that describes your page, such as Jordan's First Page.
3. Add a <body> section.
4. Inside the body, create one <h1> heading. Use your name or a welcoming phrase.
5. Add one <p> paragraph. Introduce yourself, describe a hobby, or explain why you are learning to code.
6. Save the file and open it in a browser, or run it in your online editor.
7. Check both locations: the heading and paragraph should appear on the page, while the title should appear in the browser tab or preview title area.

Use this starter structure if you need support:

<!DOCTYPE html>
<html>
  <head>
    <title>Write Your Page Title Here</title>
  </head>
  <body>
    <h1>Write Your Heading Here</h1>
    <p>Write your paragraph here.</p>
  </body>
</html>

Common Mistake

A frequent beginner mistake is forgetting a closing tag or putting it in the wrong place. For example, this paragraph is not closed correctly:

<p>I am learning HTML.<h1>My Interests</h1>

The browser may still display something, but the structure is unclear and later elements can behave unexpectedly. Close the paragraph before starting the heading:

<p>I am learning HTML.</p>
<h1>My Interests</h1>

Another common mistake is placing the visible heading inside <head>. Remember: page information belongs in <head>; content visitors read belongs in <body>.

When something does not look right, check the opening and closing tags first. Small punctuation marks matter in HTML.

Independent Challenge

Create a webpage called My Next Steps. Your page must include:

• A meaningful browser-tab title.
• One <h1> heading.
• One paragraph explaining what you want to learn or build with HTML.
• Correct nesting and closing tags.

After testing your page, change the heading and paragraph to make the page your own. As a final check, point to each requirement in your code and explain what it does.

Quick Review

• <html> wraps the entire document.
• <head> stores page information, including the <title>.
• <body> stores visible page content.
• <h1> creates the main heading.
• <p> creates a paragraph.
• Most HTML elements need matching opening and closing tags.

You have now created a real webpage. In the next lessons, you can add more headings, links, lists, and other content to make your site more useful and engaging.