Chapter 1 deck Chapter 2 deck Chapter 3 deck Chapter 4 deck Chapter 5 deck Chapter 6 deck Chapter 7 deck Chapter 8 deck Chapter 9 deck Chapter 10 deck Chapter 11 deck Chapter 12 deck Chapter 13 deck Chapter 14 deck

What is HTML? Structure, Elements & Attributes

9 slides · use ←/→ or Space to navigate, F for fullscreen.

Reading view

← Back to the full Chapter 2 deck

Fullscreen for presentation · Print / PDF for a handout

1 / 9

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>