Web Technology IIUnit 111 min read

Web Tech Basics: HTML5, Web Evolution & Page Structure

Unit 1 of Web Technology II introduces the foundational concepts of web technologies, focusing on HTML5's role, the evolution from Web 1.0 to Web 3.0, and practical HTML5 page structure with meta tags, semantic elements, and document organization.

Padhai · Based on the official syllabus and past papers
Updated 29 Sept 2026

TAKEAWAYS:

Understand the three-tier architecture of web technologies (client-server-browser) and how HTML5 fits into modern web development.
Master HTML5 document structure with <!DOCTYPE>, <html>, <head>, and <body> tags, and learn how meta tags control page behavior.
Differentiate Web 1.0 (static), Web 2.0 (dynamic/interactive), and Web 3.0 (semantic/AI-driven) with real-world examples.
Write semantic HTML5 using <header>, <footer>, <article>, and <section> for accessibility and SEO.
Embed multimedia (audio, video, canvas) and forms with validation in HTML5.
Learn how to embed server-side code (PHP) within HTML pages using <?php ?> tags.

Core Concepts: How the Web Works

1. Web Technologies: The Three-Tier Architecture

The web relies on a client-server model with three key layers:

Three-tier architecture showing data flow in a dynamic web request (e.g., eSewa payment processing)

flowchart LR
    A["Client Tier\n(Browser, User)"]
    B["Presentation Tier\n(HTML5, CSS, JS)"]
    C["Application Tier\n(PHP, Node.js)"]
    D["Data Tier\n(Database, APIs)"]
    E["Server Tier\n(Web Server)"]
    A -->|"Requests"| B
    B -->|"Processes"| C
    C -->|"Queries"| D
    D -->|"Responds"| C
    C -->|"Sends"| B
    B -->|"Displays"| A

Client Tier: Your browser (Chrome, Firefox) renders HTML/CSS/JS.
Server Tier: Hosts websites (Apache, Nginx) and runs server-side scripts (PHP, Python).
Data Tier: Stores and retrieves data (MySQL, MongoDB).

2. Evolution of the Web: From Static to Semantic

The web has evolved through three major phases, each with distinct characteristics:

sequenceDiagram
    participant User
    participant Browser
    participant WebServer
    participant Database

    User->>Browser: Requests static page (Web 1.0)
    Browser->>WebServer: GET /index.html
    WebServer-->>Browser: Returns HTML
    Browser->>User: Displays static content

    User->>Browser: Submits form (Web 2.0)
    Browser->>WebServer: POST /login
    WebServer->>Database: Query user data
    Database-->>WebServer: Returns JSON
    WebServer->>Browser: Dynamic HTML
    Browser->>User: Shows personalized content

    User->>Browser: AI search (Web 3.0)
    Browser->>WebServer: GET /search?q=BIT
    WebServer->>Database: Semantic query
    Database-->>WebServer: Structured data
    WebServer->>Browser: AI-enhanced results
    Browser->>User: Displays contextual insights

Protocol exchanges comparing Web 1.0, 2.0, and 3.0 interactions (e.g., NEPSE’s blockchain vs. traditional trading)

Feature	Web 1.0 (1990s)	Web 2.0 (2000s)	Web 3.0 (2010s–Present)
Content	Static (HTML only)	Dynamic (PHP, JavaScript)	Semantic (AI, structured data)
User Role	Reader-only	Creator, collaborator	AI-assisted, decentralized
Key Tech	HTML, HTTP	AJAX, JSON, APIs	Blockchain, WebAssembly, AI/ML
Example	Geocities (static pages)	Facebook, YouTube (user-generated)	NEPSE’s blockchain-based trading
Protocols	HTTP/1.0	HTTP/2, WebSockets	IPFS, decentralized protocols

Real-World Tie-In:

eSewa (Nepal): Uses Web 2.0 for dynamic user interactions (login, payment processing via PHP/JavaScript).
Khalti: Relies on Web 3.0 concepts like tokenization (secure payment data handling) and APIs for real-time transactions.
NEPSE’s blockchain: Represents Web 3.0 with decentralized, tamper-proof trading records.

HTML5: The Backbone of Web Pages

3. HTML5 Document Structure

Every HTML5 page starts with a strict document type declaration and follows a logical hierarchy:

HTML5 document tree structure with semantic tags (e.g., a BIT course page)

<!DOCTYPE html>          <!-- Declares HTML5 version -->
<html lang="en">         <!-- Root element -->
<head>                   <!-- Metadata, links, scripts -->
    <meta charset="UTF-8"> <!-- Character encoding -->
    <title>BIT Web Tech</title> <!-- Page title -->
</head>
<body>                   <!-- Visible content -->
    <header>...</header>  <!-- Intro content -->
    <main>...</main>      <!-- Primary content -->
    <footer>...</footer>  <!-- Footer -->
</body>
</html>

Why This Matters:

<!DOCTYPE html> ensures compatibility with modern browsers.
lang="en" improves accessibility for screen readers.
Semantic tags (<header>, <article>) help search engines index content better.

Worked Example: Meta Tags in Action

<meta name="description" content="Hello BIT">
<meta name="keywords" content="BIT, IOST, TU">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

Output:

Search engines display "Hello BIT" as the page description.
Keywords like "BIT" help with SEO (Search Engine Optimization).
UTF-8 supports Nepali, Devanagari, and special characters.

4. Semantic HTML5: Writing for Machines and Humans

Semantic tags describe meaning, not just appearance. Compare:

Non-Semantic	Semantic Equivalent	Purpose
`<div>`	`<header>`	Page header
`<div>`	`<nav>`	Navigation links
`<div>`	`<article>`	Self-contained content (e.g., blog post)
`<div>`	`<section>`	Thematic grouping

Example: Structuring a Blog Post

<article>
    <header>
        <h1>BIT Web Tech Notes</h1>
        <p>By Ram</p>
    </header>
    <section>
        <h2>HTML5 Basics</h2>
        <p>...</p>
    </section>
    <footer>
        <p>Last updated: 2024</p>
    </footer>
</article>

Visualization:

stateDiagram-v2
    [*] --> SemanticHTML: <article>
    SemanticHTML --> Header: <header>
    SemanticHTML --> Content: <section>
    SemanticHTML --> Footer: <footer>
    Header --> Title: <h1>
    Content --> Subtitle: <h2>
    Content --> Paragraph: <p>

5. Embedding Multimedia and Forms

HTML5 simplifies adding audio, video, and interactive forms:

Audio/Video Example

<audio controls>
    <source src="bit_song.mp3" type="audio/mpeg">
    Your browser does not support HTML5 audio.
</audio>

<video width="320" controls>
    <source src="bit_video.mp4" type="video/mp4">
    Your browser does not support HTML5 video.
</video>

Real-World Use:

YouTube uses <video> tags under the hood for streaming.
WhatsApp Web embeds audio/video chats using similar HTML5 APIs.

Forms with Validation

<form action="/submit" method="post">
    <label for="name">Name:</label>
    <input type="text" id="name" name="name" required>
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" required>
    <button type="submit">Submit</button>
</form>

Key Attributes:

required: Ensures fields aren’t empty.
type="email": Validates email format automatically.

6. Embedding Server-Side Code (PHP)

HTML5 pages can mix with PHP for dynamic content:

<?php
    $name = "Ram";
    echo "<h1>Hello, $name!</h1>";
?>

How It Works:

Server processes <?php ... ?> code.
Outputs pure HTML to the browser.

Worked Example: Loan Calculator (Like Nabil Bank’s Online Tool)

<form method="post">
    <input type="number" name="amount" placeholder="Loan Amount">
    <input type="number" name="rate" placeholder="Interest Rate (%)">
    <input type="submit" value="Calculate">
</form>

<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
    $amount = $_POST["amount"];
    $rate = $_POST["rate"] / 100;
    $monthly = $amount * $rate / 12;
    echo "<p>Monthly Payment: $$monthly</p>";
}
?>

Output: If user enters amount=100000 and rate=8, the page displays: Monthly Payment: $666.67

In the Real World

eSewa’s Payment Page:
- Uses HTML5 forms with type="password" for secure input.
- Embeds PHP to validate user credentials and process transactions.
- Relies on semantic HTML (<header>, <footer>) for accessibility.
Khalti’s Checkout Flow:
- Web 2.0 dynamic content: Updates payment status in real-time via AJAX (no page reload).
- Semantic structure: <article> for transaction details, <nav> for payment options.
NEPSE’s Trading Platform:
- Web 3.0 principles: Uses blockchain (decentralized ledger) for transparent trades.
- HTML5 Canvas: Displays real-time stock charts dynamically.
Pathao’s Driver App:
- Geolocation API: Uses HTML5’s <map> and JavaScript to show driver routes.
- WebSockets: Maintains live connection between driver and passenger for updates.

Common Pitfalls and Best Practices

❌ Avoid:

Table-based layouts: Use CSS div instead (deprecated in HTML5).
Inline styles: <div style="color:red"> → Use external CSS.
Non-semantic tags: <div> for everything → Use <section>, <article>.

✅ Do:

Validate your HTML: Use W3C Validator.
Use semantic tags: Improves SEO and accessibility.
Separate concerns: Keep HTML (structure), CSS (style), and JavaScript (behavior) separate.

Exam Tip: How to Score Full Marks

For meta tag questions:
- Always include charset="UTF-8" (Nepali exams often test this).
- Use name="description" and name="keywords" as shown in past papers.
- Example:
```
<meta name="description" content="Hello BIT">
<meta name="keywords" content="BIT, IOST, TU">
```
For HTML structure:
- Start with <!DOCTYPE html> (1 mark).
- Include <html>, <head>, and <body> (3 marks).
- Use semantic tags like <header>, <footer> (2 marks).
For Web 1.0 vs. Web 2.0:
- Compare static vs. dynamic content.
- Mention user interaction (Web 2.0 allows comments, likes).
- Example answer:
  
  Web 1.0 was read-only (e.g., Geocities), while Web 2.0 enables user-generated content (e.g., Facebook posts). Web 2.0 uses AJAX for real-time updates without page reloads.
For embedding PHP:
- Show the <?php ... ?> syntax (1 mark).
- Include a simple echo or variable example (2 marks).
- Example:
```
<?php echo "BIT Web Tech"; ?>
```
Diagrams:
- Draw the three-tier architecture (client-server-browser) if asked about web tech layers.
- Use mermaid state diagrams for HTML5 document flow (e.g., <html> → <head> → <body>).

Final Checklist Before Submission:

Included <!DOCTYPE html>.
Used semantic tags (<header>, <article>).
Added meta tags with UTF-8 and keywords.
Embedded PHP correctly with <?php ?>.
Compared Web 1.0/2.0/3.0 in a table.

Based on the TU BIT syllabus for Web Technology II (BIT301), unit 1.

Discussion

Loading…