Unit 1: HTML Fundamentals

CSE326 — Internet Programming 9 min read

I. Orientation: The Web as a Layered System

The World Wide Web (proposed by Tim Berners-Lee at CERN, 1989; first public server 1991) is an application layered on top of the Internet — a global network of networks running the TCP/IP protocol suite since 1983. HTML (HyperText Markup Language) is the structural layer of every web page; HTML5 became a W3C Recommendation in October 2014 and is now maintained as a WHATWG "Living Standard".

Defining conventions the rest of the unit depends on:

Markup, not programming: HTML has no variables, loops or conditionals. It annotates content with meaning; the browser's rendering engine decides appearance.
Separation of concerns: HTML = structure, CSS = presentation, JavaScript = behaviour. Presentational tags (<font>, <center>) are obsolete in HTML5.
Element syntax: <tagname attribute="value">content</tagname>. Tag names are case-insensitive but lowercase is conventional.
The DOM: the browser parses HTML into a Document Object Model — a tree of nodes that CSS selects and JavaScript manipulates.
Forgiving parsing: browsers recover from malformed HTML rather than erroring, which makes discipline (validation, closing tags) the author's responsibility.
Statelessness: HTTP treats each request independently; cookies, sessions and tokens supply continuity.

II. Introduction to Internet and Web Technologies

The infrastructure beneath the markup

A. Core Concepts and Protocol Stack

The Internet is the physical/logical network; the Web is one service running over it (alongside SMTP mail, FTP, SSH).

TCP/IP layers: Link (Ethernet, Wi-Fi) → Internet (IP, routing by 32-bit IPv4 or 128-bit IPv6 address) → Transport (TCP port 80/443, reliable ordered delivery; UDP unreliable) → Application (HTTP, DNS, SMTP).
DNS: resolves www.example.com to an IP such as 93.184.216.34; without it, URLs would be numeric.
URL anatomy: https://site.com:443/docs/page.html?q=html#top — scheme, host, port, path, query string, fragment identifier.
HTTP methods and codes: GET (retrieve), POST (submit); 200 OK, 301 Moved Permanently, 404 Not Found, 500 Internal Server Error.
HTTPS: HTTP over TLS; encrypts payload, authenticates the server via a certificate. Required for geolocation and service workers in modern browsers.
Rendering engines: Blink (Chrome, Edge), Gecko (Firefox), WebKit (Safari) — the reason cross-browser testing matters.

III. Client–Server Architecture

Who computes what, and where

A. The Request–Response Cycle

Every page load is a discrete transaction initiated by the client.

Sequence: user enters URL → DNS lookup → TCP handshake (SYN, SYN-ACK, ACK) → TLS handshake → GET /index.html HTTP/1.1 → server returns status line, headers, body → browser parses HTML, then fetches CSS, JS, images as sub-resources.
Client responsibilities: parsing, DOM construction, CSS cascade, JavaScript execution, rendering to pixels.
Server responsibilities: routing, authentication, database access, template rendering; typically Apache, Nginx or Node.js.

B. Tiered Models and Processing Location

Client-side (front-end): HTML/CSS/JS executed in the browser. Fast feedback (form validation without a round trip) but visible to the user and therefore never trustworthy for security.
Server-side (back-end): PHP, Java, Python, Node. Authoritative — all validation must be repeated here.

Three-tier architecture: presentation tier (browser) → application/logic tier (web server) → data tier (MySQL, MongoDB).
Static vs dynamic: a static .html file is served byte-for-byte; a dynamic page is assembled per request from templates and database rows.

IV. HTML5 Fundamentals and Document Structure

The skeleton of every page

A. HTML5 Fundamentals

HTML5 replaced the SGML-based DTDs of HTML 4.01 (1999) and XHTML 1.0 with a single simplified doctype and a defined parsing algorithm.

Simplified declarations: <!DOCTYPE html> and <meta charset="UTF-8"> replace the long DTD strings and text/html; charset= constructs.
Semantic elements: <header>, <nav>, <main>, <article>, <section>, <aside>, <footer>, <figure>, <figcaption> replace generic <div id="header"> soup — machine-readable for screen readers and crawlers.
New APIs: Canvas 2D, Web Storage (localStorage/sessionStorage), Geolocation, Web Workers, Drag-and-Drop.
Native media and graphics: <audio>, <video>, <svg> remove the Flash plugin dependency.
New form inputs: type="email", date, range, color, plus required and placeholder attributes.

B. HTML Document Structure

Every document is a nested tree with exactly one root.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Page Title</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header><h1>Site Name</h1></header>
  <main><article><p>Content.</p></article></main>
  <footer><p>&copy; 2024</p></footer>
  <script src="app.js"></script>
</body>
</html>

<!DOCTYPE html>: triggers standards mode; omitting it triggers quirks mode, where the box model reverts to legacy IE behaviour.
<head>: metadata only — not rendered. Holds <title> (shown in the tab and in search results), charset, viewport, <link>, <meta>.
<body>: all visible content; one per document.
lang="en": informs screen-reader pronunciation and translation tools.

V. HTML Elements and Attributes

The grammar of markup

A. Element Categories

Container elements: have opening and closing tags — <p>…</p>, <div>…</div>.
Void (empty) elements: no content, no closing tag — <br>, <hr>, <img>, <meta>, <input>.
Block-level: start on a new line, take full width — <div>, <p>, <h1>–<h6>, <ul>.
Inline: flow within a line — <span>, <a>, <strong>, <img>.
Nesting rule: elements must close in reverse order of opening — <p><strong>x</strong></p>, never <p><strong>x</p></strong>.

B. Attributes

Attributes are name/value pairs in the opening tag that configure an element.

Global attributes: id (unique per document), class (repeatable, CSS/JS hook), style, title (tooltip), hidden, contenteditable, tabindex.
Element-specific: href on <a>, src and alt on <img>, type on <input>.
Boolean attributes: presence alone means true — <video controls>, <input required disabled>.
Custom data attributes: data-user-id="42", retrieved in JS via element.dataset.userId.

VI. Content Markup

Text, lists, links, images

A. Text Formatting

Prefer semantic elements, which convey meaning, over purely visual ones.

Headings: <h1>–<h6> define outline hierarchy; use one <h1> per page and never skip levels for styling.
Semantic vs presentational pairs:
1. <strong> (importance) and <em> (stress emphasis) — announced by screen readers.
2. <b> and <i> — bold/italic with no added importance; use only for keywords or taxonomic names.
Others: <mark> (highlight), <small>, <del>/<ins> (edits), <sub>/<sup> (H<sub>2</sub>O, x²), <abbr title="…">, <blockquote cite="…">, <q>, <code>, <pre> (preserves whitespace).
Character entities: < (<), > (>), & (&),   (non-breaking space), © (©).

B. Lists

Three list types, each with a distinct semantic contract.

HTML

<ul><li>Unordered — bullet, order irrelevant</li></ul>
<ol type="1" start="3"><li>Ordered — sequence matters</li></ol>
<dl><dt>HTML</dt><dd>HyperText Markup Language</dd></dl>

<ul>: navigation menus are conventionally an unordered list wrapped in <nav>.
<ol> attributes: type (1, a, A, i, I), start, reversed.
<dl>: description list of <dt> terms and <dd> definitions — glossaries, metadata pairs.
Nesting: a sublist goes inside the parent <li>, not between list items.

C. Hyperlinks and Images

Hyperlinks create the "hyper" in HyperText; images are replaced elements fetched as separate resources.

Anchor: <a href="page.html" target="_blank" rel="noopener noreferrer">Text</a>. rel="noopener" prevents the new tab from accessing window.opener (a security fix).
Path types: absolute (https://…), root-relative (/img/logo.png), document-relative (../img/logo.png).
Special hrefs: #section-id (fragment jump), mailto:a@b.com, tel:+919876543210.
Image: <img src="cat.jpg" alt="Tabby cat asleep" width="600" height="400" loading="lazy">.
- alt: mandatory for accessibility and displayed if loading fails; use alt="" for purely decorative images.
- width/height: reserve space, preventing cumulative layout shift.
- Responsive images: srcset + sizes, or <picture> with multiple <source> for art direction and WebP fallbacks.
Formats: JPEG (photographs, lossy), PNG (transparency, lossless), GIF (animation), WebP/AVIF (modern compression), SVG (vector).

VII. SVG Graphics

Resolution-independent drawing in the DOM

A. Principle and Syntax

Scalable Vector Graphics is an XML-based language for describing shapes mathematically, so output is crisp at any zoom level and file size is independent of dimensions.

HTML

<svg width="200" height="100" viewBox="0 0 200 100">
  <rect x="10" y="10" width="80" height="60" fill="steelblue"/>
  <circle cx="150" cy="40" r="30" stroke="black" stroke-width="2" fill="none"/>
  <text x="10" y="95">Label</text>
</svg>

Primitives: <rect>, <circle>, <ellipse>, <line>, <polyline>, <polygon>, <path> (the d attribute uses commands M moveto, L lineto, C curveto, Z closepath).
viewBox="min-x min-y width height": defines the internal coordinate system, enabling automatic scaling to the element's rendered size.
Inline SVG advantage: each shape is a DOM node — stylable with CSS and scriptable with JavaScript.
SVG vs Canvas: SVG is retained-mode and vector (good for charts, icons, logos); <canvas> is immediate-mode raster pixels (good for games, thousands of moving particles).

VIII. Multimedia Elements: Audio, Video and Iframes

Embedding external and time-based content

A. Audio and Video

Native playback with a common attribute set; multiple <source> children provide codec fallback.

HTML

<video controls poster="thumb.jpg" width="640" preload="metadata">
  <source src="clip.mp4" type="video/mp4">
  <source src="clip.webm" type="video/webm">
  <track src="subs.vtt" kind="subtitles" srclang="en" label="English">
  Your browser does not support video.
</video>

Shared attributes: controls, autoplay, loop, muted, preload (none/metadata/auto).
Autoplay policy: browsers block autoplay with sound; autoplay must be paired with muted.
Codecs: MP4 (H.264/AAC) is the broadest baseline; WebM (VP9/Opus) and Ogg are royalty-free alternatives. Audio: MP3, AAC, Ogg Vorbis, WAV.
<track>: WebVTT captions — an accessibility and SEO asset since text is indexable.

B. Iframes

An inline frame nests an independent browsing context inside the current document.

Syntax: <iframe src="https://maps.google.com/…" width="600" height="450" title="Campus map" loading="lazy" allowfullscreen></iframe>.
Uses: YouTube and Vimeo embeds, maps, payment widgets, advertisements.
sandbox attribute: strips privileges by default; re-grant selectively with sandbox="allow-scripts allow-forms".
Security concern: clickjacking — a site defends itself with the X-Frame-Options: DENY or Content-Security-Policy: frame-ancestors response header.
Costs: each iframe loads a full document, adding requests and memory; content inside is not part of the parent's DOM or SEO context.

IX. SEO Fundamentals

Making markup legible to crawlers

A. On-Page HTML Signals

Search Engine Optimisation is the practice of structuring content so crawlers can index it and rank it accurately.

Crawl → index → rank: bots follow links, parse HTML, store terms, then order results by relevance and authority signals.
<title>: the single strongest on-page tag; roughly 50–60 characters display in results.
<meta name="description" content="…">: ~150–160 characters; not a ranking factor but drives click-through as the snippet.
Heading hierarchy: one <h1> stating the topic, with <h2>/<h3> mapping subtopics.
Semantic elements and alt text: <article>, <nav> and descriptive alt values give crawlers structure and image context.
<link rel="canonical" href="…">: designates the preferred URL among duplicates.
Robots controls: <meta name="robots" content="noindex, nofollow">, plus robots.txt and sitemap.xml at the site root.
Structured data: JSON-LD using schema.org vocabulary enables rich results (star ratings, recipes, events).
Technical factors: HTTPS, mobile-friendly viewport meta tag, Core Web Vitals (LCP, CLS, INP), and descriptive hyphenated URLs.

X. HTML Best Practices

Discipline that keeps documents maintainable

A. Authoring Standards

Validate: run pages through the W3C Nu validator; correct unclosed tags and duplicate id values.
Semantics first: choose <button> over <div onclick>, <nav> over <div class="nav"> — accessibility and SEO follow automatically.
Consistent style: lowercase tags and attributes, double-quoted values, two-space indentation reflecting nesting depth.
External resources: CSS in <head> via <link>; scripts before </body> or with defer so parsing is not blocked.
Accessibility (WCAG): meaningful alt, <label for="id"> on every form control, logical heading order, ARIA roles only where native semantics are unavailable, keyboard-reachable interactive elements.
Performance: compress and correctly size images, use loading="lazy" below the fold, minimise HTTP requests.
Avoid: inline style attributes, tables for layout, deprecated <font>/<center>/<marquee>, and empty <div> wrappers with no purpose.
Comment sparingly:  marks structural boundaries; comments are visible in page source, so never place credentials there.

Unit 1: HTML Fundamentals

Table of Contents

I. Orientation: The Web as a Layered System

II. Introduction to Internet and Web Technologies

The infrastructure beneath the markup

A. Core Concepts and Protocol Stack

III. Client–Server Architecture

Who computes what, and where

A. The Request–Response Cycle

B. Tiered Models and Processing Location

IV. HTML5 Fundamentals and Document Structure

The skeleton of every page

A. HTML5 Fundamentals

B. HTML Document Structure

V. HTML Elements and Attributes

The grammar of markup

A. Element Categories

B. Attributes

VI. Content Markup

Text, lists, links, images

A. Text Formatting

B. Lists

C. Hyperlinks and Images

VII. SVG Graphics

Resolution-independent drawing in the DOM

A. Principle and Syntax

VIII. Multimedia Elements: Audio, Video and Iframes

Embedding external and time-based content

A. Audio and Video

B. Iframes

IX. SEO Fundamentals

Making markup legible to crawlers

A. On-Page HTML Signals

X. HTML Best Practices

Discipline that keeps documents maintainable

A. Authoring Standards

Did this save you a night before the exam?