Welcome to HTML!

⏱️ 15 minutes

Welcome to your first lesson in HTML! In this lesson, you'll discover what HTML is, why it's fundamental to web development, and how it creates the structure of every webpage you see.

🎯 Learning Objectives

  • Understand what HTML is and its role in web development
  • Learn about the history and evolution of HTML
  • Discover how HTML works with browsers
  • Identify the basic structure of an HTML document
  • Create your first HTML page

What is HTML?

💡 Key Concept

HTML (HyperText Markup Language) is the standard markup language used to create web pages. It describes the structure and content of a webpage using elements and tags.

Think of HTML as the skeleton of a webpage. Just like how a building needs a frame before you can add walls, windows, and decorations, a webpage needs HTML structure before you can add styling (CSS) or interactive features (JavaScript).

🏗️ HTML

Structure & Content

  • Headings and paragraphs
  • Links and images
  • Lists and tables
  • Forms and buttons

🎨 CSS

Styling & Layout

  • Colors and fonts
  • Spacing and positioning
  • Animations and effects
  • Responsive design

⚡ JavaScript

Interactivity & Behavior

  • User interactions
  • Dynamic content
  • Form validation
  • API integration

A Brief History of HTML

1991

HTML Born

Tim Berners-Lee creates the first version of HTML with 18 elements

1995

HTML 2.0

First official HTML standard published

1997

HTML 3.2 & 4.0

Introduces tables, forms, and better styling support

2014

HTML5

Modern HTML with semantic elements, multimedia, and APIs

Today

Living Standard

HTML continues to evolve with new features and improvements

How HTML Works

Understanding how HTML works will help you write better code. Here's the process from writing HTML to seeing it in a browser:

1

Write HTML Code

You write HTML code in a text file with a .html extension

→
2

Browser Reads

The web browser reads and parses your HTML code

→
3

DOM Created

Browser creates a Document Object Model (DOM) from your HTML

→
4

Page Displayed

The browser renders the webpage visually for users

🔍 What is the DOM?

The Document Object Model (DOM) is a tree-like structure that represents your HTML document. It allows browsers (and JavaScript) to access and modify the content, structure, and styling of your webpage.

Basic HTML Structure

Every HTML document follows a basic structure. Let's break down the essential parts:

Basic HTML Structure 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First Webpage</title>
</head>
<body>
    <h1>Welcome to My Website!</h1>
    <p>This is my first paragraph.</p>
</body>
</html>

Let's Break It Down:

<!DOCTYPE html>

Document Type Declaration

Tells the browser this is an HTML5 document. Always put this at the very top.

<html lang="en">

Root Element

The main container for all HTML content. The lang="en" specifies the language.

<head>

Document Head

Contains metadata about the document - not visible to users but important for browsers and search engines.

<body>

Document Body

Contains all the visible content that users will see and interact with.

Create Your First HTML Page

Now it's time to create your first HTML page! Follow these steps:

1

Open a Text Editor

You can use any text editor like Notepad (Windows), TextEdit (Mac), or VS Code (recommended).

2

Type the HTML Code

Copy and paste or type the code below into your editor:

Try It Yourself!

3

Save the File

Save the file with a .html extension, like index.html or my-first-page.html

4

Open in Browser

Double-click the file or drag it into your web browser to see your webpage!

Practice Exercises

Exercise 1: Personal Introduction

Create an HTML page that introduces yourself. Include:

  • A main heading with your name
  • A paragraph about yourself
  • A paragraph about your hobbies

Exercise 2: Favorite Things

Create a webpage about your favorite things. Include:

  • A title "My Favorite Things"
  • Multiple headings for different categories
  • Paragraphs describing each favorite thing

Exercise 3: Dream Vacation

Describe your dream vacation destination:

  • A compelling title
  • Why you want to visit this place
  • What you would do there

Lesson Summary

🎯 What You Learned

  • HTML is the markup language for web pages
  • HTML provides structure and content
  • Every HTML document has a basic structure
  • Browsers parse HTML to display webpages
  • You can create HTML files with any text editor

🔑 Key Terms

HTML
HyperText Markup Language
Element
Building blocks of HTML (like <h1>, <p>)
Tag
The markup that defines elements
DOM
Document Object Model

📝 Next Steps

  • Practice creating simple HTML pages
  • Experiment with different content
  • Try modifying the code examples
  • Move on to Lesson 2: HTML Document Structure

🎉 Congratulations!

You've completed your first HTML lesson. You now understand the basics of HTML and have created your first webpage!

Next: HTML Document Structure →

📝 My Notes