HTML (HyperText Markup Language)
1. Definition
HTML is the standard markup language for creating web pages. It describes the structure of a document using pre-defined tags; the browser interprets the tags and renders the page.
- Origin: SGML application, proposed by Tim Berners-Lee (1991); standardised by W3C/WHATWG — HTML 2.0 → 4.01 → XHTML (XML syntax) → HTML5 (current living standard).
- HTML describes structure/semantics; CSS handles presentation; JavaScript handles behaviour.
2. Skeleton of an HTML Document
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My Page</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Heading</h1>
<p>Paragraph with a <a href="https://example.com">link</a>.</p>
<img src="pic.jpg" alt="picture">
</body>
</html>
3. Basic Tag Categories
| Category | Tags |
|---|---|
| Structure | <html> <head> <body> <title> <meta> |
| Headings & text | `<h1>…<h6> <p> |
<strong> <em>| | **Lists** |<ul> <ol> <li> <dl> <dt> <dd>| | **Tables** |<table> <tr> <td> <th> <caption> <thead> <tbody>| | **Links & media** |<a href> <img> <audio> <video> <iframe> <svg>| | **Forms** |<form> <input> <select> <textarea> <button> <label>| | **Semantic (HTML5)** |<header> <nav> <main> <article> <section> <aside> <footer>| | **Scripting/style** |<script> <style>` |
4. Forms Example (client input)
<form action="/register" method="post">
<label>Name: <input type="text" name="name" required></label>
<label>Email: <input type="email" name="email"></label>
<select name="course"><option>BCS</option><option>MCA</option></select>
<button type="submit">Register</button>
</form>
GET puts data in the URL (bookmarkable, limited size); POST sends it in the body (secure, unlimited).
5. Tables & Lists
<table border="1">
<tr><th>Roll</th><th>Name</th></tr>
<tr><td>1</td><td>Asha</td></tr>
</table>
<ol><li>First</li><li>Second</li></ol>
<ul><li>Item</li></ul>
6. HTML5 Features
- New semantic tags (header, nav, article, footer) for accessibility & SEO.
- Multimedia without plugins —
<audio>,<video>,<canvas>,<svg>. - Form enhancements — date, email, range, placeholder, required, pattern validation.
- Offline & storage — localStorage, sessionStorage, IndexedDB, cache manifest.
- APIs — Geolocation, Drag & Drop, Web Workers, WebSockets.
- Responsive images (
srcset), UTF-8 by default, error-tolerant parsing.
7. Advantages and Limitations
Advantages: universal (every browser), simple to learn, light-weight, links/hypermedia, works with any server, free & open standard.
Limitations: display varies across browsers, verbose for dynamic apps, limited layout/interactivity alone (needs CSS + JS), old versions not strict (XHTML fixed that).
8. HTML vs XHTML vs HTML5 (quick)
| Aspect | HTML 4.01 | XHTML | HTML5 |
|---|---|---|---|
| Syntax rule | Forgiving | Strict XML (lowercase, all closed) | Forgiving again |
| Multimedia | Plugins (Flash) | Plugins | Native audio/video |
| New semantic tags | No | No | Yes |
| Error handling | Quirks | Abort on error | Defined error recovery |
9. Exam Points
- Draw and explain the structure of an HTML document — 7 marks.
- Explain any 10 HTML tags with a sample page — 10 marks.
- Create a student registration form and a table in HTML — 10 marks (very frequent practical).
- List HTML5 features — 5 marks.