TAKEAWAYS:

• Learn how HTML tags (<html>, <head>, <body>) define the skeleton of a webpage and how attributes customize elements.
• Master text formatting tags (<h1>–<h6>, <p>, <strong>, <em>) to create hierarchical and stylized content.
• Understand the difference between semantic (e.g., <header>, <nav>) and non-semantic tags (e.g., <div>) and why semantics matter for SEO and accessibility.
• Apply inline styling with attributes like style="color: red;" and understand its limitations compared to CSS.
• Debug common errors (unclosed tags, nested misuses) using browser developer tools.
• Practice writing a minimal, valid HTML5 document with proper DOCTYPE and character encoding.

---

1. Introduction to HTML: The Backbone of Web Pages

HTML (HyperText Markup Language) is the standard markup language for creating web pages. It defines the structure and content of a webpage using tags (e.g., <p>, <a>) and attributes (e.g., href, class). Unlike programming languages, HTML is not case-sensitive (though best practice is lowercase) and relies on nesting to organize elements.

Key Components of an HTML Document

Every valid HTML5 document follows this mandatory structure:

Worked Example: Minimal HTML5 Page

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My First Webpage</title>
</head>
<body>
    <h1>Welcome to My Page</h1>
    <p>This is a paragraph of text.</p>
</body>
</html>

Why this works:

• <!DOCTYPE html> declares HTML5 (required for modern browsers).
• <html lang="en"> sets the language for accessibility tools.
• <meta charset="UTF-8"> ensures proper character encoding (e.g., Nepali script).
• <title> defines the tab name in browsers.

Common Mistakes to Avoid:

---

2. HTML Tags: Structure vs. Presentation

HTML tags are not for styling (that’s CSS’s job). They define structure and semantics (meaning). Below is a comparison of semantic (purposeful) vs. non-semantic tags.

Semantic vs. Non-Semantic Tags

Why Semantics Matter:

• SEO: Search engines (like Google) prioritize semantic HTML for ranking.
• Accessibility: Screen readers (used by visually impaired users) rely on semantics to announce content correctly.
• Maintainability: Code is easier to update when elements have clear purposes.

Worked Example: Semantic vs. Non-Semantic

<!-- Non-semantic (harder to understand) -->
<div>
    <div>Header Content</div>
    <div>Main Content</div>
    <div>Footer Content</div>
</div>

<!-- Semantic (clear structure) -->
<header>Header Content</header>
<main>Main Content</main>
<footer>Footer Content</footer>

---

3. Text Formatting in HTML

HTML provides tags to format text for readability and emphasis. Below is a table of common text formatting tags.

Text Formatting Tags

Worked Example: Formatting a Blog Post

<h1>How HTML Works</h1>
<p>HTML is the foundation of the web. <strong>Without it</strong>, websites wouldn’t exist.</p>
<ul>
    <li>HTML defines <em>structure</em>, not design.</li>
    <li>Use <code>&lt;h1&gt;</code> for main headings.</li>
</ul>
<blockquote>
    <p>"The web is for everyone." — Tim Berners-Lee</p>
</blockquote>

Output Preview:

How HTML Works

HTML is the foundation of the web. Without it, websites wouldn’t exist. • HTML defines structure, not design. • Use <h1> for main headings.

"The web is for everyone." — Tim Berners-Lee

---

4. Attributes: Customizing Elements

Attributes provide additional information to HTML tags. Common attributes include:

• id: Unique identifier (e.g., <div id="header">).
• class: Group elements for styling (e.g., <p class="highlight">).
• href: Links to another page (e.g., <a href="https://www.google.com">).
• src: Specifies source for images/videos (e.g., <img src="image.jpg">).
• style: Inline CSS (e.g., <p style="color: blue;">).

Worked Example: Link with Attributes

<a href="https://www.esewa.com.np"
   target="_blank"
   rel="noopener noreferrer"
   class="payment-link">
    Pay with eSewa
</a>

Explanation:

• href: Destination URL.
• target="_blank": Opens link in a new tab.
• rel="noopener noreferrer": Security best practice for external links.
• class="payment-link": Allows CSS styling for the link.

---

5. Images and Multimedia in HTML

HTML supports embedding images, audio, and video using the <img>, <audio>, and <video> tags.

Image Tag Syntax

<img src="path/to/image.jpg"
     alt="Description of image"
     width="300"
     height="200"
     title="Tooltip text">

Key Attributes:

• src: Path to the image file.
• alt: Alternative text (for accessibility and broken images).
• width/height: Dimensions (optional; CSS is preferred for responsiveness).
• title: Tooltip text when hovering.

Worked Example: Accessible Image

<img src="daraz-logo.png"
     alt="Daraz delivery truck on a Kathmandu street"
     width="400">

Why alt text matters:

• Screen readers announce the alt text to visually impaired users.
• If the image fails to load, the alt text appears.

---

6. Lists in HTML

HTML provides three types of lists: unordered, ordered, and description.

List Types

Worked Example: Ordered List (Daraz Order Steps)

<ol>
    <li>Select items from the Daraz app.</li>
    <li>Proceed to checkout.</li>
    <li>Choose payment method (eSewa/Khalti).</li>
    <li>Wait for delivery confirmation.</li>
</ol>

Output:

1. Select items from the Daraz app.
2. Proceed to checkout.
3. Choose payment method (eSewa/Khalti).
4. Wait for delivery confirmation.

---

7. Tables in HTML

Tables are used for structured data (e.g., schedules, comparisons). The <table> tag has child tags for rows (<tr>), headers (<th>), and cells (<td>).

Worked Example: NTC vs. Ncell Comparison

<table border="1">
    <thead>
        <tr>
            <th>Service</th>
            <th>NTC</th>
            <th>Ncell</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Coverage</td>
            <td>Urban/rural</td>
            <td>Urban-focused</td>
        </tr>
        <tr>
            <td>Speed</td>
            <td>4G in cities</td>
            <td>5G in select areas</td>
        </tr>
    </tbody>
</table>

Output:

| Service  | NTC          | Ncell         |
|----------|--------------|---------------|
| Coverage | Urban/rural  | Urban-focused |
| Speed    | 4G in cities | 5G in select areas |

Key Notes:

• Always use <thead>, <tbody>, and <tfoot> for accessibility.
• Avoid using tables for layout (use CSS Flexbox/Grid instead).

---

8. Forms in HTML (Preview for Unit 6)

While Unit 6 covers forms in depth, HTML provides basic form elements here:

• <form>: Container for input fields.
• <input>: Text, password, checkbox, radio buttons.
• <textarea>: Multi-line text.
• <select>: Dropdown menus.
• <button>: Submit or action buttons.

Worked Example: Login Form

<form action="/login" method="post">
    <label for="username">Username:</label>
    <input type="text" id="username" name="username" required>

    <label for="password">Password:</label>
    <input type="password" id="password" name="password" required>

    <button type="submit">Login</button>
</form>

Why required matters:

• Prevents empty submissions (client-side validation).

---

In the Real World

1. eSewa/Khalti Payment Buttons

   • Idea: HTML <a> tags with href attributes link users to payment gateways.
   • How: When you click "Pay with eSewa" on Daraz, the HTML <a> tag redirects you to eSewa’s secure payment page:

     <a href="https://esewa.com.np/pay" target="_blank" rel="noopener">Pay with eSewa</a>
     

   • Real Example: Daraz’s checkout page uses HTML forms and links to integrate eSewa/Khalti seamlessly.

2. Pathao’s Ride Request Form

   • Idea: HTML <form> elements collect user input (pickup/drop locations).
   • How: Pathao’s website/app uses HTML forms to gather ride details before processing:

     <form>
         <input type="text" placeholder="Pickup location" required>
         <input type="text" placeholder="Drop location" required>
         <button type="submit">Request Ride</button>
     </form>
     

   • Real Example: The form validates inputs (e.g., ensures both locations are filled) before sending data to Pathao’s backend.

3. NEPSE Stock Market Tables

   • Idea: HTML <table> tags display real-time stock data in a structured format.
   • How: NEPSE’s website uses tables to show stock prices, volumes, and changes:

     <table>
         <tr><th>Company</th><th>Price</th><th>Change</th></tr>
         <tr><td>Nepal Bank</td><td>1250</td><td>+5.2%</td></tr>
     </table>
     

   • Worked Example: If NEPSE’s HTML table shows "Nepal Bank" with a price of ₹1250 and a +5.2% change, the <td> cells dynamically update with live data from NEPSE’s API.

---

Exam Tip

How to Score Full Marks in Unit 2

1. Structure Your Answer Clearly

   • Start with a minimal valid HTML5 document (DOCTYPE, <html>, <head>, <body>).
   • Use semantic tags (e.g., <header>, <nav>) instead of <div> where possible.

2. Show, Don’t Just Tell

   • Always include a worked example (e.g., a blog post with headings, lists, and images).
   • Compare semantic vs. non-semantic tags in a table (as shown above).

3. Focus on Attributes

   • Include at least 3 attributes in your examples (e.g., id, class, href, alt).
   • Explain why each attribute is used (e.g., alt for accessibility).

4. Common Pitfalls to Avoid

   • ❌ Unclosed tags (<p> without </p>).
   • ❌ Using <font> or <center> (deprecated).
   • ❌ Nesting <p> inside <h1> (invalid HTML).
   • ❌ Forgetting lang="en" in the <html> tag.

5. Practical Question Tip

   • If asked to "design a webpage for a Nepali business (e.g., Pathao, Daraz)", include:
     • A semantic <header> with a logo.
     • A navigational <nav> menu.
     • Lists for services (e.g., Pathao’s ride types).
     • Images with alt text (e.g., Daraz’s delivery truck).
     • A form (even if just a placeholder for Unit 6).

6. Debugging Practice

   • Use browser developer tools (F12) to check for errors like:
     • Missing closing tags.
     • Invalid nesting (e.g., <strong><p>).
     • Broken links (test href attributes).

---

Final Reminder: HTML is not about styling—it’s about structure. Master the tags, attributes, and semantics, and you’ll build the foundation for dynamic web pages in later units (CSS, JavaScript). Practice by creating a realistic webpage (e.g., a Kathmandu restaurant menu or a Pathao ride request form) and validate it using W3C Validator.