Beginner15 minutesTheory

Introduction to HTML

🎯 🌐 Welcome to the World of HTML

Every single website you've ever visited—every social media post, every online game, every video you've watched—was built with HTML. It's the foundation of the entire web.

Here's the amazing thing: HTML was created in 1989 by one person who just wanted scientists to share documents. Today, it powers billions of websites and connects the entire world.

Quick Reflection:

Have you ever right-clicked on a website and selected View Source?
What did all that code mean?
Why do some websites look complex while others are simple?

In the next 15 minutes, you'll understand exactly what HTML is and why it's the most important language on the web.

Learning Objectives

By the end of this lesson, you'll be able to:

✓ Understand Understand what HTML is and its role in web development
✓ Explain Explain the history and evolution of HTML from 1989 to HTML5
✓ Describe Describe how HTML works with HTTP to deliver web pages
✓ Identify Identify the relationship between HTML structure and browser rendering

Why This Matters:

HTML is literally the foundation of every website. Without understanding HTML, you can't build anything on the web. This knowledge will unlock your ability to create, modify, and understand any website you encounter.

Before You Start:

You should be familiar with:

VS Code installed with extensions Review here
Basic understanding of web technologies Review here
Browser developer tools ready Review here

What is HTML?

HTML (HyperText Markup Language) is the standard markup language for creating web pages. It describes the structure and content of a web page using a system of tags and attributes.

A Brief History

HTML was created by Sir Tim Berners-Lee in 1989 while working at CERN (European Organization for Nuclear Research). He needed a way for scientists to share documents and data across different computers and networks.

1989

Tim Berners-Lee invents the World Wide Web and HTML

1993

HTML 1.0 is released

1995

HTML 2.0 adds forms and tables

1997-1999

HTML 4.0 introduces CSS support and deprecates styling tags

2014

HTML5 becomes the official standard, representing a complete overhaul of HTML

Understanding HTML5

HTML5 isn't just a new version of HTML4 - it's a complete reimagining of the standard. It introduces:

Native multimedia support - Audio and video playback without plugins
Canvas and SVG - Built-in tools for graphics and animations
Mobile-first design - Better support for mobile devices and responsive layouts
Local storage - Store data on the client side
Semantic elements - New tags that give meaning to page structure
Game development - APIs for creating browser-based games
Real-time communication - WebSockets and Server-Sent Events

HTML5 represents a shift from HTML being just a markup language to becoming a platform for web applications.

How HTML Works with HTTP

HTML works hand-in-hand with HTTP (HyperText Transfer Protocol) to deliver web pages:

Your browser sends an HTTP request to a web server
The server responds with an HTML document
Your browser reads the HTML and renders it as a formatted web page

Basic Tools You'll Need

Text Editor

VS Code (recommended)
Sublime Text
Notepad++ (Windows)

Web Browser

Chrome (recommended)
Firefox
Safari
Edge

VS Code Features

While you can use any text editor, we recommend VS Code because it offers:

Syntax highlighting
Auto-completion
Live preview extensions

HTML Elements

HTML uses "elements" to structure content. An element typically consists of:

An opening tag: <tagname>
The content
A closing tag: </tagname>

Example:

Practice Options

You can complete the exercises in two ways:

Built-in Editor

Use the code editor right here in the tutorial
See instant results
No setup required

Local Development

Use your own text editor (VS Code recommended)
Create real project files
Build your portfolio as you learn

Tip: We recommend trying both approaches! The built-in editor is great for quick practice, while local development helps you learn real-world workflows.

⏸️ ⏸️ Pause & Check: Do You Understand?

Before moving forward, can you answer these?

What does HTML stand for and what is its primary purpose?
What are the three main parts of an HTML element?
Why is it important to use a text editor (like VS Code) instead of a word processor (like Microsoft Word)?
Can you name at least three HTML elements and explain what they do?

Check Your Answers

HTML stands for HyperText Markup Language. Its primary purpose is to structure and define the content of web pages using elements and tags.
Opening tag (e.g., <p>), content (the text or nested elements), and closing tag (e.g., </p>).
Text editors create plain text files without hidden formatting, which is required for HTML. Word processors add styling and formatting code that would break HTML files.
Examples: <p> creates a paragraph, <h1> creates a main heading, <a> creates a hyperlink, <img> displays an image, <div> creates a container division.

How confident are you with this concept?

😕 Still confused | 🤔 Getting there | 😊 Got it! | 🎉 Could explain it to a friend!

Try It Yourself

Code

Preview

Hello, World!

This is my first HTML element.

Interactive Exercise: Create a Simple Profile

Using what you've learned, create a simple profile with:

A heading with your name
A paragraph about yourself
Another heading for "My Hobbies"
A paragraph listing your hobbies

Your Code

Your Result

My Hobbies

Click to see a solution

Your Learning Journey

Throughout this HTML basics tutorial series, you'll build two complete websites from scratch:

Black Swan Bistro

A restaurant website

You'll create this website step by step, learning:

Basic page structure
Text formatting and links
Adding images and media
Creating navigation
Building forms

Personal Profile Page

A personal website for Alex Chen

This independent project will help you practise:

Clear personal page structure
Headings, paragraphs, and lists
Profile images and hobby galleries
Semantic page sections
Simple contact forms

Progressive Learning: Each tutorial builds upon the previous ones, gradually adding features to these websites. By the end of this HTML series, you'll have two complete, well-structured websites ready for styling with CSS! The solid HTML foundation you build here will make adding beautiful designs and layouts much easier in the CSS tutorials.

View Complete Reference Projects

Want to see what you'll build? Check out the finished Black Swan Bistro reference project, then build the Personal Profile Page yourself as your independent practice.

Black Swan Bistro HTML

Note: The reference project is HTML-only without styling. You'll build Alex Chen's profile alongside it and style both projects in the CSS Basics series.

🏁 Lesson Complete: Your HTML Journey Begins!

Key Takeaways:

HTML is the backbone of all web pages, providing structure and meaning to content
HTML elements consist of opening tags, content, and closing tags (with some exceptions like <img>)
You can write HTML in any text editor and view results in any web browser
Proper HTML structure is essential for both visual rendering and accessibility
HTML works with CSS (styling) and JavaScript (interactivity) to create complete websites

Learning Objectives Review:

Look back at what you set out to learn. Can you now:

✅ Explain what HTML is and its role in web development Check!
✅ Identify the basic structure of HTML elements and tags Got it!
✅ Set up a text editor and browser for HTML development Can explain it!
✅ Create a simple HTML page with basic elements Could teach this!
✅ Recognize common HTML elements and their purposes Check!

If you can confidently answer "yes" to most of these, you're ready to move on!

Think & Reflect:

💭 Connect to Your Experience

Think of a website you visit often. What HTML elements do you think make up its structure?
How has your understanding of web pages changed now that you know about HTML?

🌍 Real-World Application

Next time you browse the web, try right-clicking on a page and selecting "View Page Source" or "Inspect Element". You'll see the HTML code behind the page. Notice how elements are nested and structured!

🤔 Real-World Test:

Every website you've ever visited—from social media to online shopping—is built with HTML at its core. Understanding HTML gives you the power to create, modify, and understand the digital world around you.

🎯 Looking Ahead:

In the next lesson, HTML: Your First Page, you'll create a complete HTML document from scratch with proper structure, headings, paragraphs, and links. You'll build something you can actually share!

Recommended Next Steps

Continue Learning

Ready to move forward? Continue with the next tutorial in this series:

Your First HTML Page

Additional Resources

Deepen your understanding with these helpful resources:

MDN: Getting started with HTML - Comprehensive guide to HTML basics from Mozilla
W3C HTML Specification - Official HTML specification from W3C