HTML: HyperText Markup Language
What is HTML?
HTML (HyperText Markup Language) is the standard markup language used to create
and structure content on the web. It provides the skeleton of a webpage by using 'tags'
to describe elements such as headings, paragraphs, links, images, lists, forms, and
more. Browsers read HTML and render it into the web pages you interact with.
Why is HTML useful?
HTML is useful because it forms the foundation of every website. Without HTML,
browsers would have no way to know how to display text, embed images or videos,
organize content, or link pages together. HTML works together with CSS (for styling) and
JavaScript (for behavior) to create interactive, accessible, and visually attractive
websites.
A 2–3 Page Overview of HTML
The following sections cover the most important parts of HTML you should know as a
beginner. Read each section carefully and try the examples.
Basic Document Structure
Every HTML document follows a simple structure. Here's the minimal template:
<!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>
<!-- Page content goes here -->
</body>
</html>
The <head> contains meta information and the <body> contains the visible content.
Common HTML Tags
Here are the tags you will use most frequently:
• Headings: <h1> to <h6> — used for titles and subheadings.
• Paragraph: <p> — for blocks of text.
• Anchor/link: <a href="URL"> — to link to other pages or resources.
• Image: <img src="path" alt="description"> — to show images (alt is important for
accessibility).
• List: <ul> (unordered) and <ol> (ordered) with <li> items.
• Division: <div> — generic container; <span> — inline container.
• Table: <table>, <tr> (rows), <td> (cells), <th> (headers).
• Form elements: <form>, <input>, <label>, <textarea>, <button>, <select>, <option>.
Attributes
Tags can have attributes to provide extra information. For example, <a
href="https://example.com" target="_blank"> opens a link in a new tab. The 'alt' attribute
on images provides text when the image can't load and helps screen readers.
Semantic HTML
Semantic tags give meaning to the content, which improves accessibility and SEO.
Examples include:
• <header> — top part of a page or section
• <nav> — navigation links
• <main> — main content
• <article> — self-contained content
• <section> — thematic grouping
• <aside> — sidebar or tangential content
• <footer> — page footer
Forms and User Input
Forms collect user data. Important attributes include 'action' (where the form data is
sent) and 'method' ('GET' or 'POST'). Always pair <label> elements with inputs for
accessibility.
Links, Images and Media
Use <a> to connect pages and <img> to add images. You can embed videos with
<video> and audio with <audio>, or embed content from other sites using <iframe>.
Lists and Tables
Lists are great for steps or grouped items. Tables are for tabular data. Avoid using tables
for layout — use CSS instead.
Intro to CSS and JavaScript
HTML defines structure. CSS (Cascading Style Sheets) controls how things look (colors,
spacing, layout). JavaScript adds interactivity (click handlers, form validation, dynamic
updates). Together they create modern websites.
Best Practices
1. Write semantic, accessible HTML (use alt text, labels, and meaningful tags).
2. Keep structure and style separate (HTML for content, CSS for styling).
3. Use valid, well-formed HTML and close tags where required.
4. Keep content organized and commented for maintainability.
5. Test pages on different devices and browsers.
Exercises
Exercise 1 — Create a Simple Webpage (Practical)
Task: Build a single HTML file named 'index.html' with the following:
• A title in the head and an <h1> heading.
• A short paragraph about yourself.
• An image with alt text.
• A list of three favourite websites with clickable links.
• A simple form that asks for name and email and has a submit button.
Stretch goals:
• Add a navigation bar using <nav> and internal page links.
• Add semantic sections using <section> and <article>.
• Use comments to explain your code.
Exercise 2 — Identify Tags (Theory)
Read the short HTML snippet below and answer the questions that follow:
<!DOCTYPE html>
<html>
<head>
<title>My Test Page</title>
</head>
<body>
<h2>Welcome</h2>
<p>This is a <strong>test</strong> page.</p>
<a href="https://example.com">Visit</a>
</body>
</html>
Questions:
1. Which tag contains the visible content?
2. Which tag sets the page title seen on the browser tab?
3. What does the <strong> tag do?
Exercise 3 — Short Answers
1. Why is the 'alt' attribute important on <img> tags?
2. What is the purpose of the <meta name="viewport"> tag?
3. Name two semantic tags and their use.
How to Submit
Save your 'index.html' file and any images in a single folder. Compress the folder to
a .zip and submit it via your teacher's submission platform or attach it to an email.
Good luck! Try to complete the practical exercise — building a webpage is the best way
to learn HTML.
