Introduction

Introduction

Every website you've ever visited—Google, Facebook, YouTube, your favorite blog—is built with HTML. It's the universal language of the web, and you're about to learn it!

What is HTML? 🌐

HTML stands for HyperText Markup Language. Let's break that down:

• HyperText = Text with links (you can click to jump to other pages)
• Markup = Tags that describe content (headings, paragraphs, images)
• Language = A standard way to communicate with web browsers

Simple Definition:

HTML is a set of instructions that tells web browsers how to display content. It's like a blueprint for web pages.

Real-World Analogy 📰

Think of HTML like a newspaper:

┌─────────────────────────────┐
│  THE DAILY WEB              │  ← Heading (<h1>)
├─────────────────────────────┤
│ Breaking News!              │  ← Subheading (<h2>)
│                             │
│ Today was an exciting day   │  ← Paragraph (<p>)
│ in the world of coding...   │
│                             │
│ • Item one                  │  ← List (<ul><li>)
│ • Item two                  │
│                             │
│ [Click here for more]       │  ← Link (<a>)
│                             │
│ [      Image here      ]    │  ← Image (<img>)
└─────────────────────────────┘

HTML tags label each piece of content (just like a newspaper labels headlines, body text, and images).

History: A Quick Timeline 📅

1991 → HTML Created by Tim Berners-Lee
       └─ Basic tags for scientific documents

1995 → HTML 2.0 (First Standard)
       └─ Tables, forms added

1999 → HTML 4.01 (Major Update)
       └─ Stylesheets, scripting support

2014 → HTML5 (Modern Standard) ⭐
       └─ Video, audio, semantic tags
       └─ Mobile-friendly features
       └─ What we use today!

You're Learning HTML5

This guide teaches HTML5—the latest and most powerful version. Everything you learn here is modern and widely supported!

How HTML Works 🔄

You Write HTML → Browser Reads It → User Sees Webpage

Step by Step:

1. You write HTML code in a text file (.html)
2. Browser reads the HTML tags
3. Browser displays formatted content
4. User sees a beautiful web page!

Example:

<!-- You Write This: -->
<h1>Welcome!</h1>
<p>This is my website.</p>

<!-- Browser Shows This: -->
Welcome! (big and bold)
This is my website. (normal text)

What is a Tag? 🏷️

Tags are the building blocks of HTML. They tell the browser what each piece of content is.

Tag Structure

<tagname>Content goes here</tagname>
    ↑            ↑              ↑
Opening tag   Content    Closing tag

Most tags come in pairs:

• Opening tag: <h1> (starts the element)
• Content: The text or media inside
• Closing tag: </h1> (ends the element—note the /)

Common Tags

<h1>Main Heading</h1>           <!-- Largest heading -->
<h2>Subheading</h2>             <!-- Smaller heading -->
<p>This is a paragraph.</p>     <!-- Regular text -->
<a href="url">Link</a>          <!-- Clickable link -->
<img src="image.jpg">           <!-- Image (self-closing!) -->
<strong>Bold text</strong>      <!-- Bold -->
<em>Italic text</em>            <!-- Italic -->

Self-Closing Tags

Some tags don't need a closing tag because they don't contain content:

<img src="photo.jpg">  ✅ No closing tag needed
<br>                   ✅ Line break
<hr>                   ✅ Horizontal line

In HTML, you use tags to define the structure and content of a web page. Tags are enclosed in angle brackets (< >) and are used to create various elements, such as headings, paragraphs, images, links, lists, tables, and forms.

Example of a tag:

<tagname>Content goes here</tagname>

For instance, to create a heading, you would use the <h1> tag like this:

<h1>This is a Heading</h1>

The content between the opening and closing tags is displayed on the web page. HTML offers a wide variety of tags, each serving a specific purpose, and combining them allows for diverse layouts and designs.

Once your HTML code is written, save it as a text file with a ".html" extension. You can open it in a web browser to see how it looks. HTML can be used to create anything from simple static pages to complex web applications with dynamic content and interactivity.

Your First HTML Document 📄

Every HTML document follows the same basic structure. Let's build one step by step!

The Complete Structure

index.html

<!DOCTYPE html>
<html>
  <head>
    <title>My First Web Page</title>
  </head>
  <body>
    <h1>Welcome to My Website!</h1>
    <p>This is my first paragraph.</p>
  </body>
</html>

Output in browser:

Welcome to My Website!

This is my first paragraph.

Understanding Each Part 🧩

Let's break down what each section does:

1. <!DOCTYPE html> - Document Type Declaration

<!DOCTYPE html>

What it does: Tells the browser "This is an HTML5 document!"

Why it matters: Without it, browsers might display your page incorrectly.

Must know: Always put this as the very first line!

2. <html> - The Root Element

<html>
  <!-- Everything goes inside here -->
</html>

What it does: Container for the entire HTML document

Think of it as: The outer box that holds everything

3. <head> - Document Metadata

<head>
  <title>My Website</title>
  <!-- Other info about the page -->
</head>

What it does: Contains information about the page (not visible to users)

Common contents:

• <title> - Page title (shows in browser tab)
• <meta> - Page description, keywords
• <link> - Stylesheet connections
• <script> - JavaScript connections

Not visible: Content in <head> doesn't appear on the page!

4. <title> - Page Title

<title>My Awesome Website</title>

What it does: Sets the text shown in:

• Browser tab
• Bookmarks
• Search engine results

Browser Tab: [My Awesome Website] | ⓧ
                    ↑
              Comes from <title>

5. <body> - Page Content

<body>
  <!-- Everything users see goes here -->
  <h1>Heading</h1>
  <p>Paragraph</p>
</body>

What it does: Contains all visible content

Includes: Text, images, videos, links—everything users interact with!

6. <h1> - Main Heading

<h1>This is a Heading</h1>

What it does: Creates the largest, most important heading

Visual: Big, bold text (usually)

Hierarchy: <h1> to <h6> (h1 biggest → h6 smallest)

7. <p> - Paragraph

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

What it does: Regular text content

Visual: Normal-sized text with spacing above and below

Visual Structure

┌─────────────────────────────────┐
│ <!DOCTYPE html>                 │  Declaration
├─────────────────────────────────┤
│ <html>                          │  Root start
│   ┌───────────────────────────┐ │
│   │ <head>                    │ │  Metadata
│   │   <title>Page Title</...> │ │  (not visible)
│   │ </head>                   │ │
│   └───────────────────────────┘ │
│   ┌───────────────────────────┐ │
│   │ <body>                    │ │  Visible content
│   │   <h1>Heading</h1>        │ │  ← Users see this
│   │   <p>Text...</p>          │ │  ← And this
│   │ </body>                   │ │
│   └───────────────────────────┘ │
│ </html>                         │  Root end
└─────────────────────────────────┘

Try It Yourself! ✏️

Create your first web page:

1. Open Notepad (Windows) or TextEdit (Mac)
2. Copy this code:

<!DOCTYPE html>
<html>
<head>
    <title>My First Page</title>
</head>
<body>
    <h1>Hello, World!</h1>
    <p>I just created my first web page!</p>
</body>
</html>

3. Save as my-page.html
4. Double-click the file to open in your browser
5. You did it! 🎉

HTML Elements in Detail 🧱

Elements are the building blocks of HTML. An element is the complete package: opening tag + content + closing tag.

<p>This is a paragraph.</p>
 ↑        ↑              ↑
Opening  Content    Closing
 tag                  tag

Element vs Tag vs Content

Element  = <p>Hello</p>    (the whole thing)
Tag      = <p> or </p>     (just the markers)
Content  = Hello           (the text inside)

Nested Elements (Elements Inside Elements)

Elements can contain other elements!

<div>
  <h1>Main Title</h1>
  <p>This is a <strong>paragraph</strong> with <em>emphasis</em>.</p>
</div>

Visual Structure:

<div>
  └─ <h1>Main Title</h1>
  └─ <p>
      ├─ "This is a "
      ├─ <strong>paragraph</strong>
      ├─ " with "
      └─ <em>emphasis</em>

HTML Attributes - Adding Details 🏷️

Attributes give extra information about elements. They go in the opening tag.

Attribute Syntax

<tagname attribute="value">Content</tagname>
           ↑          ↑
      Name        Value

Rules:

• Always in opening tag
• Format: name="value"
• Use double quotes ""
• Separated by spaces if multiple

Common Attributes Examples

1. Links with href

<a href="https://google.com">Click here</a>

• href = hyperlink reference (where to go)
• Creates clickable link to Google

2. Images with src and alt

<img src="photo.jpg" alt="A beautiful sunset">

• src = source (image location)
• alt = alternative text (shown if image fails to load)

3. IDs and Classes

<div id="header" class="container">Content</div>

• id = unique identifier (only one per page)
• class = group identifier (can reuse)

4. Input with Multiple Attributes

<input type="text" name="username" placeholder="Enter your name" required>

• type = input type
• name = form field name
• placeholder = hint text
• required = must fill out

Attributes Reference Table

Attribute	Used On	Purpose	Example
href	<a>	Link destination	<a href="url">
src	<img>, <script>	File source	<img src="pic.jpg">
alt	<img>	Image description	<img alt="Cat">
id	Any element	Unique identifier	<div id="main">
class	Any element	Group classifier	<p class="intro">
style	Any element	Inline CSS	<p style="color:red">
title	Any element	Tooltip text	<span title="Info">

Common Mistakes to Avoid 🚨

Mistake 1: Missing Closing Tags

<!-- ❌ Wrong -->
<p>This is a paragraph.
<p>This is another paragraph.

<!-- ✅ Right -->
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

Mistake 2: Incorrect Nesting

<!-- ❌ Wrong (overlapping tags) -->
<p>This is <strong>bold and <em>italic</strong></em>.</p>

<!-- ✅ Right (properly nested) -->
<p>This is <strong>bold and <em>italic</em></strong>.</p>

Mistake 3: Missing Quotes on Attributes

<!-- ❌ Wrong -->
<a href=https://google.com>Link</a>

<!-- ✅ Right -->
<a href="https://google.com">Link</a>

Mistake 4: Using Spaces in Attribute Values Without Quotes

<!-- ❌ Wrong -->
<img src=my photo.jpg>

<!-- ✅ Right -->
<img src="my photo.jpg">

Quick Reference Cheat Sheet 📋

<!-- Document Structure -->
<!DOCTYPE html>
<html>
<head>
  <title>Page Title</title>
</head>
<body>
  <!-- Content goes here -->
</body>
</html>

<!-- Common Elements -->
<h1>to <h6>     Headings (h1 largest, h6 smallest)
<p>             Paragraph
<a>             Link
<img>           Image
<div>           Division/Container
<span>          Inline container
<br>            Line break
<hr>            Horizontal rule

<!-- Common Attributes -->
href="url"      Link destination
src="file"      File source
alt="text"      Alternative text
id="name"       Unique ID
class="name"    Class name
style="css"     Inline styles

Key Takeaways 🎯

✅ HTML structures web page content ✅ Tags label what type of content each piece is ✅ Elements include opening tag + content + closing tag ✅ Attributes add extra information to elements ✅ All HTML documents have the same basic structure ✅ The <head> section is for metadata (not visible) ✅ The <body> section contains visible content ✅ Always close your tags properly ✅ Nest elements correctly (no overlapping!)

Next Steps

Now that you understand HTML basics, you're ready to learn about:

• Specific HTML tags and their uses
• How to structure more complex pages
• Semantic HTML for better accessibility
• Forms and user input
• Modern HTML5 features

Let's keep building! 🚀