Day 1: Welcome to HTML

What You'll Learn Today

What HTML is and its role on the Web
Setting up your development environment
The basic structure of an HTML document
Creating your first web page

What Is HTML?

HTML (HyperText Markup Language) is the language that defines the structure of web pages. Every website you visit daily—news sites, social media, online stores—is built with HTML at its foundation.

flowchart LR
    subgraph Web["🌐 The Three Technologies of the Web"]
        HTML["📄 HTML<br>Structure & Content"]
        CSS["🎨 CSS<br>Appearance & Design"]
        JS["⚡ JavaScript<br>Behavior & Functionality"]
    end
    HTML --> CSS --> JS
    style HTML fill:#3b82f6,color:#fff
    style CSS fill:#8b5cf6,color:#fff
    style JS fill:#f59e0b,color:#fff

HTML is not a "programming language" but a "markup language." Instead of giving computational instructions, it gives meaning and structure to text.

Technology	Role	Analogy
HTML	Structure and content	The frame of a house
CSS	Appearance and design	Paint and wallpaper
JavaScript	Behavior and functionality	Electricity and plumbing

Setting Up Your Development Environment

You only need two things to start learning HTML.

1. Text Editor

We recommend Visual Studio Code (VS Code).

Visit code.visualstudio.com
Download the installer for your OS
Install and launch

Tip: While you can write HTML in Notepad, VS Code offers syntax highlighting, auto-completion, and many other features that make coding more efficient.

2. Web Browser

We recommend Google Chrome. Its Developer Tools (DevTools) are excellent for inspecting HTML structure.

flowchart TB
    subgraph Setup["Development Environment"]
        Editor["📝 VS Code<br>Write code"]
        Browser["🌐 Chrome<br>View results"]
    end
    Editor -->|"Save file"| File["index.html"]
    File -->|"Open in browser"| Browser
    style Editor fill:#3b82f6,color:#fff
    style Browser fill:#22c55e,color:#fff
    style File fill:#f59e0b,color:#fff

The Basic Structure of an HTML Document

Every HTML page shares the same basic structure.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Page Title</title>
</head>
<body>
    <h1>Hello, HTML!</h1>
    <p>This is my first web page.</p>
</body>
</html>

Explanation of Each Part

flowchart TB
    subgraph Document["HTML Document Structure"]
        DOCTYPE["&lt;!DOCTYPE html&gt;<br>Declares HTML5"]
        HTML["&lt;html&gt;<br>Root element"]
        HEAD["&lt;head&gt;<br>Metadata (invisible)"]
        BODY["&lt;body&gt;<br>Visible content"]
    end
    DOCTYPE --> HTML
    HTML --> HEAD
    HTML --> BODY
    style DOCTYPE fill:#ef4444,color:#fff
    style HTML fill:#3b82f6,color:#fff
    style HEAD fill:#8b5cf6,color:#fff
    style BODY fill:#22c55e,color:#fff

Element	Description
`<!DOCTYPE html>`	Tells the browser this is an HTML5 document
`<html lang="en">`	Wraps the entire document. `lang` specifies the language
`<head>`	Contains metadata (title, character encoding, etc.)
`<meta charset="UTF-8">`	Character encoding for proper text display
`<meta name="viewport" ...>`	Ensures proper display on mobile devices
`<title>`	Text shown in the browser tab
`<body>`	Contains everything visible on the page

Elements and Tags

HTML is made up of elements. An element typically consists of an opening tag and a closing tag.

<p>This is a paragraph.</p>

flowchart LR
    Open["&lt;p&gt;<br>Opening tag"] --> Content["This is a paragraph.<br>Content"] --> Close["&lt;/p&gt;<br>Closing tag"]
    style Open fill:#3b82f6,color:#fff
    style Content fill:#22c55e,color:#fff
    style Close fill:#ef4444,color:#fff

Nesting Elements

Elements can be placed inside other elements.

<body>
    <h1>Heading</h1>
    <p>This is <strong>important</strong> text.</p>
</body>

Rule: Opening and closing tags must be closed in the correct order.

✅ <p><strong>text</strong></p>

❌ <p><strong>text</p></strong>

Attributes

Attributes provide additional information to elements.

<a href="https://example.com" target="_blank">Link text</a>
<img src="photo.jpg" alt="Photo description">

Part	Example	Description
Attribute name	`href`	Type of attribute
Attribute value	`"https://example.com"`	The value (enclosed in double quotes)

Create Your First Web Page

Let's create an HTML file.

Step 1: Create a Folder

Create a folder called html-practice on your desktop.

Step 2: Create an HTML File

Open the folder in VS Code and create a file called index.html.

Step 3: Write the Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First Web Page</title>
</head>
<body>
    <h1>My First Web Page</h1>
    <p>I've started learning HTML!</p>
    <p>This is the first web page I've ever created.</p>

    <h2>What I Learned Today</h2>
    <ul>
        <li>HTML is the language that structures web pages</li>
        <li>The basic structure of an HTML document</li>
        <li>The difference between elements, tags, and attributes</li>
    </ul>
</body>
</html>

Step 4: View in Browser

Drag and drop index.html into Chrome, or double-click to open it.

Tips: Install the "Live Server" extension in VS Code for automatic browser refresh when you save files.

Browser Developer Tools

Chrome's Developer Tools let you inspect the structure of any web page.

How to Open

Windows/Linux: F12 or Ctrl + Shift + I
Mac: Cmd + Option + I

Elements Panel

The Elements panel displays HTML structure in a tree format. Click any element to see its details.

Summary

Concept	Description
HTML	A markup language that defines web page structure
Element	Opening tag + content + closing tag
Tag	Symbols marking the start and end of an element
Attribute	Additional information for an element
`<!DOCTYPE html>`	Declaration of an HTML5 document
`<head>`	Area for metadata
`<body>`	Area for visible content

Key Takeaways

HTML handles the structure and content of web pages
Every HTML page has the same basic structure
Elements must be nested in the correct order
Developer Tools are essential for learning HTML

Exercises

Exercise 1: Basic

Create a self-introduction page with your name, hobbies, and favorite foods.

Exercise 2: Intermediate

Create an HTML page using all of these elements: <h1>, <h2>, <p>, <ul>, <li>

Challenge

Open your favorite website's Developer Tools and identify at least 5 different HTML elements used on the page.

References

Next up: In Day 2, you'll learn about "Structuring Text"—headings, paragraphs, emphasis, and quotations.