What is HTML?

Objective

By the end of this lesson, you will:

Understand what HTML is and why it’s the foundation of the web.
Identify the core elements and structure of an HTML document.
Write a basic HTML page using common tags like <html>, <head>, <body>, <h1>, <p>, and <a>.
Apply this knowledge by creating your first simple webpage within 24 hours.

Definition

HTML (HyperText Markup Language): The standard language used to structure and display content on the web. It tells the browser how to organize text, images, links, and other elements on a webpage.
Element: A single unit in HTML, defined by a start tag, content, and an end tag.
Tag: Keywords enclosed in angle brackets (< >) that define the type of content.

Introduction

Everything you see on a website—from headlines and paragraphs to links and images—is built on HTML. It’s not a programming language, but a markup language, which means it structures and labels content.

Even complex websites rely on HTML at their core. Whether you’re building a portfolio, a business landing page, or the next big app, HTML is your starting point.

This lesson introduces you to the essential building blocks of HTML, helping you confidently create and edit simple web pages.

Why HTML is Crucial for Beginners

It’s the foundation of every website.
It helps you understand how content is structured online.
Learning HTML unlocks easier paths into CSS, JavaScript, and web design.
It empowers you to prototype ideas and launch projects faster.

Core HTML Concepts

1. HTML Document Structure – The Big Picture

Every HTML file starts with the same basic skeleton:

<!DOCTYPE html>
<html>
  <head>
    <title>My First Webpage</title>
  </head>
  <body>
    <h1>Hello, World!</h1>
    <p>This is my first HTML page.</p>
  </body>
</html>

Breakdown:

<!DOCTYPE html>: Tells the browser this is an HTML5 document.
<html>: Wraps the entire page.
<head>: Contains meta-information (not visible content).
<body>: Contains what you see on the page.

2. Text Elements – Structure & Emphasis

Headings: <h1> to <h6> define importance. Use only one <h1> per page.
Paragraphs: <p> tags organize body text.
Emphasis: Use <strong> for bold, <em> for italics.

Example:

<h2>About Us</h2>
<p>We help beginners learn to code.</p>

3. Links and Images – Adding Functionality

Links: Use <a href="URL"> to link to another page.
Images: Use <img src="image.jpg" alt="Description"> to add visuals.

Example:

<a href="https://example.com">Visit Our Site</a>
<img src="logo.png" alt="Our Logo">

Advanced HTML Concepts (Simplified)

4. Lists – Organize Information

Unordered List: <ul> for bullet points.
Ordered List: <ol> for numbered items.

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

5. Divs and Spans – Layout Helpers

<div>: Block-level container for grouping content.
<span>: Inline container for styling small bits of text.

Used heavily when designing layout and applying CSS.

Suggested Activities

Code Your First Page: Write and open a simple HTML document using your browser.
Tag Hunt: Explore your favorite website, right-click > “View Page Source,” and identify at least 5 tags.
Link It Up: Add a link to another site and an image to your test page.
List Builder: Create a list of your 3 favorite movies using <ul> or <ol>.

Reflection Questions

Which tags were easiest to understand?
What surprised you about how websites are structured?
How could you apply HTML to a personal or business project?
Did building your first page feel empowering or overwhelming? Why?

Lesson Wrap-Up

HTML is the core of web development. By understanding basic tags and structure, you now have the power to build and display content online. Even more complex platforms like WordPress, Shopify, and Webflow all rely on HTML behind the scenes.

Action Step:

Build a basic HTML page using the elements you learned. Include:

A heading
A paragraph
An image
A hyperlink
A list

Share your code with a peer, online community, or post it as a GitHub Gist within the next 24 hours to get feedback and build momentum.

HTML and CSS for Beginners: Code Your Own Site