Slides · Chapter 2: HTML

Chapter 2

Chapter 2: HTML

HyperText Markup Language — the living standard that gives web pages their structure and meaning.

Lesson

What is HTML? Structure, Elements & Attributes

The nature of HTML, its document skeleton, and how elements, tags and attributes fit together.

What is HTML? Structure, Elements & Attributes

What is HTML?

Markup language — describes structure and meaning using tags and attributes. It is not a programming language.
Browser-interpreted — browsers parse HTML and render it as visual pages.
Text-based — plain text files containing elements: opening tag, content and closing tag.

2025 key updates

Update	Detail
HTML Living Standard	Maintained by WHATWG — continuously updated, no versioned releases.
Semantic elements	`<header>`, `<nav>`, `<main>`, `<article>`, `<section>`, `<footer>`, `<aside>`.
Accessibility first	ARIA roles and attributes are now essential requirements, not afterthoughts.
Web Components	Custom Elements & Shadow DOM enable reusable, encapsulated components.
Native dialogs	The `<dialog>` element replaces custom modal libraries.

What is HTML? Structure, Elements & Attributes

Brief History of HTML

Year	Version	Milestone
1991	HTML 1.0	Tim Berners-Lee publishes the first specification — 18 elements.
1995	HTML 2.0	First formal HTML standard — introduced forms and tables.
1997	HTML 3.2 / 4.0	W3C takes over; stylesheets (CSS) separate design from structure.
2008	HTML5 Draft	WHATWG and W3C jointly develop new semantic elements and APIs.
2014	HTML5	W3C publishes HTML5 as a formal recommendation.
2019+	Living Standard	WHATWG's living standard becomes the single authoritative source.

What is HTML? Structure, Elements & Attributes

HTML Document Structure

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="Page description">
  <title>Page Title</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>Main Heading</h1>
  <p>Paragraph text.</p>
</body>
</html>

<!DOCTYPE html> — declares HTML5; always the very first line.
<html lang="en"> — root element; lang aids accessibility & SEO.
<head> — metadata container, not visible to users.
charset="UTF-8" — character encoding supporting all languages.
viewport meta — essential for responsive mobile design.
description meta — used by search engines for page summaries.
<title> — browser tab title and SEO signal.
<link> — links an external CSS file.
<body> — all visible page content goes here.

Always include lang, charset, viewport and description meta — required for accessible, SEO-friendly pages.

What is HTML? Structure, Elements & Attributes

HTML Elements

Element anatomy: opening tag + content + closing tag.

<p>This is a paragraph</p>
 |     content      |

Category	Elements
Structural	`<head>` `<body>` `<header>` `<footer>`
Text & headings	`<span>` `<strong>` `<mark>`
Media	`<img>` `<video>` `<audio>` `<canvas>` `<figure>`
Interactive / form	`<button>` `<form>` `<input>` `<select>` `<dialog>`

What is HTML? Structure, Elements & Attributes

HTML Tags: Container vs Void

Container tags — have an opening and closing tag; wrap content and define structure: <body>...</body>.
Void / empty elements — self-contained, no closing tag. In HTML5 the trailing slash is optional: <br> and <br/> are both valid. Examples: <br>, <img>, <base>, <embed>.

HTML tags are not case-sensitive, but lowercase is the modern standard convention.

What is HTML? Structure, Elements & Attributes

HTML Tag Attributes

Attributes provide extra information about an element. They are written as name="value" pairs inside the opening tag.

<a href="https://www.utem.edu.my" target="_blank">Visit UTeM</a>

Global attribute	Purpose
`id`	Unique identifier for the element on the page
`class`	One or more CSS class names for styling
`style`	Inline CSS styles (prefer external CSS)
`lang`	Language of the element's content
`title`	Advisory tooltip text on hover
`hidden`	Hides the element from display

Data & ARIA attributes

data-* — custom data, e.g. data-id="42" data-color="blue"
role — ARIA landmark/widget role for accessibility
aria-label — accessible name for screen readers
aria-hidden — hides decorative elements from screen readers
tabindex — controls keyboard focus order
contenteditable — makes an element editable by the user

Attribute values should always be quoted. Boolean attributes (like hidden, required) need no value: <input required>.

What is HTML? Structure, Elements & Attributes

HTML Comments

<!-- This is a comment - it is NOT visible in the browser -->

 closes.
Useful for developer notes, section markers and temporarily disabling code.
Comments are visible in browser DevTools — never put passwords, tokens or sensitive data in them.

What is HTML? Structure, Elements & Attributes

Activity — complete the code

Drag the tokens into the blanks to build a complete HTML5 document skeleton.

<!DOCTYPE html>
  <meta charset="UTF-8">
  <title></title>
  <h1>Hello</h1>

Lesson

Text, Headings, Inline Elements & Entities

Paragraphs, line breaks, headings, semantic inline elements and character entities.

Text, Headings, Inline Elements & Entities

Paragraphs & Line Breaks

<p>This is the first paragraph. The browser wraps it automatically.</p>
<p>This is the second paragraph. It starts on a new line.</p>

<p> creates a block of text with top and bottom margin; the browser adds spacing automatically; the closing tag is required in HTML5.
<br> inserts a single line break within a block. It is a void element. Use sparingly — prefer CSS margin for spacing.
<pre> preserves whitespace and line breaks exactly as typed; used for code samples and ASCII art.
<hr> draws a thematic break / dividing line. Void element.

Block vs Inline

Block: <p>, <div> — full width, start on a new line.
Inline: <span>, <a>, <strong>, <em> — flow within text.

Text, Headings, Inline Elements & Entities

Headings — <h1> to <h6>

<h1>Page Title</h1>
<h2>Chapter 1</h2>
<h3>Section</h3>

Usage rules (2025 best practice)

Only one <h1> per page — it is the main topic.
Don't skip levels (h1 → h3 breaks accessibility).
Use headings for structure, not for visual sizing.
Screen readers use headings for page navigation.
Don't use <b> or <strong> instead of headings.

Text, Headings, Inline Elements & Entities

Inline & Semantic Elements

Element	Meaning
`<strong>`	Bold + semantic importance
`<em>`	Italic + semantic emphasis
`<code>`	Inline code snippet
`<abbr>`	Abbreviation with tooltip
`<sub>` / `<sup>`	Subscript / superscript
`<del>` / `<ins>`	Deleted (strikethrough) / inserted text
`<mark>`	Highlighted text (HTML5)
`<time>`	Machine-readable date/time
`<small>`	Fine print / legal text
`<span>`	Generic inline container for CSS

Obsolete: <b>, <i>, <big>, <tt>, <font>. Use <strong>, <em> and CSS instead.

Text, Headings, Inline Elements & Entities

Character Entities

Some characters have special meaning in HTML and must be encoded as entities.

Character	Named entity
Less than `<`	`<`
Greater than `>`	`>`
Ampersand `&`	`&`
Double quote `"`	`"`
Apostrophe `'`	`'`
Copyright `©`	`©`
Registered `®`	`®`
Trademark `™`	`™`
Euro `€` / Pound `£`	`€` / `£`
Non-break space	` `
Em dash `—`	`—`

Always encode <, > and & in text content. Full reference: https://html.spec.whatwg.org/multipage/named-characters.html

Text, Headings, Inline Elements & Entities

Activity — complete the code

Complete the text-formatting example with the correct tags.

Main Title</h1>
<h2>Subtitle</h2>
<p>This is <>important</strong> and <em>emphasised</em>.</p>
<p>The <> element marks text as code.</p>

Lesson

Links, Images & Media

Anchors, targets, responsive images and embedded video/audio.

Links, Images & Media

Links — The <a> Anchor Tag

<a href="https://www.utem.edu.my"
   target="_blank"
   rel="noopener noreferrer">Link Text</a>

Attribute	Purpose
`href`	Specifies the URL destination (Hypertext REFerence)
`target="_blank"`	Opens link in a new browser tab/window
`rel="noopener noreferrer"`	Security: prevents the new tab from accessing the opener window
`rel="nofollow"`	SEO: tells search engines not to follow this link
`download`	Triggers file download instead of navigation

Types of href values

Absolute URL: href="https://www.w3.org"
Relative URL: href="about.html" or href="../images/logo.png"
Email: href="mailto:info@example.com"
Phone: href="tel:+60123456789"
Fragment: href="#section-id"

2025: always add rel="noopener noreferrer" with target="_blank" to prevent tabnabbing attacks.

Target values & named anchors

_blank = new tab/window, _self = same tab (default), _parent = parent frame, _top = full window body.
Fragment links: add an id to the target element, then link with # + id, e.g. <a href="#contact">Go to Contact</a>.
Used for tables of contents and skip links. Skip navigation links (<a href="#main-content">) improve keyboard accessibility — add them as the very first element in <body>.

Links, Images & Media

Images — The <img> Tag

<img src="photo.webp"
     alt="person working at a standing desk"
     width="800" height="600"
     loading="lazy" decoding="async">

Attribute	Notes
`src`	Required. Image path or URL (relative or absolute).
`alt`	Required. Alternative text for screen readers and broken images.
`width` / `height`	Prevents Cumulative Layout Shift (CLS) — always specify in pixels.
`loading="lazy"`	Browser defers loading off-screen images — improves page speed.
`decoding="async"`	Allows the browser to decode the image off the main thread.
`srcset`	Provides multiple image sources for different screen resolutions.

Use descriptive alt text: "apple on white plate", not "pic". Decorative images use alt="".

Links, Images & Media

Responsive Images — <picture> & srcset

<picture>
  <source srcset="photo.avif" type="image/avif">
  <source srcset="photo.webp" type="image/webp">
  <source srcset="small.jpg 480w, medium.jpg 800w, large.jpg 1200w"
          sizes="(max-width: 600px) 100vw, 50vw">
  <img src="photo.jpg" alt="descriptive text" width="1200" height="800">
</picture>

AVIF — ~50% smaller than JPEG; WebP — ~30–35% smaller. Use as the first <source>.
srcset — list of image URLs with width descriptors (480w, 800w, 1200w).
sizes — tells the browser how wide the image will display at each breakpoint.
Fallback <img> — required; browsers use it if no <source> matches.

Links, Images & Media

Media — <video> & <audio>

<video controls autoplay muted loop poster="thumb.jpg">
  <source src="clip.mp4" type="video/mp4">
  <source src="clip.webm" type="video/webm">
  <track src="subs.vtt" kind="captions" default>
  Your browser doesn't support video.
</video>

Attribute	Meaning
`controls`	Show playback controls
`autoplay`	Start playing automatically (browsers may block unless `muted`)
`loop`	Repeat playback
`muted`	Start muted (needed for autoplay)
`poster`	Thumbnail image before play
`preload`	`none` \| `metadata` \| `auto`

Always provide multiple <source> formats (MP4 + WebM for video, MP3 + OGG for audio). Use <track> for captions/accessibility.

Links, Images & Media

Activity — complete the code

Complete the links and media markup.

<h1>My favourite site</h1>
<p>
  <a href="" target="_blank" rel="noopener noreferrer">Visit UTeM</a>
</p>
<img src="cat.jpg" ="A cute cat" width="120" height="120">
<video  poster="thumb.jpg">
  <source src="clip.mp4" type="video/mp4">
</video>

Lesson

Lists & Tables

Unordered, ordered and description lists, plus accessible tabular data.

Lists & Tables

Unordered & Ordered Lists

<ul>
  <li>Tea</li>
  <li>Green Tea</li>
</ul>

<ol type="1" start="1">
  <li>Preheat oven</li>
  <li>Mix dry ingredients</li>
  <li>Bake 30 minutes</li>
</ol>

<ul> — items marked with bullets; order doesn't matter; supports unlimited nesting.
<ol> — numbered steps. type: 1 (default), A, a, I, i. start sets the first number.

Use <ul> for unordered sets (navigation menus, features) and <ol> for steps, instructions and rankings.

Lists & Tables

Description Lists & Nesting

<dl>
  <dt>HTML</dt>
  <dd>HyperText Markup Language - the structure of web pages</dd>
  <dt>CSS</dt>
  <dd>Cascading Style Sheets - the styling of web pages</dd>
</dl>

<dl> — description list container (glossaries, FAQs, metadata).
<dt> — description term (the word being defined).
<dd> — description definition (the explanation, indented).

Lists nest naturally by placing a new <ul>/<ol> inside an <li>.

List CSS tips

list-style-type: none — removes bullets (for nav menus).
list-style-image: url() — custom bullet image.
list-style-position: inside — bullet inside the box.

Lists & Tables

Tables — Basic Structure

<table>
  <caption>Student Grades</caption>
  <thead>
    <tr><th scope="col">Name</th><th scope="col">Grade</th></tr>
  </thead>
  <tbody>
    <tr><td>Aina</td><td>A</td></tr>
  </tbody>
  <tfoot>
    <tr><td colspan="2">Passed: 1</td></tr>
  </tfoot>
</table>

Element	Purpose
`<table>`	Container for the entire table
`<caption>`	Accessible title — place immediately after `<table>`
`<thead>`	Groups header row(s) — aids screen readers
`<tbody>`	Groups body rows (browser adds if omitted)
`<tfoot>`	Groups footer rows (totals, summaries)
`<tr>`	Table row
`<th>`	Header cell — bold by default; add `scope="col"` or `scope="row"`
`<td>`	Table data cell — regular content

Tables are for tabular data ONLY. Use CSS Grid or Flexbox for page layout.

Lists & Tables

Tables — Spanning, Alignment & Styling

colspan — span columns: <th colspan="3">Fruit Juice Drinks</th>
rowspan — span rows: <td rowspan="2">Shared Cell</td>
Alignment via CSS: text-align: center | right, vertical-align: top.

table { border-collapse: collapse; width: 100%; }
th, td { padding: 0.75rem 1rem; text-align: left; border-bottom: 1px solid #ddd; }
thead { background-color: #002137; }
tbody tr:hover { background-color: #0a2040; }

Deprecated HTML attributes → use CSS instead

align → text-align
cellspacing → border-spacing
bgcolor → background-color
valign → vertical-align
cellpadding → padding on td/th
border → the CSS border property

Lists & Tables

Activity — complete the code

Complete the list and table markup.

<ul>
  Home</li>
  <li>About</li>
</ul>
 
<table border="1">
  <tr>
    <>Name</th>
    <th>Age</th>
  </tr>
  <tr>
    Aina</td>
    <td>21</td>
  </tr>
</table>

Lesson

Forms & Input Validation

The <form> element, every major input type, grouping controls and HTML5 validation.

Forms & Input Validation

Forms — Introduction & <form> Tag

<form action="/submit.php" method="POST" autocomplete="on">
  <!-- form elements go here -->
</form>

Attribute	Purpose
`action`	URL of the server-side script that processes the form data
`method`	`GET` appends data to the URL; `POST` sends data in the request body (for sensitive data)
`novalidate`	Disables the browser's built-in validation (when validating with JavaScript)
`autocomplete`	`on`/`off` — enables/disables browser autocomplete
`enctype`	`multipart/form-data` — required when uploading files

GET: data in URL. Use for search/filters, bookmarkable. POST: data in body. Use for login/registration/payments.

Forms & Input Validation

Input Types

The <input> element changes behaviour based on its type attribute.

Type	Purpose
`text`	Single-line text
`password`	Masked input
`email`	Email with validation
`number`	Numeric with spinners
`tel`	Phone number field (supports `pattern`)
`url`	URL with validation
`search`	Search field
`date` / `time`	Date / time picker (HTML5)
`color`	Colour picker (HTML5)
`range`	Slider control (HTML5)
`checkbox`	Multi-select toggle
`radio`	Single-select group
`file`	File upload selector (supports `multiple`)
`hidden`	Not shown to the user
`submit` / `reset`	Submit form button / reset to defaults
`image`	Image submit button

Forms & Input Validation

Checkboxes & Radio Buttons

<fieldset>
  <legend>Grocery List</legend>
  <input type="checkbox" id="item1" name="item" value="tea" checked>
  <label for="item1">Tea</label>
  <input type="checkbox" id="item2" name="item" value="coffee">
  <label for="item2">Coffee</label>
</fieldset>

Checkboxes allow zero or more selections. Group with the same name to send an array of values; checked pre-selects an option.
Radios allow exactly ONE selection. All radios in a group must share the same name; checked pre-selects one.
Always pair every <input> with a <label> using matching id/for values, and group related controls with <fieldset> + <legend>.

Forms & Input Validation

Select, Textarea & Buttons

<select name="city">
  <optgroup label="East Malaysia">
    <option value="">-- Select --</option>
    <option value="kl">Kuala Lumpur</option>
    <option value="mlk" selected>Melaka</option>
  </optgroup>
</select>

<textarea name="message" rows="4"></textarea>

<button type="submit">Send Form</button>
<button type="reset">Clear Fields</button>
<button type="button" onclick="validate()">Check</button>

Prefer <button type="button"> over <input type="button"> — buttons can contain HTML. Always specify type to avoid accidental form submission.

Forms & Input Validation

HTML5 Validation

Attribute	Meaning
`required`	Field must not be empty
`minlength` / `maxlength`	Minimum / maximum number of characters
`min` / `max`	Minimum/maximum value for numbers and dates
`pattern`	Regular expression the value must match
`type="email"` / `type="url"`	Validates email / URL format automatically
`type="number"`	Enforces numeric input

<form>
  <label for="name">Name</label>
  <input type="text" id="name" name="name" required>

  <label for="email">Email</label>
  <input type="email" id="email" name="email" required>

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

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

HTML5 validation is a first layer only. Always validate on the server side too — client validation can be bypassed.

Forms & Input Validation

Activity — complete the code

Complete the form so it posts an email address and requires it.

<form action="/submit.php" ="POST">
  <label for="email">Email</label>
  <input type="" id="email" name="email" >
  <button type="">Send</button>
</form>

Lesson

Semantic HTML, Accessibility & Best Practices

Meaningful structure, ARIA, and the 2025 rules for structure, accessibility, performance and security.

Semantic HTML, Accessibility & Best Practices

Semantic HTML5

Semantic elements describe their meaning instead of using generic containers.

<!-- Old, non-semantic -->
<div id="header">...</div>
<div id="main">...</div>
<div id="footer">...</div>

<!-- Modern, semantic -->
<header>...</header>
<main>...</main>
<footer>...</footer>

Why semantics matter

Accessibility — screen readers use semantic elements to navigate; users can jump to <main> or <nav>.
Readability — self-documenting code; other developers understand the structure immediately.
SEO — search engines understand content hierarchy; <article> signals main content.
Styling hooks — clean CSS selectors such as header {}, nav a {}, footer {}.

Semantic HTML, Accessibility & Best Practices

Semantic Page Layout

Element	Role
`<header>`	Introductory content or nav group for the page or a section. Can appear multiple times.
`<nav>`	Primary navigation links — main menu, breadcrumbs, pagination.
`<main>`	Dominant content — unique per page. Target for skip navigation links.
`<article>`	Self-contained content: blog post, news article, forum post, product card.
`<section>`	Thematic grouping with a heading. Use when content doesn't fit another semantic tag.
`<aside>`	Tangentially related: sidebar, pull quote, advertising, related links.
`<footer>`	Footer info: copyright, author, links. Can appear inside `<article>` too.

Prefer semantic tags over <div>. Reserve <div> for CSS layout containers with no semantic meaning.

Semantic HTML, Accessibility & Best Practices

Accessibility — ARIA & Best Practices

ARIA (Accessible Rich Internet Applications) adds semantic information for assistive technologies.

ARIA roles

role="main" — primary page content
role="navigation" — navigation landmark
role="complementary" — sidebar content
role="contentinfo" — footer / copyright area
role="alert" — dynamic alert messages

ARIA attributes

aria-label — accessible name, e.g. <button aria-label="Close">
aria-labelledby — references another element's text as label
aria-describedby — references a description element's id
aria-hidden="true" — hides from assistive technology
aria-expanded — state of collapsible content (true/false)
aria-required — marks a field as required for assistive technology

Core accessibility rules

Use semantic HTML first — ARIA supplements, it doesn't replace.
Every image needs alt text (empty alt="" for decorative).
Every form input needs a linked <label>.
Ensure sufficient colour contrast (4.5:1 for text, 3:1 for UI).
Test with a screen reader (NVDA, VoiceOver).

Semantic HTML, Accessibility & Best Practices

HTML Best Practices (2025)

Structure

Always include <!DOCTYPE html> as the first line.
Add lang to <html>: <html lang="en">.
Use one <h1> per page; don't skip heading levels.
Use semantic elements over generic <div>.

Accessibility

Every <img> must have descriptive alt text.
Every <input> must have a paired <label>.
Use <button> for actions, <a> for navigation.
Ensure a 4.5:1 colour contrast ratio for text.
Support keyboard navigation (tabindex, focus styles).

Performance

Lazy-load images below the fold.
Specify width and height on all images.
Use modern formats: AVIF/WebP over JPEG/PNG.
Use <link rel="preload"> for critical resources.
Minimise inline styles — use external CSS.

Security

Add rel="noopener noreferrer" with target="_blank".
Never put sensitive data in HTML comments.
Validate all form input on the SERVER side.
Use Content-Security-Policy headers.
Sanitise user-generated content before display.

Semantic HTML, Accessibility & Best Practices

Key Takeaways

HTML is the Living Standard — continuously updated, not versioned.
Elements = opening tag + content + closing tag (or a void element).
Always use semantic elements: <header>, <main>, <article>, <footer>.
HTML5 input types give built-in validation: email, date, url, tel.
Images need src, alt, width, height and loading="lazy".
Forms: pair every <input> with a <label> using id/for attributes.
Tables = data structure only; use CSS Grid/Flex for page layout.
Accessibility + SEO: use alt, lang, ARIA, semantic structure.
Security: noopener on new tabs, validate server-side, no secrets in comments.
Performance: lazy-load images, specify dimensions, use AVIF/WebP.

Semantic HTML, Accessibility & Best Practices

Activity — complete the code

Complete the semantic page structure.

<>
  <h1>My Blog</h1>
  <nav>...</nav>
</header>
<>
  <article>
    <h2>Post title</h2>
  </article>
</main>
<>
  <p>&copy; 2025</p>
</footer>