HTML5 Fundamentals

Learning Objectives

By the end of this session, students will be able to:

LO1 Write a valid HTML5 document with correct DOCTYPE, <html>, <head>, and <body> structure.

LO2 Apply HTML5 semantic elements to give meaningful structure to a webpage.

LO3 Use text formatting tags — headings (h1–h6), paragraphs, <strong>, <em>, <br>, <hr>.

LO4 Create ordered, unordered, and description lists using correct HTML syntax.

LO5 Insert hyperlinks and images using <a> and <img> with proper attributes.

LO6 Build structured HTML tables with thead, tbody, tfoot, colspan, and rowspan.

Aligned to: CO2 · PO1, PO2

HTML5 Document Structure

The required skeleton of every HTML5 webpage

<!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>
  </head>
  <body>
    <h1>Hello, World!</h1>
    <p>This is the visible content inside the body.</p>
  </body>
</html>

Result

`DOCTYPE`	`<!DOCTYPE html>` — Tells the browser this is an HTML5 document. Must be the very first line — before `<html>`.
`<html>`	`lang="en"` attribute — Root element wrapping the entire page. `lang` helps search engines & screen readers.
`<head>`	Metadata container — Contains info about the page, not visible. Holds `<title>`, `<meta>`, `<link>`, `<style>`.
`<meta>`	`charset` & `viewport` — `charset="UTF-8"` supports all characters; `viewport` ensures mobile-responsive display.
`<body>`	Visible content area — Everything users see goes inside `<body>`: text, images, tables, links.

HTML5 Semantic Elements

Two pages can look identical in a browser — semantic HTML tells machines what each part means

Key insight: Semantic elements describe meaning, not just appearance. A <div> could hold anything; a <nav> always means navigation.

<style>
  header, nav, footer { color: #fff; padding: 12px; text-align: center; }
  header { background: #2c5f9b; }
  nav { background: #3f7ab0; padding: 8px; }
  nav a { color: #fff; margin: 0 10px; }
  .layout { display: flex; }
  main { flex: 3; background: #eef2f7; padding: 14px; }
  aside { flex: 1; background: #dde3ea; padding: 14px; }
  footer { background: #1b2a41; }
</style>

<header>
  <h1>My Website</h1>
</header>

<nav>
  <a href="#">Home</a>
  <a href="#">About</a>
  <a href="#">Contact</a>
</nav>

<div class="layout">
  <main>
    <section>
      <h2>Main Content</h2>
      <p>This is the primary content of the page — only ONE main per page.</p>
    </section>
  </main>
  <aside>
    <h3>Related Links</h3>
    <p>Sidebar: related links, ads, tips.</p>
  </aside>
</div>

<footer>
  <p>© 2026 My Website</p>
</footer>

Result

`<header>`	Top of page/section. Contains `<h1>`, logo, tagline.
`<nav>`	Site navigation links. Usually contains a `<ul>` of `<a>` tags.
`<main>`	ONE per page. The dominant, unique page content.
`<article>`	Self-contained content (blog post, news item, product card).
`<section>`	Thematic grouping — should have its own heading.
`<aside>`	Supplementary content: sidebar, related links, ads.
`<footer>`	Bottom of page/section. Copyright, links, contact.

Text Formatting & Headings

Structure and emphasize content with HTML5 text elements

Heading hierarchy (h1–h6)

Heading 1 <h1> · Page Title, ONE per page, highest SEO weight

Heading 2 <h2> · Section headings

Heading 3 <h3> · Sub-section headings

Heading 4 <h4> · Sub-sub-sections

Heading 5 <h5> · Rarely used in practice

Heading 6 <h6> · Lowest level

Inline text elements

`<strong>`	Bold + semantic importance (screen readers announce it)
`<em>`	Italic + semantic emphasis
`<b>`	Bold — visual only, no semantic meaning
`<i>`	Italic — visual only (technical terms, foreign words)
`<br>`	Line break — self-closing, forces a new line within a paragraph
`<hr>`	Horizontal rule — thematic break between content blocks
`<small>`	Smaller text — fine print, disclaimers
`<mark>`	Highlighted text — like a yellow marker
`<del>`	~~Strikethrough~~ — deleted/removed content
`<sup>/<sub>`	Superscript / Subscript — e.g. H₂O, x² — footnotes, chemical formulas

<h2>About Me</h2>
<p>My name is <strong>Juan Dela Cruz</strong> and I am learning <em>HTML5</em>.</p>
<p>Water is H<sub>2</sub>O and 5<sup>2</sup> = 25.</p>
<p>This is <mark>highlighted text</mark> and this is <del>removed text</del>.</p>
<hr>
<p><small>Last updated: 2026</small></p>

Result

💡 Best practice: Use <strong> and <em> for meaningful emphasis. Use <b> and <i> only for visual styling with no semantic significance.

HTML5 Lists

Three list types for organizing content

<ul> — Unordered List

Bulleted list — order does not matter

<ul>
  <li>Python</li>
  <li>HTML</li>
  <li>CSS</li>
</ul>

Result

✔ Use for: shopping lists, features, hobbies, options

<ol> — Ordered List

Numbered list — order matters

<ol>
  <li>Open VS Code</li>
  <li>Create file</li>
  <li>Write code</li>
</ol>

Result

✔ Use for: steps, rankings, procedures, instructions

<dl> — Description List

Term + definition pairs

<dl>
  <dt>HTML</dt>
  <dd>HyperText Markup Language</dd>
  <dt>CSS</dt>
  <dd>Cascading Style Sheets</dd>
</dl>

Result

✔ Use for: glossaries, metadata, FAQs, dictionaries

🔁 Nested lists: Place a <ul> or <ol> inside a <li> to create sub-items. Browsers auto-indent nested lists. The type attribute on <ol> changes numbering: type="1" (default) · type="A" · type="a" · type="I" · type="i"

Links & Images

Connecting pages and embedding visuals with <a> and <img>

🔗 Hyperlinks — <a> tag

<a href="https://www.google.com"
   target="_blank"
   rel="noopener"
   title="Go to Google">
  Visit Google
</a>

<p><a href="mailto:student@email.com">Email Me</a></p>

Result

`href`	Destination URL. Can be absolute or relative.
`target`	`_blank` = new tab \| `_self` = same tab (default)
`rel`	`noopener noreferrer` — security best practice for `target="_blank"` links
`title`	Tooltip text shown on hover
`mailto:`	`<a href="mailto:you@email.com">` — email link
`tel:`	`<a href="tel:+631234567">` — phone link

🖼️ Images — <img> tag

<img src="https://picsum.photos/300/200"
     alt="Random placeholder photo"
     width="300"
     height="200"
     loading="lazy">

Result

`src`	Path or URL to the image file (required)
`alt`	Alternative text — required for accessibility & SEO
`width`/`height`	Hints the browser about dimensions (prevents layout shift)
`loading`	`lazy` = load only when visible (improves performance)

📍 URL types:
Absolute: https://www.google.com (full address, external sites)
Relative: images/photo.jpg (relative to current file, internal links)

HTML5 Tables

Structured data: <table>, <thead>, <tbody>, <tfoot>, colspan & rowspan

<style>
  table { border-collapse: collapse; }
  th, td { border: 1px solid #999; padding: 8px; }
</style>

<table>
  <caption>Class Schedule</caption>
  <thead>
    <tr>
      <th>Day</th>
      <th>Subject</th>
      <th colspan="2">Time</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td rowspan="2">Mon</td>
      <td>HTML5 Lab</td>
      <td>8:00 AM</td>
      <td>11:00 AM</td>
    </tr>
    <tr>
      <td>IT Math</td>
      <td>1:00 PM</td>
      <td>4:00 PM</td>
    </tr>
    <tr>
      <td>Tue</td>
      <td>Web Dev</td>
      <td>7:30 AM</td>
      <td>10:30 AM</td>
    </tr>
    <tr>
      <td>Wed</td>
      <td>Databases</td>
      <td>8:00 AM</td>
      <td>11:00 AM</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="4">4 class sessions this week</td>
    </tr>
  </tfoot>
</table>

Result

`<table>`	Container for the entire table
`<caption>`	Table title — placed inside `<table>`, above rows
`<thead>`	Groups header rows — for screen readers & CSS targeting
`<tbody>`	Groups data rows — the main table body
`<tfoot>`	Groups footer rows — totals, summaries
`<tr>`	Table row — contains `<th>` or `<td>` cells
`<th>`	Header cell — bold, centered by default
`<td>`	Data cell — standard table cell
`colspan="N"`	Merge N cells horizontally
`rowspan="N"`	Merge N cells vertically

Laboratory Activity

My Digital Profile Page · 45 minutes · 50 points

🖥️ Task: Build a personal HTML5 profile page (profile.html) using ALL elements learned today.

R1 · 5 pts	HTML5 Document Shell — Correct DOCTYPE, `<html lang>`, `<head>` with charset & viewport meta, `<body>`
R2 · 10 pts	Semantic Structure — `<header>`, `<nav>`, `<main>`, at least one `<section>`, `<footer>` — 5+ semantic elements
R3 · 8 pts	Heading & Biography — `<h1>` your name, `<h2>` sections, `<p>` bio with `<strong>` and `<em>`
R4 · 7 pts	Two Lists — `<ul>` of 5 hobbies/interests + `<ol>` of your top 3 goals
R5 · 5 pts	Hyperlinks — External link (`target="_blank"` + `rel="noopener"`) + `mailto:` link
R6 · 5 pts	Image — `<img>` with `src` and descriptive `alt` attribute (use picsum.photos if no photo)
R7 · 8 pts	Class Schedule Table — `<table>` with caption, `<thead>`, `<tbody>`, `<tfoot>`, `colspan` used at least once
R8 · 2 pts	Footer — `<footer>` with `©` HTML entity, your name, and year

💡 Validate your code at validator.w3.org · 📁 Save as profile.html · Total: 50 points

Key Takeaways

HTML5 Fundamentals: Document Structure · Semantic Elements · Text · Lists · Links · Images · Tables

Every HTML5 page starts with <!DOCTYPE html> followed by <html>, <head>, and <body>.
Semantic elements (<header>, <nav>, <main>, <article>, <section>, <aside>, <footer>) give meaning to structure — not just visual layout.
Use <strong> and <em> for meaningful emphasis; use <b> and <i> only for visual styling.
HTML has three list types: <ul> (unordered/bullets), <ol> (ordered/numbered), <dl> (description/glossary).
Always add alt text to images. Always add rel="noopener" when using target="_blank" on links.
HTML tables use <thead>, <tbody>, <tfoot> for structure; colspan and rowspan merge cells.
Validate your HTML at validator.w3.org to catch errors before they reach the browser.

Learning Objectives

By the end of this lesson, you can:

PI1 Build complete HTML5 forms using appropriate input types for each field.

PI2 Apply validation attributes (required, pattern, min/max) without JavaScript.

PI3 Embed <audio> and <video> multimedia elements with fallback content.

PI4 Explain the purpose of <canvas> and when JavaScript is required to use it.

PI5 Add ARIA attributes to improve form accessibility for screen reader users.

PI6 Identify the 4 WCAG 2.1 principles and apply them to HTML structure.

HTML5 Form Structure

`action`	WHERE form data is sent (a URL).
`method`	`GET` → data visible in URL (searches). `POST` → data hidden (logins, payments).
`<label for="id">`	Links label text to its input field. Clicking the label focuses the input. Screen readers announce it aloud.
`<fieldset>` + `<legend>`	Groups related inputs visually. `<legend>` is the caption for the group. Improves keyboard + screen reader UX.

<style>
  .field-label { display: inline-block; width: 90px; }
</style>

<form>
  <fieldset>
    <legend>Personal Info</legend>

    <p><label class="field-label" for="fname">Full Name:</label>
    <input type="text" id="fname" name="fname"></p>

    <p><label class="field-label" for="email">Email:</label>
    <input type="email" id="email" name="email"></p>
  </fieldset>

  <fieldset>
    <legend>Preferences</legend>
    <label><input type="checkbox" name="newsletter"> Subscribe to newsletter</label><br>
    <label><input type="checkbox" name="sms"> Receive SMS updates</label>
  </fieldset>

  <button type="submit">Send</button>
  <button type="reset">Clear</button>
</form>

Result

HTML5 Input Types

Use the correct type — it activates free mobile keyboards, date pickers, color pickers, and more

`type="text"`	General single-line text
`type="email"`	Email format validation
`type="password"`	Masked characters
`type="number"`	Numeric spinner + up/down
`type="tel"`	Phone — phone keyboard on mobile
`type="url"`	URL format validation
`type="date"`	Native calendar date picker
`type="time"`	Time picker
`type="color"`	Native color picker — returns hex
`type="range"`	Slider (`min`, `max`, `step`)
`type="search"`	Search field with clear ×
`type="checkbox"`	Individual on/off toggle
`type="radio"`	One choice from a group
`type="file"`	File upload button
`type="hidden"`	Data sent with form, not shown

<p><label>Text: <input type="text" placeholder="Your name"></label></p>
<p><label>Email: <input type="email" placeholder="you@email.com"></label></p>
<p><label>Date: <input type="date"></label></p>
<p><label>Color: <input type="color"></label></p>
<p><label>Range: <input type="range" min="0" max="10"></label></p>
<p><label><input type="checkbox"> Subscribe</label></p>
<p><label><input type="radio" name="demo"> Option A</label></p>

Result

HTML5 Validation Attributes

Server-quality form validation with zero JavaScript required

Key insight: HTML5 validation runs in the browser BEFORE data is sent to the server — no JavaScript needed.

`required`	Field must not be empty on submit. `<input type="email" required>`
`placeholder`	Greyed hint text inside field — disappears on typing. `<input placeholder="Enter email">`
`pattern`	Value must match the regular expression. `<input pattern="[0-9]{11}">`
`minlength`	Minimum character count (text inputs). `<input minlength="8">`
`maxlength`	Maximum character count (text inputs). `<input maxlength="20">`
`min`	Minimum value for number or date inputs. `<input type="number" min="1">`
`max`	Maximum value for number or date inputs. `<input type="number" max="100">`
`step`	Increment for number/range inputs. `<input type="range" step="5">`

<form>
  <label for="phone">Phone (11 digits):</label>
  <input type="text" id="phone" pattern="[0-9]{11}"
         minlength="11" maxlength="11"
         placeholder="09171234567" required>

  <label for="age">Age:</label>
  <input type="number" id="age" min="1" max="120" required>

  <button type="submit">Submit</button>
</form>

<p><small>Try clicking Submit with the fields empty or invalid — the browser blocks it and shows a built-in message.</small></p>

Result

More Form Elements

<select>, <textarea>, radio buttons, checkboxes — the essential form toolkit

<!-- DROPDOWN SELECT -->
<label for="subj">Subject:</label>
<select id="subj" name="subj">
  <option value="">-- Choose --</option>
  <optgroup label="Technical">
    <option value="bug">Bug Report</option>
    <option value="feat">Feature</option>
  </optgroup>
  <option value="other">Other</option>
</select>

<!-- MULTI-LINE TEXT -->
<p><label for="msg">Message:</label></p>
<textarea id="msg" name="msg" rows="4" cols="30"
  placeholder="Your message..."></textarea>

<!-- RADIO BUTTONS (grouped by name) -->
<fieldset>
  <legend>Gender</legend>
  <label><input type="radio" name="gender" value="male"> Male</label>
  <label><input type="radio" name="gender" value="female"> Female</label>
</fieldset>

<!-- CHECKBOX (independent) -->
<label><input type="checkbox" name="subscribe" value="yes"> Subscribe to newsletter</label>

Result

Key rule — Radio buttons: All radio buttons in the SAME GROUP must share the same name attribute. The value attribute tells the server WHICH option was chosen. Checkboxes are independent — each has its own name.

Multimedia Elements

<audio>, <video>, <source>, fallback content, <canvas>

<h3>Audio</h3>
<audio controls>
  <source src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3" type="audio/mpeg">
  <source src="song.ogg" type="audio/ogg">
  Your browser does not support audio playback.
</audio>

<h3>Video</h3>
<video controls width="300" poster="https://picsum.photos/300/200">
  <source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4" type="video/mp4">
  <source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm" type="video/webm">
  Your browser does not support video playback.
</video>

<h3>Canvas (blank without JavaScript)</h3>
<canvas id="myCanvas" width="300" height="80" style="border:1px solid #999;"></canvas>

Result

`controls`	Shows play/pause/volume controls
`autoplay`	Plays on load (+ `muted` required)
`loop`	Restarts after ending
`muted`	Starts with sound off

`poster`	Thumbnail image before play
`width`/`height`	Pixel dimensions of the player
`autoplay` + `muted`	Required pair for autoplay
`loop`	Repeat playback continuously

<canvas id="myCanvas" width="400" height="200"> creates a blank drawing surface. JavaScript is required to draw on it — without JS, it's a completely invisible box (only visible above because we added a CSS border to it).

Accessibility & ARIA

WCAG 2.1 Principles · ARIA Roles & Attributes · Keyboard Navigation

WCAG 2.1 — Four Principles (POUR)

👁 Perceivable

All information must be presentable to users in ways they can perceive — alt text for images, captions for video.

⌨ Operable

All UI must be navigable by keyboard alone — no mouse required. tabindex, focus order, skip links.

💡 Understandable

Content must be clear. Language declared (lang attribute). Error messages explain what went wrong.

🔧 Robust

Content must work with current and future assistive technologies — valid HTML, ARIA, semantic structure.

Key ARIA Attributes for Forms

`aria-required="true"`	Tells screen readers a field is mandatory — use WITH the HTML `required` attribute.
`aria-label="..."`	Provides an accessible name when no visible label exists.
`aria-describedby="id"`	Points to an element that gives extra info about the field.
`aria-hidden="true"`	Hides decorative elements from screen readers.
`aria-invalid="true"`	Announces a validation error to assistive tech.
`role="..."`	Gives semantic meaning: `role="main"`, `role="navigation"`, `role="alert"`.

<form>
  <label for="uname">Username:</label>
  <input type="text" id="uname" required
         aria-required="true" aria-describedby="unameHint">
  <p id="unameHint"><small>Must be 5-15 characters</small></p>

  <label for="site-search">Search:</label>
  <input type="search" id="site-search"
         aria-label="Search site" placeholder="Search...">

  <p><span aria-hidden="true">★</span> Decorative icon (hidden from screen readers)</p>
</form>

Result

Laboratory Activity

Accessible Contact Form · contact-form.html · 50 minutes · 50 points

🖥️ Task: Build an accessible contact form (contact-form.html) using ALL elements learned today.

R1 · 5 pts	HTML5 Boilerplate — DOCTYPE, `html lang`, `meta charset`, `meta viewport`, `title`
R2 · 10 pts	Form + 9 Input Types — text, email, tel, select, textarea, radio×3, checkbox, submit, reset
R3 · 8 pts	Validation Attributes — `required`, `minlength`, `pattern=[0-9]{11}`, `placeholder`, `min`/`max` on age
R4 · 7 pts	Labels + Fieldsets — Every input has `<label for="id">`, 2 fieldsets with legends
R5 · 5 pts	Audio Element — `<audio controls>` + `<source>` + fallback text
R6 · 5 pts	Video Element — `<video controls poster width>` + 2 `<source>` + fallback
R7 · 5 pts	ARIA Attributes — `aria-required`, `aria-label`, `aria-describedby`, `aria-hidden`
R8 · 5 pts	Semantic Structure — `<header>`, `<nav>`, `<main>`, `<footer>`, `<h1>`, `<h2>`

💡 Submit: contact-form.html + Chrome screenshot · Test all validation rules before submitting · Total: 50 points

Key Takeaways

What you learned today

📋 Forms & Inputs — <form>, <input> (15+ types), <select>, <textarea>, <fieldset>/<legend> — the complete form toolkit.
✅ Validation — required, placeholder, pattern, minlength/maxlength, min/max — the browser enforces rules, no JS needed.
🎬 Multimedia — <audio> and <video> with controls, source, fallback. <canvas> is a blank JS drawing surface.
♿ Accessibility — WCAG POUR principles. ARIA: aria-required, aria-label, aria-describedby, aria-hidden.

Document Structure

Learning Objectives

HTML5 Document Structure

HTML5 Semantic Elements

Text Formatting & Headings

Heading hierarchy (h1–h6)

Inline text elements

HTML5 Lists

<ul> — Unordered List

<ol> — Ordered List

<dl> — Description List

Links & Images

🔗 Hyperlinks — <a> tag

🖼️ Images — <img> tag

HTML5 Tables

Laboratory Activity

Key Takeaways

Form

Learning Objectives

HTML5 Form Structure

HTML5 Input Types

HTML5 Validation Attributes

More Form Elements

Multimedia Elements

Accessibility & ARIA

WCAG 2.1 — Four Principles (POUR)

👁 Perceivable

⌨ Operable

💡 Understandable

🔧 Robust

Key ARIA Attributes for Forms

Laboratory Activity

Key Takeaways

CSS3 Fundamentals