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

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

Week 4: HTML5 Advanced