Web Technology IUnit 817 min read

Meta Tags, Cookies & Static Websites: How They Work & Why They Matter

Unit 8 of Web Technology I explores meta tags (how they control page behavior and SEO), cookies (client-side data storage and tracking), and static websites (their architecture, pros/cons, and real-world use cases). Learn how these foundational elements power everything from eSewa’s checkout to YouTube’s recommendation

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

TAKEAWAYS:

Meta tags are hidden HTML tags that define page metadata (e.g., charset, viewport, SEO keywords) and control browser behavior.
Cookies store small data on users’ devices (e.g., login sessions, preferences) but raise privacy concerns if misused.
Static websites use pre-built HTML/CSS/JS files (no server-side processing) and excel in speed, security, and cost—ideal for portfolios, blogs, and marketing pages.
Real-world examples: eSewa uses meta tags for mobile optimization, Khalti relies on cookies for secure transactions, and NTC’s static FAQ page loads instantly.
Compare static vs. dynamic sites using a feature matrix (performance, scalability, cost).
Exam tip: Memorize 5 key meta tags (<meta charset>, <meta name="description">, <meta name="viewport">, <meta http-equiv="refresh">, <meta name="keywords">) and cookie attributes (Domain, Path, Expires, Secure, HttpOnly).

1. Meta Tags: The Invisible Architects of Web Pages

Meta tags are HTML elements placed in the <head> section that provide metadata—data about the data. They don’t display on the page but instruct browsers, search engines, and other services how to handle the content.

Why Meta Tags Matter

SEO (Search Engine Optimization): Search engines like Google use meta tags (e.g., description, keywords) to index and rank pages.
Character Encoding: The <meta charset> tag ensures text displays correctly (e.g., UTF-8 for Nepali/English).
Responsive Design: The viewport meta tag makes websites mobile-friendly (critical for apps like Pathao or Daraz).
Security & Behavior: Tags like http-equiv="refresh" auto-redirect users (e.g., old URLs to new ones).

Common Meta Tags and Their Uses

<meta charset="UTF-8">          <!-- Defines character encoding -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">  <!-- Mobile responsiveness -->
<meta name="description" content="Learn Web Technology I for TU exams">  <!-- SEO snippet -->
<meta name="keywords" content="HTML, CSS, JavaScript, TU exams">         <!-- Legacy SEO (less used now) -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">                   <!-- Forces modern IE rendering -->
<meta name="author" content="Your Name">                                <!-- Credits the page owner -->
<meta name="robots" content="index, follow">                             <!-- Tells search engines to crawl -->

Worked Example: Optimizing a TU Exam Resources Page

Suppose you’re building a static website for TU Web Technology I notes. Add these meta tags to improve visibility:

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="Free TU Web Technology I notes, past papers, and meta tag examples for IT237 exams.">
  <meta name="keywords" content="TU IT237, Web Technology, meta tags, HTML, CSS, JavaScript">
  <meta property="og:title" content="TU Web Tech Notes | Meta Tags Guide">
  <meta property="og:description" content="Master meta tags for TU exams with real-world examples.">
  <meta property="og:image" content="https://example.com/tu-webtech-thumbnail.jpg">
</head>

Why this works:

The description appears in Google search results.
og: tags (Open Graph) ensure the page looks rich when shared on Facebook/LinkedIn.
Mobile users see a properly scaled layout thanks to viewport.

Real-World Application: eSewa’s Mobile Optimization

eSewa’s website uses meta tags like:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

How it helps:

width=device-width ensures the page fits all screen sizes.
user-scalable=no prevents zooming (critical for touch targets like payment buttons).
Without this, users might struggle to tap buttons on smaller phones.

2. Cookies: Tiny Data Stores with Big Responsibilities

Cookies are small text files stored on a user’s device by a website. They enable personalization, tracking, and session management but must be used ethically to comply with privacy laws (e.g., GDPR in Europe, Nepal’s Electronic Transactions Act).

How Cookies Work

A server sends a cookie via an HTTP response (e.g., Set-Cookie: user=john; Expires=Wed, 21 Oct 2025).
The browser stores it and sends it back with every request to that domain.
The server reads the cookie to customize the user’s experience.

Attribute	Purpose	Example
`Domain`	Specifies which domains can read the cookie.	`Domain=.esewa.com`
`Path`	Limits the cookie to a specific path.	`Path=/dashboard`
`Expires`	Sets an expiration date (or `Max-Age` in seconds).	`Expires=Wed, 21 Oct 2025`
`Secure`	Ensures the cookie is only sent over HTTPS (critical for banks!).	`Secure`
`HttpOnly`	Prevents JavaScript from accessing the cookie (mitigates XSS attacks).	`HttpOnly`
`SameSite`	Controls cross-site cookie sending (prevents CSRF attacks).	`SameSite=Strict`

Types of Cookies

mindmap
  root((Cookies))
    Session Cookies
      "Temporary, deleted when browser closes\nExample: eSewa’s shopping cart"
    Persistent Cookies
      "Stored long-term\nExample: Daraz’s ‘Remember Me’ login"
    First-Party Cookies
      "Set by the website you’re visiting\nExample: Ncell’s login session"
    Third-Party Cookies
      "Set by external domains (e.g., ads)\nExample: Google Analytics on a blog"
    Secure Cookies
      "Only sent over HTTPS\nExample: Khalti’s transaction tokens"

When you log into Khalti, it sets a cookie like:

Set-Cookie: sessionId=abc123xyz; Path=/; Secure; HttpOnly; SameSite=Strict; Max-Age=3600

Breakdown:

Secure + HttpOnly: Protects against MITM attacks.
SameSite=Strict: Prevents CSRF if Khalti is embedded in a malicious site.
Max-Age=3600: Session expires in 1 hour (balance between security and UX).

Privacy Risks and Best Practices

Risk: Cookies can track users across sites (e.g., Google’s third-party cookies).
Solution: Use SameSite and Secure flags. In Nepal, comply with Nepal Rastra Bank’s (NRB) digital payment guidelines.
Ethical Use: Always disclose cookie usage (e.g., via a privacy policy or GDPR-compliant banner).

3. Static Websites: Fast, Simple, and Scalable

Static websites serve the same content to every visitor. They’re built with HTML, CSS, and JavaScript and rely on a server to deliver pre-built files (no dynamic processing).

How Static Websites Work

flowchart TD
  A["User requests\nhttps://example.com"] --> B["Web Server\n(Apache/Nginx)"]
  B --> C["Serves pre-built\nHTML/CSS/JS files"]
  C --> D["Browser renders\nthe page"]

Key Components:

HTML: Structure (e.g., <h1>, <p>).
CSS: Styling (e.g., colors, layouts).
JavaScript: Basic interactivity (e.g., dropdowns).
Hosting: Services like GitHub Pages, Netlify, or Vercel (free for static sites).

Advantages of Static Websites

Feature	Static Sites	Dynamic Sites
Performance	⚡ Instant load (no server processing)	🐢 Slower (PHP/Node.js processing)
Security	🔒 No server-side vulnerabilities	⚠️ Risk of SQLi, XSS, etc.
Cost	💰 Cheap (hosting starts at $5/year)	💸 Expensive (VPS, databases)
Scalability	📈 Handles millions of users easily	🔄 Struggles with traffic spikes
SEO	🔍 Better (faster indexing)	⚠️ Can be slower if poorly coded
Use Case	Blogs, portfolios, marketing pages	E-commerce (Daraz), social media

Disadvantages

No User Accounts: Static sites can’t store user data (e.g., no "Your Orders" page).
Limited Interactivity: Requires JavaScript for dynamic features (e.g., real-time chat).
Content Updates: Requires redeploying files (vs. CMS like WordPress).

Worked Example: NTC’s Static FAQ Page

NTC’s FAQ page is static because:

Low Traffic: Few users need real-time updates.
Speed: Loads instantly even on slow connections (critical in rural Nepal).
Cost: No need for a database or backend.

Code Snippet (Simplified):

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>NTC FAQ | Static Website Example</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1>Frequently Asked Questions</h1>
  <div class="faq">
    <h2>Internet Services</h2>
    <p><strong>Q: Why is my speed slow?</strong></p>
    <p>A: Check your connection or contact our support at <a href="tel:1660">1660</a>.</p>
  </div>
  <script src="script.js"></script>
</body>
</html>

Hosting: Deployed on GitHub Pages (free) or a simple Nginx server.

4. Comparing Static vs. Dynamic Websites

Use this table to quickly decide which to use:

Criteria	Static Websites	Dynamic Websites
Technology	HTML, CSS, JS	PHP, Node.js, Python (Django), Databases
Performance	⚡ Best (no processing)	🐢 Slower (server-side rendering)
Cost	💰 Low (hosting ~$5/year)	💸 High (VPS, databases, maintenance)
Scalability	📈 Handles 1M+ users easily	🔄 Needs optimization (caching, CDNs)
SEO	🔍 Excellent (fast indexing)	⚠️ Depends on coding (e.g., avoid AJAX SPAs)
Use Cases	Blogs, portfolios, marketing sites	E-commerce, social media, user dashboards
Example (Nepal)	TU exam resources site, NTC FAQ	eSewa, Daraz, Khalti

When to Choose Static?

Your site is informational (e.g., a blog, resume, or TU notes repository).
You need speed and security (e.g., a government portal like Nepal Police’s static FAQ).
You’re on a budget (e.g., a student project).

When to Choose Dynamic?

You need user accounts (e.g., Ncell’s My Account).
Content changes frequently (e.g., NEPSE’s stock prices).
You require real-time features (e.g., Pathao’s ride tracking).

5. Building a Static Website: Step-by-Step

Let’s create a TU Web Technology I Cheat Sheet static site.

Step 1: File Structure

tu-webtech-cheatsheet/
├── index.html          <!-- Homepage -->
├── meta-tags.html      <!-- Dedicated page -->
├── css/
│   └── style.css       <!-- Styles -->
├── js/
│   └── script.js       <!-- Minimal JS -->
└── images/             <!-- Logos, diagrams -->

Step 2: HTML (index.html)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="TU Web Technology I cheat sheet for IT237 exams">
  <meta name="keywords" content="TU IT237, meta tags, cookies, static websites">
  <title>TU Web Tech Cheat Sheet</title>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <header>
    <h1>Web Technology I (IT237) Cheat Sheet</h1>
  </header>
  <nav>
    <ul>
      <li><a href="meta-tags.html">Meta Tags</a></li>
      <li><a href="#">Cookies</a></li>
    </ul>
  </nav>
  <main>
    <section>
      <h2>Meta Tags Quick Reference</h2>
      <table>
        <tr><th>Tag</th><th>Purpose</th></tr>
        <tr><td><code>&lt;meta charset="UTF-8"&gt;</code></td><td>Character encoding</td></tr>
        <tr><td><code>&lt;meta name="viewport"&gt;</code></td><td>Mobile responsiveness</td></tr>
      </table>
    </section>
  </main>
  <footer>
    <p>© 2024 TU Web Tech Students</p>
  </footer>
  <script src="js/script.js"></script>
</body>
</html>

Step 3: CSS (style.css)

body {
  font-family: Arial, sans-serif;
  line-height: 1.6;
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  color: #333;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  padding: 8px;
  border: 1px solid #ddd;
}

nav ul {
  list-style: none;
  padding: 0;
}

nav li {
  display: inline;
  margin-right: 10px;
}

Step 4: Hosting

Upload files to GitHub Pages (free):
- Create a repo named username.github.io.
- Drag-and-drop your files.
Or use Netlify/Vercel for custom domains.

Result:

URL: https://username.github.io/tu-webtech-cheatsheet/
Features:
- Mobile-friendly (thanks to viewport meta tag).
- Fast loading (static files).
- SEO-optimized (description, keywords).

In the Real World

eSewa’s Checkout Page
- Meta Tags: Uses <meta name="viewport"> to ensure the payment form works on all devices.
- Cookies: Sets Secure and HttpOnly cookies for transaction IDs to prevent tampering.
- Static Elements: The product listing page is static for speed, while the checkout is dynamic (requires user data).
Khalti’s Login System
- Cookies: Stores a session cookie with SameSite=Strict to prevent CSRF attacks when users click links from emails.
- Meta Tags: <meta http-equiv="X-UA-Compatible" content="IE=edge"> ensures compatibility with older browsers in rural areas.
NTC’s Service Status Page
- Static Website: The "Internet Outage Map" is static because it’s updated manually during major disruptions (e.g., landslides cutting fiber cables).
- Meta Tags: <meta name="robots" content="noindex"> prevents search engines from caching outdated outage info.
Daraz’s Product Pages
- Static for SEO: Product descriptions are static HTML to rank well in Google.
- Dynamic for Cart: The shopping cart is dynamic (requires user session data).
YouTube’s Homepage (Static Parts)
- The layout (sidebar, header) is static for performance.
- Cookies: Tracks your watch history with Secure cookies for recommendations.

Exam Tip: How to Score Full Marks

This unit is conceptual + practical. Here’s how to ace it:

1. Meta Tags

Memorize these 5 tags (they appear in exams):
1. <meta charset="UTF-8"> (character encoding)
2. <meta name="viewport" content="width=device-width, initial-scale=1.0"> (mobile)
3. <meta name="description" content="..."> (SEO)
4. <meta http-equiv="refresh" content="5"> (auto-redirect)
5. <meta name="keywords" content="..."> (legacy SEO)

Exam Question: "List two meta tags used for SEO." Answer:

<meta name="description" content="...">
<meta name="keywords" content="...">

2. Cookies

Define cookies in one sentence:

"Cookies are small text files stored on a user’s device by a web server to remember user preferences, sessions, or tracking data."
Attributes to remember:
- Domain, Path, Expires, Secure, HttpOnly, SameSite.
Exam Question: "What is the purpose of the HttpOnly cookie attribute?" Answer:

"HttpOnly prevents client-side scripts (e.g., JavaScript) from accessing the cookie, mitigating Cross-Site Scripting (XSS) attacks."

3. Static Websites

Advantages (3 points):
1. Faster loading (no server processing).
2. Cheaper to host (no databases or backend).
3. More secure (no server-side vulnerabilities).
Disadvantages (2 points):
1. No user accounts (static files can’t store logins).
2. Limited interactivity (requires JavaScript hacks).
Exam Question: "Why would a university use a static website for its exam resources?" Answer:
*"Static websites are ideal for exam resources because they:
1. Load instantly (critical for slow internet in Nepal).
2. Are cost-effective (no server costs).
3. Are secure (no dynamic code vulnerabilities).
4. Are easily scalable (handle thousands of students simultaneously)."*

4. Practical Application

Always relate to real-world examples in exams:
- "How does eSewa use cookies?" → Secure, HttpOnly cookies for transactions.
- "Why is NTC’s FAQ static?" → Speed and low cost for informational content.
Code snippets get marks! If asked to "write a meta tag for mobile responsiveness," provide:
```
<meta name="viewport" content="width=device-width, initial-scale=1.0">
```

5. Common Pitfalls to Avoid

❌ Forgetting Secure for cookies in secure sites (e.g., banks).
❌ Using third-party cookies without SameSite (risks CSRF).
❌ Overcomplicating static sites (e.g., adding a database for a blog).
❌ Ignoring charset meta tag (leads to garbled text in Nepali/Devanagari).

Final Checklist Before the Exam

Topic	Key Points to Remember
Meta Tags	5 essential tags + their purposes.
Cookies	Definition, attributes (`Secure`, `HttpOnly`), and real-world use (eSewa, Khalti).
Static Sites	Pros/cons table, when to use, and hosting options (GitHub Pages, Netlify).
Dynamic vs. Static	Feature comparison table.
Ethical Use	Privacy laws (GDPR, NRB guidelines), `SameSite`, and cookie disclosure.

Pro Tip: Draw a layered diagram of a static website (HTML → CSS → JS → Browser) in your exam if asked about architecture. Use mermaid in your notes to practice:

flowchart TD
  A["User Requests\nhttps://example.com"] --> B["Web Server\n(Nginx/Apache)"]
  B --> C["Serves\nHTML/CSS/JS Files"]
  C --> D["Browser\n(Renders Page)"]
  D -->|"No Server Processing"| E["Static Website\n⚡ Fast"]

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

Discussion

Loading…