Introduction to Hypertext Markup Language (HTML)

Introduction

Every website you have ever visited — from a simple school page to a complex social media platform — was built using the same foundational language: HTML, or Hypertext Markup Language. It is the skeleton of the web, the invisible structure that tells your browser how to display text, images, links, and everything else you see on a page.

In this WebQuest, you will step into the role of a junior web developer. You will explore what HTML is, where it came from, and how its building blocks — called tags and elements — work together to bring a webpage to life. By the end, you will have the knowledge to read and write basic HTML code on your own.

You can watch this video on youtube for further information: 

https://youtu.be/it1rTvBcfRg?si=N9wRPCqVcp-PryFb

Task

Your mission is to build a simple, well-structured webpage about a topic of your choice using basic HTML. To do this successfully, you must first understand what HTML is, how it works, and what its essential tags and elements do.

Watch this youtube video for the HTML course video

https://youtu.be/HD13eq_Pmp8?si=wzD1TIGHGHzkWfIj

By the end of this WebQuest, you will be able to:

  • Define HTML and explain its role in web development
  • Identify and use common HTML tags correctly
  • Understand the basic structure of an HTML document

Create a simple, functional webpage from scratch

Process

Follow these steps to complete the WebQuest:

Step 1 — Explore the Origins of HTML

  • Research when and why HTML was created. Who invented it? What problem was it designed to solve? Write a short paragraph summarizing what you learned.

Step 2 — Learn the Basic Structure

  • Study the essential skeleton of every HTML document. Understand what each of these tags does and why they are required: <!DOCTYPE html>, <html>, <head>, <title>, and <body>.

Step 3 — Discover Common Tags

  • Investigate the following tags and write a one-sentence description of each:
  • Headings: <h1> through <h6>
  • Paragraph: <p>
  • Link: <a>
  • Image: <img>
  • Lists: <ul>, <ol>, <li>
  • Line break: <br>
  • Bold and Italic: <strong>, <em>

Step 4 — Analyze a Real Webpage

  • Right-click on any webpage and select View Page Source or Inspect. Look for at least five HTML tags you have already learned. Write them down and describe what they are doing on that page.

Step 5 — Build Your Webpage

  • Using a text editor (Notepad, VS Code, or any plain text tool), create an HTML file about a topic you enjoy — a hobby, a sport, a favorite book, anything. Your page must include:
  • A proper HTML document structure
  • At least one heading
  • At least two paragraphs
  • One image
  • One hyperlink
  • One list (ordered or unordered)

Step 6 — Submit Your HTML File

Evaluation
Criteria Excellent (4) Proficient (3) Developing (2) Beginning (1)
HTML Structure All required tags present and correctly nested Most tags correct with minor errors Some tags missing or improperly used Structure is incomplete or absent
Use of Tags All 6 required elements used correctly 4–5 elements used correctly 2–3 elements used correctly 1 or no elements used
Content Quality Clear, organized, and relevant content Mostly clear with minor gaps Some relevant content but disorganized Little to no meaningful content
Research Summary Thorough, accurate, and well-written Mostly accurate with some detail Brief but shows some understanding

Missing or inaccurate		 Missing or inaccurate
Creativity & Effort Page shows clear effort and personal touch Some effort evident Minimal effort

No evidence of effort

 

Conclusion

HTML is more than just a coding language — it is the very foundation of the internet as we know it. Every link you click, every image you see, every headline you read on a webpage exists because someone wrote HTML to put it there.

By completing this WebQuest, you have taken your first real step into the world of web development. The skills you practiced here — reading code, understanding structure, and building your own page — are the same skills used by professional web developers around the world.

The web was built by people who were once beginners, just like you. What will you build next?

Credits

Use the following resources to guide your research and learning:

Teacher Page

Overview

This WebQuest is designed to introduce students to the fundamentals of HTML through guided inquiry and hands-on application. Rather than relying solely on lecture, students take an active role in exploring, analyzing, and creating — making learning more meaningful and memorable.

 

Subject Area: Information and Communications Technology (ICT)

Grade Level: Grade 7 – 10

Estimated Duration:2 – 3 class sessions (45–60 minutes each)

Mode: Individual or Paired Work

Deliverables: Research summary, tag reference sheet, and a functioning HTML webpage

 

Learning Objectives

By the end of this WebQuest, students will be able to:

 

- Define HTML and describe its role in the structure of webpages

- Identify and correctly use at least eight common HTML tags

- Construct a properly structured HTML document from scratch

- Analyze the source code of a real webpage and recognize familiar elements

- Appreciate HTML as the foundational language of the World Wide Web

 

 

Alignment to Standards

This WebQuest supports the following competencies:

 

K–12 ICT Curriculum (DepEd)

- Demonstrate understanding of web design concepts and principles

- Apply HTML in creating simple, functional webpages

- Use technology tools responsibly and creatively

 

21st Century Skills Addressed

- Critical Thinking — analyzing webpage source code

- Creativity — designing and building a personal webpage

- Communication — writing clear research summaries

- Digital Literacy — navigating online resources and tools responsibly

 

 

Preparation Checklist

Before the first session, ensure the following are ready:

 

- [ ] Computer laboratory or devices with internet access for all students

- [ ] A text editor available on each device (Notepad, VS Code, or access to CodePen online)

- [ ] Printed or digital copies of the WebQuest distributed to students

- [ ] Teacher demo file — a sample HTML page to show during introduction

- [ ] Scoring rubric shared with students before they begin

- [ ] Backup offline resources in case of internet disruptions (downloadable HTML reference sheet recommended)

 

Differentiation Tips

- For struggling learners: Provide a partially completed HTML template so they can focus on learning the tags rather than the overall structure. Pair them with a stronger peer during Step 5.

- For advanced learners: Challenge them to add CSS styling to their webpage, or to create multiple linked pages. Encourage them to explore additional tags beyond those listed.

- For students without device access at home: Encourage use of CodePen or similar browser-based tools during school hours. The entire WebQuest can be completed within class time.

 

Common Misconceptions to Address

 

- Students often confuse HTML with programming. Clarify early that HTML is a *markup language*, not a programming language — it describes structure, not logic.

- Some students may think tags need the internet to work. Demonstrate that an HTML file saved locally can be opened in any browser without a connection.

- Students may forget to close tags. Emphasize the opening/closing tag pair concept early and reinforce it throughout.

 

Assessment Guide

The WebQuest uses a 4-point rubric across five criteria for a total of 20 points.

 

Suggested Grade Conversion

 

| Score | Grade Equivalent |

| 18 – 20 | Outstanding (95–100%) |

| 14 – 17 | Very Satisfactory (85–94%) |

| 10 – 13 | Satisfactory (75–84%) |

| 6 – 9 | Fairly Satisfactory (60–74%) |

| 5 and below | Did Not Meet Expectations |