Web TechnologyUnit 28 min read

HTML5 Basics & Semantic Elements: Structure, Tags & Real-World Use

Unit 2 of Web Technology covers HTML5 fundamentals—its document structure, semantic elements (header, footer, article), multimedia support (audio/video), and form elements—with practical examples, real-world applications (e.g., eSewa’s payment forms), and exam-focused validation techniques.

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

Core Concepts: HTML5 Basics

1. What is HTML5?

HTML5 is the fifth major version of the HyperText Markup Language, the standard markup language for creating web pages. It introduces:

Semantic elements (meaningful tags like <header>, <footer>).
Multimedia support (native <audio>, <video> without plugins).
Enhanced forms (new input types like email, date, range).
APIs (e.g., Geolocation, Drag-and-Drop, Web Storage).

Why HTML5?

Replaces outdated plugins (Flash, Silverlight).
Improves accessibility and SEO.
Simplifies development with built-in features.

2. HTML5 Document Structure

Every HTML5 document follows a logical hierarchy using semantic tags. Below is the basic structure with key elements:

<!DOCTYPE html>          <!-- Declares HTML5 document type -->
<html lang="en">        <!-- Root element; 'lang' for accessibility -->
<head>                  <!-- Metadata (title, links, scripts) -->
    <meta charset="UTF-8">
    <title>Page Title</title>
</head>
<body>                  <!-- Visible content -->
    <header>...</header>  <!-- Introductory content -->
    <nav>...</nav>       <!-- Navigation links -->
    <main>...</main>     <!-- Primary content -->
    <footer>...</footer>  <!-- Footer info -->
</body>
</html>

Visual: HTML5 Document Outline

mindmap
  root((HTML5 Document))
    DOCTYPE
    html
      head
        meta
        title
      body
        header
        nav
        main
        footer

3. Semantic vs. Non-Semantic Elements

Semantic Elements (Meaningful)	Non-Semantic Elements (Generic)
`<header>`, `<footer>`, `<nav>`	`<div>`, `<span>`
`<article>`, `<section>`, `<aside>`
Advantages: Better SEO, accessibility, and readability.	Disadvantages: Less descriptive, harder to maintain.

Example: Semantic Layout

<header>
    <h1>eSewa Payment Portal</h1>
    <nav>
        <a href="/login">Login</a>
        <a href="/register">Register</a>
    </nav>
</header>
<main>
    <article>
        <h2>Electricity Bill Payment</h2>
        <p>Pay your NTC bill online.</p>
    </article>
</main>
<footer>
    <p>© 2024 eSewa</p>
</footer>

Key HTML5 Elements

1. Multimedia: `<audio>` and `<video>`

HTML5 supports native audio/video playback without plugins (e.g., Flash).

Example: Embedding a Video (YouTube-like)

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

controls: Adds playback buttons.
width/height: Sets dimensions.
<source>: Specifies file format (MP4, WebM).

Real-World Use: YouTube (HTML5 Video Playback) YouTube uses HTML5’s <video> tag for adaptive streaming, reducing latency and improving compatibility across devices.

2. Forms: New Input Types

HTML5 introduces input validation and specialized fields:

Comparison of HTML5 form input types with examples.

Input Type	Example	Validation
`email`	`<input type="email">`	Checks for `@` and `.`
`date`	`<input type="date">`	Opens calendar picker
`range`	`<input type="range">`	Slider for numeric ranges
`tel`	`<input type="tel">`	Optimized for phone numbers

Example: Daraz Product Order Form

<form>
    <label>Quantity:</label>
    <input type="number" min="1" max="10" required>

    <label>Delivery Date:</label>
    <input type="date">

    <button type="submit">Order Now</button>
</form>

3. Canvas: Drawing Graphics

The <canvas> element allows dynamic graphics (games, charts) using JavaScript.

Example: Drawing a Rectangle (eSewa Logo Placeholder)

<canvas id="mycanvas" width="300" height="200"></canvas>
<script>
    const canvas = document.getElementById("mycanvas");
    const ctx = canvas.getContext("2d");
    ctx.fillStyle = "blue";
    ctx.fillRect(50, 50, 200, 100); // (x, y, width, height)
</script>

Output:

Real-World Use: Google Maps (Dynamic Rendering) Google Maps uses <canvas> to render tiles and routes in real-time, reducing load times.

In the Real World

eSewa (Payment Forms)
- Uses HTML5’s <input type="email"> and <input type="password"> for secure login forms.
- Semantic <nav> for menu structure improves accessibility for visually impaired users.
Pathao (Ride Booking)
- <video> for driver verification videos.
- <canvas> for real-time route calculations on the map.
NEPSE (Stock Market Dashboard)
- <article> to separate stock listings.
- <section> for "Trending" and "News" sections.
Khalti (Mobile Payments)
- <input type="tel"> for phone number validation.
- <button type="submit"> for secure transaction submission.

Worked Example: NTC Bill Payment Form

Task: Create a semantic HTML5 form for NTC bill payment with validation.

Layered breakdown of a real-world NTC bill payment form using semantic HTML5 elements.

<!DOCTYPE html>
<html>
<head>
    <title>NTC Bill Payment</title>
</head>
<body>
    <header>
        <h1>Nepal Electricity Authority (NEA)</h1>
    </header>
    <main>
        <form id="paymentForm">
            <label for="customerId">Customer ID:</label>
            <input type="text" id="customerId" required>

            <label for="amount">Amount (Rs.):</label>
            <input type="number" id="amount" min="100" required>

            <label for="paymentMethod">Payment Method:</label>
            <select id="paymentMethod" required>
                <option value="">Select...</option>
                <option value="khalti">Khalti</option>
                <option value="esewa">eSewa</option>
            </select>

            <button type="submit">Pay Now</button>
        </form>
    </main>
    <footer>
        <p>Powered by NTC</p>
    </footer>
</body>
</html>

Validation with JavaScript:

document.getElementById("paymentForm").addEventListener("submit", function(event) {
    const amount = document.getElementById("amount").value;
    if (amount < 100) {
        alert("Minimum payment is Rs. 100.");
        event.preventDefault(); // Stop form submission
    }
});

Exam Tip

Structure Matters: Always use <!DOCTYPE html> and semantic tags (<header>, <main>, <footer>).
Form Validation: Exams often test JavaScript validation for:
- Empty fields (required attribute).
- Email format (type="email").
- Numeric ranges (min, max).
Canvas Trick: For canvas questions, remember:
- getContext("2d") initializes drawing.
- fillRect(x, y, width, height) draws shapes.
Real-World Tie: Relate answers to eSewa, Khalti, or Daraz (e.g., "Like Daraz’s checkout, use <input type="number"> for quantity").
Common Mistakes:
- Forgetting </html> or <body> tags.
- Using <div> instead of semantic elements.
- Incorrect canvas dimensions (always specify width and height).

Practice Question: "Create an HTML5 page with a <canvas> of width 400 and height 300. Draw a circle inside it using JavaScript. Validate a form with a required email field and a password field (minimum 6 characters)."

Solution Outline:

Use <canvas id="mycanvas" width="400" height="300">.
JavaScript: ctx.beginPath(); ctx.arc(x, y, radius, 0, 2*Math.PI); ctx.stroke();

Form validation:

if (!email.match(/^[^\s@]+@[^\s@]+\.[^\s@]+$/)) {
    alert("Invalid email!");
}

Based on the TU BSc CSIT syllabus for Web Technology (CSC318), unit 2.

Discussion

Loading…