Chapter 4

Introduction to HTML

Learning the foundational language of the web

Introduction

HTML, or HyperText Markup Language, is the standard language used to create and structure webpages. It is not a programming language — it is a markup language that tells the browser how to display text, images, and other content.

Every webpage you visit uses HTML. When you see a heading, a paragraph, a list, or an image, HTML is responsible for defining that Element's structure and meaning.

In this chapter, you will learn what HTML is, how it works, and why it is the backbone of every website.

How It Works

HTML uses Tag (like <h1>, <p>, <img>) to mark up plain text so the browser knows what role each piece of content plays. An <h1> Tag tells the browser "this is a top-level heading," while a <p> Tag says "this is a paragraph." The browser reads these Tag and formats the content accordingly.

Everyday Object Analogy

Think of HTML as the skeleton of a house. Just as a blueprint marks where walls, doors, and windows go, HTML marks headings, paragraphs, images, and links. Without HTML, a webpage would be like a pile of building materials with no structure or organization.

The Structure of HTML

Elements

An Element includes the opening Tag, content, and closing Tag. For example: <h1>Hello</h1> is a heading Element.

Attributes

Tag can have Attribute that provide extra info, like <img src="photo.jpg" alt="Photo"> where src and alt are Attribute.

The Basic HTML Document

Every HTML document follows a standard structure. It starts with <!DOCTYPE HTML>, followed by an <HTML> root Element containing <head> (metadata) and <body> (visible content). This structure tells the browser it is reading an HTML5 document.

<head> Section

Contains metadata: the page title, character encoding, stylesheet links, and information for search engines and social media.

<body> Section

Contains everything visible to users: headings, paragraphs, images, links, lists, tables, forms, and interactive Element.

Deeper Dive

HTML is maintained by the World Wide Web Consortium (W3C). The current standard is HTML5, which introduced semantic Element like <header>, <nav>, <main>, <article>, and <footer>. These Tag describe the meaning of content, helping both browsers and developers understand the page structure.

Key Insight

HTML is not case-sensitive, but the convention is to write all Tag in lowercase. Semantic HTML improves accessibility for screen readers and boosts search engine rankings because bots can better understand the page content.

Advanced

HTML5 introduced APIs for audio/video playback (<audio>, <video>), vector graphics (<svg>), and interactive 2D/3D graphics (<canvas>). It also supports local storage, geolocation, drag-and-drop, and web workers for background script execution. Modern HTML works closely with the WAI-ARIA standard to make web applications accessible to people with disabilities.

HTML documents can be validated using the W3C Markup Validation Service to ensure they follow web standards. Valid HTML is more likely to render consistently across different browsers and devices.

Vocabulary Table

Term	Definition
HTML	HyperText Markup Language — the standard language used to structure content on the web.
Tag	A keyword enclosed in angle brackets that defines how content should be structured, e.g. `<h1>` or `<p>`.
Element	A complete HTML structure consisting of an opening tag, content, and closing tag.
Attribute	Additional information added to an opening tag, such as `src`, `href`, or `class`.
DOCTYPE	A declaration at the top of an HTML document that tells the browser which HTML version is used.
<head>	The section of an HTML document containing metadata such as title, links, and scripts.
<body>	The section of an HTML document that contains all visible content displayed to the user.
Semantic HTML	Using meaningful tags like `<header>` and `<article>` to describe content rather than just style it.
W3C	World Wide Web Consortium — the organization that develops and maintains web standards.
HTML5	The latest major version of HTML, adding multimedia, semantic, and interactive capabilities.

Fun Facts

The first version of HTML had only 18 Tag. HTML5 now has over 100 Tag for different purposes.

Tim Berners-Lee wrote the first HTML document in 1991 while working at CERN, and it was shared with fellow researchers.

The <blink> Tag, once popular in the 90s, was removed from HTML standards because it made text flash annoyingly.

The <marquee> Tag also existed in early HTML. It made text scroll across the screen automatically.

You can view the HTML source of any webpage by right-clicking and selecting "View Page Source" or pressing Ctrl+U.

Interactive Diagram

Launch the interactive diagram to see this in action.

Open Interactive Diagram

The interactive diagram for this chapter demonstrates Introduction to HTML. It shows HTML code on one side and its visual output on the other, showing tags creating elements.

What to explore:

click different tags in the code; watch the corresponding element highlight on the page; edit code and see changes live
HTML uses tags to structure content — each tag tells the browser what type of element to display

Chapter Navigation

← Previous: Chapter 3 ← Back to Module Overview Next: Chapter 5 — HTML Elements and Tags