What HTML Does

Introduction

Every webpage you visit is built from code. Three technologies are commonly involved: HTML provides structure, CSS controls appearance, and JavaScript adds interaction. In this lesson, we will focus on HTML, the language used to organize the content of a webpage.

HTML stands for HyperText Markup Language. It is not a programming language in the usual sense because it does not make decisions or repeat instructions. Instead, HTML uses elements to tell a web browser what each piece of content is, such as a heading, paragraph, list, or button.

Think of a webpage as a house. HTML is the structure: the walls, rooms, doors, and floors. CSS is the decoration, and JavaScript is the behavior, such as lights that turn on when someone enters.

What HTML Does

HTML gives content meaning and structure. A browser reads HTML and displays the result for the visitor. For example, HTML can identify a main heading, a paragraph of information, and a list of steps.

Most HTML elements have an opening tag and a closing tag. Tags are written inside angle brackets. The closing tag includes a forward slash.

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

Here, <p> is the opening tag, the sentence is the content, and </p> is the closing tag. Together, they form a paragraph element.

Some elements also include attributes. Attributes provide extra information inside the opening tag. For example, an image element can have an attribute describing the image, although we will explore images in a later lesson.

The Basic Parts of a Webpage

Document type

A webpage usually begins with a declaration telling the browser that the file uses modern HTML. It looks like this:

<!DOCTYPE html>

This is not an ordinary HTML element. It is an instruction for the browser.

The html element

The <html> element wraps the entire webpage. It tells the browser where the HTML document starts and ends.

The head element

The <head> element contains information about the page that is not normally shown as the main page content. It can include the page title and other settings.

The title element

The <title> element sets the name shown on the browser tab. It is different from the main heading displayed inside the page.

The body element

The <body> element contains the visible page content, such as headings, paragraphs, lists, and links.

Worked Example

Here is a small HTML page. It is not a complete project yet, but it shows the basic structure clearly.

<!DOCTYPE html>
<html>
  <head>
    <title>My First Page</title>
  </head>
  <body>
    <h1>Welcome to My Website</h1>
    <p>I am learning how HTML structures a webpage.</p>
    <h2>What I Like</h2>
    <ul>
      <li>Music</li>
      <li>Games</li>
      <li>Reading</li>
    </ul>
  </body>
</html>

The <h1> element is the main heading. The <p> element contains a paragraph. The <h2> element introduces a second-level heading, and the <ul> element creates an unordered list. Each <li> element represents one list item.

Notice how some elements are placed inside other elements. This is called nesting. The list items are nested inside the unordered list, and the visible content is nested inside the body.

Guided Activity: Build a Profile Page

Work with your teacher or partner to create a simple profile page. Start with the basic structure below and replace the placeholder text.

1. Open your HTML editor and create a new file named index.html.
2. Type the document structure from the example.
3. Change the title to a name for your page, such as Jordan's Profile.
4. Replace the main heading with your name or a fictional character's name.
5. Write one paragraph introducing the person.
6. Add an <h2> heading called Interests.
7. Create an unordered list with at least three interests.
8. Save the file and open it in a browser. Compare the browser view with your code.

As you work, ask yourself: Which parts of the code are visible on the page? Which part appears only on the browser tab? Where can you find the page's main heading?

Common Mistake

A frequent beginner mistake is forgetting to close an element or placing closing tags in the wrong order. For example:

<p><strong>Important message</p></strong>

The tags overlap incorrectly. When elements are nested, close the most recently opened element first:

<p><strong>Important message</strong></p>

Another common mistake is confusing the <title> with the <h1>. The title appears in the browser tab, while the h1 usually appears as the main heading in the page.

Independent Challenge

Create a short “About Me” page without copying the exact text from the worked example. Your page must include:

• A document type declaration.
• An html element containing head and body sections.
• A meaningful browser tab title.
• One main heading.
• Two paragraphs.
• One second-level heading.
• An unordered list with at least three items.

Before finishing, check that every opening tag has the correct closing tag, your elements are nested in the right order, and your page displays as expected in the browser.

Key Takeaway

HTML describes what content is and how it is organized. It provides the structure that browsers use to display a webpage.

Once you can recognize the document structure and common elements, you are ready to add more types of content and begin building a complete website.