Web Tech Unit I — HTML Fundamentals

HTML Overview

HTML (HyperText Markup Language) gives structure to web content. Tags (elements) describe meaning; attributes add extra information.

Concept	Description	Example
Element	Tag + content	`<p>Hello</p>`
Attribute	Extra info on tag	`<img src="cat.jpg" alt="Cat">`
Void element	No closing tag	`<br>, <img>, <meta>`
Block vs Inline	Layout behavior	`<div>` vs `<span>`

Semantic Structure

Use <header>, <nav>, <main>, <section>, <article>, <aside>, <footer>
Headings h1–h6 should form a logical outline
Use lists (ul/ol), links (a), and images with alt

Page skeleton:

<header>Brand & Nav</header>
<nav>...</nav>
<main>
  <article>
    <h1>Title</h1>
    <section>...</section>
  </article>
  <aside>Related links</aside>
</main>
<footer>© 2025</footer>

Head vs Body

<head>: metadata (title, charset, viewport), CSS/JS links, SEO/social tags.
<body>: content visible to users (headings, paragraphs, images, forms, scripts).

Minimal document:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Page</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>Content here</body>
</html>

Text, Links, and Media

Paragraphs and emphasis: <p>, <strong>, <em>
Links: <a href="/path" target="_blank" rel="noopener">
Images: <img src="..." alt="meaningful text"> inside <figure> with <figcaption>
Audio/Video: use controls, provide captions/subtitles

Media example:

<figure>
  <img src="diagram.png" alt="Block diagram of system" width="320">
  <figcaption>System block diagram</figcaption>
</figure>
<video src="intro.mp4" controls width="480">Your browser needs HTML5 video</video>

Lists and Tables

Lists: <ul> unordered, <ol> ordered, <dl> definitions.
Tables: use caption, thead, tbody, tfoot, and scope headers.

Accessible table:

<table>
  <caption>Student Marks</caption>
  <thead>
    <tr><th scope="col">Name</th><th scope="col">Math</th></tr>
  </thead>
  <tbody>
    <tr><th scope="row">Anita</th><td>92</td></tr>
  </tbody>
</table>

Forms & Validation

Inputs: text, email, number, date, range, file, checkbox, radio
Attributes: required, pattern, min/max, step
Client-side validation with built-in constraints and JS

Login form:

<form novalidate>
  <label>Email <input type="email" required></label>
  <label>Password <input type="password" minlength="6" required></label>
  <button>Login</button>
</form>

Iframes & Embeds

Use <iframe> to embed pages/maps/videos. Always set title and restrictive sandbox when possible.

<iframe title="Map" src="https://maps.example" loading="lazy" 
        referrerpolicy="no-referrer" sandbox></iframe>

Metadata, SEO & Social

Use descriptive <title> and meta name="description">.
Mobile: <meta name="viewport" content="width=device-width, initial-scale=1">.
Open Graph/Twitter cards for sharing previews.
Sitemaps, robots.txt, canonical links to avoid duplicates.

Accessibility (a11y)

Provide alternate text, ARIA labels sparingly, and keyboard support
Ensure color contrast and focus styles
Use semantic HTML first; ARIA is additive

Tip

Use label for inputs and ensure reading order matches visual order.

Best Practices & Checklist

Validates with W3C validator; no console errors.
Use semantic tags and descriptive alt text.
Organize headings; one h1 per page.
Minify assets; lazy-load heavy media.
Internationalization: lang attribute and UTF‑8 charset.