HTML Tutorial - Introduction to HTML

Introduction to HTML

Welcome to your first step into web development! If you have ever browsed the internet, you have interacted with HTML. Let’s break down what it is, why we use it, and how it works, keeping things simple and practical.

What is HTML?

HTML stands for HyperText Markup Language.

• HyperText: Means text that contains links (hyperlinks) allowing users to jump between different pages or sections effortlessly.
• Markup Language: Means you use special symbols or "tags" to annotate your text, telling a web browser how to display it (e.g., what is a heading, what is a paragraph, what is an image).

Think of HTML as the skeleton or the structural foundation of a house. Without a skeleton, you cannot add walls, paint, or furniture (which represent CSS and JavaScript later on).

How Does HTML Work?

HTML uses a system of tags enclosed in angle brackets (< and >). Most tags come in pairs: an opening tag and a closing tag.

<tagname>Content goes here...</tagname>

• Opening Tag: Tells the browser where the element begins (e.g., <p>).
• Closing Tag: Features a forward slash (/) and tells the browser where the element ends (e.g., </p>).

Anatomy of a Basic HTML Document

Every HTML page follows a standard, minimal boilerplate structure. Here is what a basic template looks like:

HTML

<!DOCTYPE html>
<html>
  <head>
    <title>My First Web Page</title>
  </head>
  <body>
    <h1>Hello, World!</h1>
    <p>This is a paragraph explaining HTML basics.</p>
  </body>
</html>

Breakdown of the Boilerplate:

1. <!DOCTYPE html>: Tells the browser this document is written in HTML5 (the modern standard).
2. <html>: The root element that wraps all the content on the page.
3. <head>: Contains metadata, page configurations, and the title that appears in the browser tab.
4. <body>: Contains all the visible content—headings, paragraphs, images, buttons—that users actually see on the screen.

Practice Questions and Answers

Test your understanding of the concepts covered in this lesson with the practice exercises below.

Part 1: One-Word / Short Answers

1\. What does the acronym HTML stand for?

• Answer: HyperText Markup Language

2\. Which HTML tag defines the root of an HTML document?

• Answer: <html>

3\. What symbol is used inside a closing tag to indicate the end of an element?

• Answer: Forward slash (/)

4\. Which section of an HTML document holds the visible content displayed to users?

• Answer: <body>

Part 2: Descriptive Questions

1. Explain the role of HTML in web development using an analogy.

• Answer: In web development, HTML acts as the skeleton or blueprint of a web page. Just like a building needs a structural framework of steel and concrete before you can paint walls or install lighting, a website needs HTML to establish its basic structure (headings, paragraphs, images) before styling (CSS) and interactivity (JavaScript) can be applied.

2. What is the difference between an opening tag and a closing tag? Provide an example.

• Answer: An opening tag marks the beginning of an HTML element and uses angle brackets (e.g., <h1>), while a closing tag marks the end of that element and includes a forward slash right after the opening bracket (e.g., </h1>). Together, they wrap around content to tell the browser how to render it.