# Unit 2: HTML Pages (DS194) ## Structure of an HTML Page - An HTML document has a **document type declaration** and a hierarchy of **nested elements**. - Basic skeleton: ``` My Page

Welcome

This is a paragraph.

``` - **``**: tells the browser to use HTML5 standards mode (not a tag). - The structure forms a **tree**: `html` is the **root**, with `head` and `body` as children. ## Mandatory Tags ### `` - **Root element** that wraps the entire page. - Attribute `lang="en"` helps screen readers and search engines. ### `` - Holds **metadata not displayed on the page**. - Typical content: - ``: page title shown in the browser tab and search results. - `<meta charset="UTF-8">`: character encoding. - `<meta name="viewport">`: responsive scaling on mobiles. - `<meta name="description">`: summary for search engines. - `<link>`: attach CSS or icons. - `<style>`: internal CSS. - `<script>`: JavaScript. ### `<body>` - Contains **all visible content**: text, images, links, lists, tables, forms, media. - Common body elements: headings `<h1>` to `<h6>`, paragraph `<p>`, `<a href="">`, `<img src="" alt="">`, `<ul>/<ol>/<li>`, `<table>`, `<form>`, `<div>`, `<span>`, and semantic tags. ## Other Useful Points - Tags are **not case-sensitive**, but lowercase is the convention. - Most tags come in pairs; **void elements** (`<br>`, `<img>`, `<hr>`, `<input>`, `<meta>`) have no closing tag. - **Nesting** must be proper: close inner tags before outer ones. - **Comments**: ``. - File extension: `.html` or `.htm`; the home page is commonly **index.html**. - **Validate** with the W3C validator. - **Block** elements (div, p, h1) start on a new line; **inline** elements (span, a, strong) flow within text. ## Table of Key Tags | Tag | Purpose | |---|---| | `<html>` | Root of document | | `<head>` | Metadata | | `<title>` | Page title | | `<body>` | Visible content | | `<h1>-<h6>` | Headings | | `<p>` | Paragraph | | `<a>` | Hyperlink | | `<img>` | Image | **[Figure: HTML document tree]** Root html node with two branches, head (title, meta, link) and body (h1, p, img, a). ## Likely Exam Questions 1. Write the basic structure of an HTML5 page. (long answer) 2. What is the purpose of `<!DOCTYPE html>`? (2 marks) 3. Explain the `<head>` and `<body>` tags. (long answer) 4. Differentiate block and inline elements. (2 marks) 5. What are void elements? Give examples. (2 marks)</article></body></html>