How the Web Works
(Quick)
You type a URL → Browser sends a request to
a server
Server responds with HTML (and often
CSS/JS)
Browser parses HTML → builds the page
structure (DOM)
CSS styles it, JS adds behavior
A Tiny History of HTML
1991: HTML created by Tim Berners‑Lee
1995: HTML 2.0 • 1999: HTML 4.01 • 2000s:
XHTML
2014: HTML5 becomes the modern standard
Today: Living standard maintained by
WHATWG(Web Hypertext Application
Technology Working Group.)
Editor & Tools
Use any code editor (VS Code, Sublime, etc.)
Enable auto-formatting and Emmet snippets
Open Developer Tools (F12) to inspect HTML
and debug
Use Live Server for quick reloading while
editing
HTML Document Structure
<!DOCTYPE html> — tells the browser we use HTML5
<html> — root element
<head> — metadata (title, meta, links)
<body> — visible content
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,
initial-scale=1">
<title>My First Page</title>
</head>
<body>
<h1>Hello World!</h1>
<p>This is my first web page.</p>
</body>
</html>
Tags, Elements, Content,
Attributes
Tag: keyword inside < >, e.g., <p>
Element = opening tag + content + closing
tag
Content = text or nested HTML inside
element
Attributes = extra info on tags, e.g., <img
src="..." alt="...">
<!-- Element breakdown -->
<p class="lead">Hello World</p>
<!-- <p> = opening tag, class="lead" =
attribute, "Hello World" = content, </p> =
closing tag -->
Block vs Inline Elements
Block: start on new line, take full width (e.g.,
<div>, <p>, <h1>)
Inline: flow with text, only needed width
(e.g., <span>, <a>, <strong>, <img>)
Use block for layout/sections; inline for text-
level semantics
<p>This is a <strong>inline</strong> element
inside a block.</p>
<div>Div is block-level, starts on a new
line.</div>
Headings & Text
Headings: <h1> → <h6> (semantic
importance)
Paragraphs: <p> • Line break: <br> •
Horizontal rule: <hr>
Text semantics: <strong>, <em>, <mark>,
<code>, <small>
<h1>Main Heading</h1>
<h2>Sub Heading</h2>
<p>Normal text with <em>emphasis</em> and
<strong>importance</strong>.</p>
Links & Images
Links: <a href="URL" target="_blank"
rel="noopener">text</a>
Images: <img src="..." alt="Accessible
description">
Use descriptive link text and meaningful alt
text
<a href="[Link]
target="_blank" rel="noopener">Visit
Example</a>
<img
src="[Link]
alt="Placeholder rectangle">
Paths & URLs
Absolute URL: includes protocol and domain
([Link]
Relative URL: relative to the current file
(images/[Link])
Use ../ to go up a directory level
<!-- Relative path example -->
<img src="../assets/[Link]" alt="Site
Logo">
Lists
Unordered list: <ul> with <li> items
Ordered list: <ol> with <li> items
Description list: <dl> with <dt> term and <dd>
description
<ul>
<li>Milk</li>
<li>Bread</li>
</ul>
<ol>
<li>Step one</li>
<li>Step two</li>
</ol>
<dl>
<dt>HTML</dt><dd>Markup for the web</dd>
</dl>
Tables (Basics)
<table> → <tr> rows → <th>/<td> cells
Use <thead>, <tbody>, <tfoot> for
structure
Accessibility: add <caption> and scope
attributes on headers
<table>
<caption>Student Scores</caption>
<thead><tr><th scope="col">Name</th><th
scope="col">Score</th></tr></thead>
<tbody><tr><td>Aisha</td><td>95</td></tr><tr
><td>Ali</td><td>88</td></tr></tbody>
</table>
Forms (Basics)
<form> contains controls to send user input
Common inputs: text, email, password,
number
Always associate <label for> with input id
<form>
<label for="email">Email</label>
<input id="email" type="email" required
placeholder="name@[Link]">
<button type="submit">Submit</button>
</form>
Forms (Intermediate)
Radio, checkbox, select, textarea
Validation attributes: required, min, max,
pattern
Grouping: <fieldset> and <legend>
<fieldset>
<legend>Preferences</legend>
<label><input type="checkbox" name="news">
Subscribe to newsletter</label>
<label><input type="radio" name="mode"
value="light"> Light</label>
<label><input type="radio" name="mode"
value="dark"> Dark</label>
</fieldset>
Audio, Video & Embeds
Audio: <audio controls> with <source>
Video: <video controls> with <source> (use
width/height)
YouTube: <iframe src="..."> (respect allow
attributes)
<audio controls>
<source src="sample.mp3"
type="audio/mpeg">
</audio>
<video controls width="320">
<source src="sample.mp4" type="video/mp4">
</video>
Semantic HTML
Use meaningful tags for structure:
<header>, <nav>, <main>, <section>,
<article>, <aside>, <footer>
Improves SEO, accessibility, and
maintainability
<header><h1>Site</h1></header>
<nav><a href="#">Home</a></nav>
<main>
<article>
<h2>Post Title</h2>
<p>Body text...</p>
</article>
</main>
<footer>© 2025</footer>
HTML Layout Elements
Head & Metadata
<title> — page title
<meta charset="utf-8"> • <meta name="viewport"
content="width=device-width, initial-scale=1">
SEO: <meta name="description" content="...">
Favicon: <link rel="icon" href="/[Link]">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-
width, initial-scale=1">
<meta name="description" content="HTML basics
lecture demo">
<link rel="icon" href="/[Link]">
<title>Demo</title>
</head>
Entities, Whitespace &
Comments
Entities: < > & ©
Whitespace in HTML collapses (use
for fixed)
Comments: <!-- like this -->
<!-- Escape reserved characters -->
<p>Use <code> to show tags.</p>
Best Practices & Common
Mistakes
Close tags properly, avoid nesting errors
Use semantic structure for clarity and SEO
Keep HTML clean, descriptive, and accessible
Mini Exercise
Build a simple profile page:
Header with your name (h1)
Photo (img) with alt, a short bio (p), and a list
of 3 skills (ul)
Add a contact form: email field + submit
button
Quick Checkpoint
What’s the difference between a tag and an
element?
Name three semantic tags and why they
matter
What does alt do on images?
Block vs inline — give one example each