Web Technology IUnit 210 min read

HTML Fundamentals: Tags, Structure, and Text Formatting

Unit 2 of Web Technology I covers the foundational building blocks of HTML—its purpose, document structure, core tags for text formatting, and how to create basic web content. Learn tags for headings, paragraphs, lists, and formatting (bold, italics, etc.), with real-world examples from eSewa, Daraz, and Kathmandu traf

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

Core Concepts of HTML

What is HTML?

HTML (HyperText Markup Language) is the standard markup language for creating web pages. It provides the structure and content of a webpage, while CSS handles styling and JavaScript adds interactivity.

graph LR
  A["HTML"] -->|"Structures content"| B["CSS"]
  A -->|"Provides data"| C["JavaScript"]
  B -->|"Styles"| D["Webpage"]
  C -->|"Makes interactive"| D

How HTML, CSS, and JavaScript collaborate to build a webpage (simplified)

HTML Document Structure

Every HTML document follows a basic structure with essential tags:

Modern HTML5 document structure with semantic tags (simplified)

HTML5 document structure hierarchy (simplified)

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

Key Tags Explained

Tag	Purpose
`<!DOCTYPE html>`	Declares HTML5 document type (must be the first line).
`<html>`	Root element of the HTML document.
`<head>`	Contains meta-information (title, links to CSS/JS, character set).
`<title>`	Sets the browser tab title.
`<body>`	Contains all visible content (text, images, links, etc.).

Why it matters:

The <!DOCTYPE html> tag ensures the browser renders the page in standards mode.
The <head> section is invisible but critical for SEO and resource loading.

Text Formatting in HTML

Basic Text Tags

HTML provides tags to format text for readability and semantics:

Tag	Example	Purpose
`<h1>` to `<h6>`	`<h1>Heading</h1>`	Headings (h1 is most important).
`<p>`	`<p>This is a paragraph.</p>`	Defines a paragraph.
`<br>`	`<br>`	Line break.
`<hr>`	`<hr>`	Horizontal rule (thematic break).
`<strong>`	`<strong>Important</strong>`	Bold text (semantic importance).
`<em>`	`<em>Emphasis</em>`	Italic text (emphasis).
`<mark>`	`<mark>Highlight</mark>`	Highlighted text.
`<small>`	`<small>Fine print</small>`	Small text (e.g., disclaimers).
`<del>`	`<del>Deleted</del>`	Deleted text.
`<ins>`	`<ins>Inserted</ins>`	Inserted text.
`<sub>`	`<sub>H₂O</sub>`	Subscript (e.g., chemical formulas).
`<sup>`	`<sup>²</sup>`	Superscript (e.g., exponents).
`<code>`	`<code>console.log(x)</code>`	Inline code.
`<kbd>`	`<kbd>Ctrl+C</kbd>`	Keyboard input.
`<samp>`	`<samp>Output</samp>`	Sample output (e.g., terminal).
`<var>`	`<var>x</var>`	Variable in math/programming.
`<abbr>`	`<abbr title="HyperText Markup Language">HTML</abbr>`	Abbreviation with tooltip.

Example: Formatting a Blog Post

<h1>My First Blog Post</h1>
<p>This is a <strong>bold</strong> statement about <em>HTML</em>.</p>
<ul>
    <li>Learn <code>&lt;h1&gt;</code> for headings.</li>
    <li>Use <code>&lt;p&gt;</code> for paragraphs.</li>
</ul>

Lists in HTML

Unordered list structure (simplified)

Unordered Lists (`<ul>`)

Uses <li> for list items.
Bullets are added automatically.

<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ul>

Ordered Lists (`<ol>`)

Uses <li> with automatic numbering.

<ol>
    <li>Step 1: Install Node.js</li>
    <li>Step 2: Run npm init</li>
</ol>

Nested Lists

Combine <ul> and <ol> for hierarchical data.

<ul>
    <li>Web Technologies
        <ol>
            <li>HTML</li>
            <li>CSS</li>
        </ol>
    </li>
</ul>

In the Real World

eSewa (Nepal)
- Uses HTML for structuring its bill payment forms, user profiles, and transaction history tables.
- Example: The <table> tag organizes payment details (service, amount, date) for clarity.
Daraz (Nepal)
- Employs <ul> and <ol> for product categories and step-by-step checkout instructions.
- Example: The "Your Cart" page uses <li> to list items with prices and quantities.
Kathmandu Traffic Routes (Nepal)
- HTML tables (<table>) display bus routes, stop names, and timings on the Kathmandu Metropolitan City website.
- Example: A table with <th> for headers ("Route", "Start", "End") and <td> for data cells.
WhatsApp Web
- Uses <strong> for bold usernames in chat lists and <em> for italicized messages (e.g., reactions).
- Example: A message like "<strong>John</strong> sent <em>😊</em>" combines formatting tags.
NEPSE (Nepal Stock Exchange)
- HTML tables (<table>) display stock prices, volume, and trends in real-time.
- Example: A row for a stock might use <td>Nabil Bank <strong>₹120.50</strong></td>.

Worked Example: Daraz Order Queue

Scenario: Daraz shows a user’s order status with a numbered list. Write the HTML for this:

Daraz order status timeline (HTML <ol> implementation)

<h2>Your Order #1002345</h2>
<ol>
    <li><strong>Processing</strong>: Your order is being packed.</li>
    <li><strong>Shipped</strong>: Estimated delivery in 3-5 days.</li>
    <li><strong>Out for Delivery</strong>: Courier assigned.</li>
</ol>
<p>Track your order: <a href="/track/1002345">Click here</a>.</p>

Output Preview:

Processing: Your order is being packed.
Shipped: Estimated delivery in 3-5 days.
Out for Delivery: Courier assigned.

Common Mistakes and How to Avoid Them

Mistake	Fix
Forgetting `<!DOCTYPE html>`	Always include it as the first line.
Using `<b>` for semantics	Use `<strong>` for importance, `<em>` for emphasis.
Improper nesting of lists	Ensure `<li>` is always inside `<ul>` or `<ol>`.
Missing `<title>` tag	Critical for SEO and accessibility.
Overusing `<br>` for spacing	Use CSS (`margin` or `padding`) for spacing instead.

Exam Tip

How This Unit is Tested

Short Answer Questions (SAQ):
- Define <!DOCTYPE html>, <head>, <body>.
- List 3 semantic text tags (e.g., <strong>, <em>, <mark>).
- Explain the difference between <ul> and <ol>.

Practical Questions:

Create a table for a given dataset (e.g., student marks). Example:

<table border="1">
    <tr><th>Name</th><th>Marks</th></tr>
    <tr><td>Rama</td><td>90</td></tr>
    <tr><td>Hari</td><td>85</td></tr>
</table>

Write HTML for a form with validation (e.g., phone, email). Example:

<form>
    <label>Phone:</label>
    <input type="tel" pattern="[0-9]{10}" required>
    <br>
    <label>Email:</label>
    <input type="email" required>
    <button type="submit">Submit</button>
</form>

Format text using given tags (e.g., make "HTML" bold and "CSS" italic).

Descriptive Questions:
- "Describe the purpose of <h1> to <h6> tags with an example."
- "How would you create a nested list in HTML? Provide a code snippet."

Key Focus Areas for Exams

Document Structure: Always start with <!DOCTYPE html> and close all tags properly.
Semantic Tags: Prefer <strong>, <em>, <mark> over <b>, <i>.
Lists: Know when to use <ul>, <ol>, and nested lists.
Tables: Practice creating tables with headers (<th>) and data cells (<td>).
Formatting: Memorize tags like <sub>, <sup>, <code>, and <kbd>.

Based on the TU BITM syllabus for Web Technology I (IT237), unit 2.

Discussion

Loading…