HTML Learning Path for Beginners

Lesson overview

Build a meaningful web page from the structure up

Each topic adds part of the final Personal Learning Profile Page.

What is HTML? Document structure Headings and paragraphs Links and images Lists Semantic HTML Tables Forms and accessibility SEO basics Final mini project

Topic 1

What is HTML?

HTML describes the structure and meaning of webpage content.

Webpage->Sections->Elements

HTML as the structure layer

HTML tells the browser what each piece of content means: heading, paragraph, link, list, image, table or form field.

<h1>My Learning Profile</h1>
<p>I am learning web development step by step.</p>

Real-life example: A profile page uses headings for sections, lists for skills and links for projects.

Why this matters: It helps you give the Personal Learning Profile Page clear structure and meaning.

How to understand this example: Read it from top to bottom. First notice the key word, then notice the value, element or result it controls.

Key words for this subtopic
Key word	Simple meaning	Why we use it	Tiny example
HTML as the structure layer	The main idea in this part of the lesson	It gives you one building block for the final project	`<h1>My Learning Profile</h1> <p>I am learning web d...`
example	A small sample that shows the idea	It helps you see how the concept looks in practice	`<h1>My Learning Profile</h1> <p>I am learning web d...`
mini-project task	A small build step after the exercise	It turns the lesson into part of the Personal Learning Profile Page	Personal Learning Profile Page

Quick exercise

Name three types of content you would put on a personal learning page.

Mini-project task

Write the goal of your Personal Learning Profile Page.

HTML, CSS and JavaScript comparison

HTML gives structure, CSS controls visual style and JavaScript adds behaviour.

<button>View progress</button>

Beginner mistake to avoid

Do not use HTML tags only because they look a certain size. Use them for meaning first.

Why this matters: It helps you give the Personal Learning Profile Page clear structure and meaning.

How to understand this example: Read it from top to bottom. First notice the key word, then notice the value, element or result it controls.

Key words for this subtopic
Key word	Simple meaning	Why we use it	Tiny example
HTML, CSS and JavaScript comparison	The main idea in this part of the lesson	It gives you one building block for the final project	`<button>View progress</button>`
example	A small sample that shows the idea	It helps you see how the concept looks in practice	`<button>View progress</button>`
mini-project task	A small build step after the exercise	It turns the lesson into part of the Personal Learning Profile Page	Personal Learning Profile Page

Quick exercise

Which language controls page structure?

Mini-project task

List the main sections your profile page will need.

Topic checkpoint

You can explain HTML as the meaning and structure layer of a webpage.

Topic 2

HTML document structure

Every page needs a reliable base structure.

html, head, title, body and meta tags

The head is information about the page, mostly for the browser and search engines. The body is the visible content people see on the page.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Learning Profile</title>
</head>
<body>
  <h1>My Learning Profile</h1>
</body>
</html>

Why this matters: It helps you give the Personal Learning Profile Page clear structure and meaning.

How to understand this example: Read it from top to bottom. First notice the key word, then notice the value, element or result it controls.

Key words for this subtopic
Key word	Simple meaning	Why we use it	Tiny example
html, head, title, body and meta tags	The main idea in this part of the lesson	It gives you one building block for the final project	`head`
example	A small sample that shows the idea	It helps you see how the concept looks in practice	`head`
mini-project task	A small build step after the exercise	It turns the lesson into part of the Personal Learning Profile Page	Personal Learning Profile Page

Quick exercise

Which part contains visible page content?

Mini-project task

Create the base profile page file structure.

Why viewport matters

The viewport meta tag helps mobile browsers scale the page correctly.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Beginner mistake to avoid

Skipping the viewport tag can make mobile pages appear zoomed out or awkward.

Why this matters: It helps you give the Personal Learning Profile Page clear structure and meaning.

How to understand this example: Read it from top to bottom. First notice the key word, then notice the value, element or result it controls.

Key words for this subtopic
Key word	Simple meaning	Why we use it	Tiny example
Why viewport matters	The main idea in this part of the lesson	It gives you one building block for the final project	`<meta name="viewport" content="width=device-width, ...`
example	A small sample that shows the idea	It helps you see how the concept looks in practice	`<meta name="viewport" content="width=device-width, ...`
mini-project task	A small build step after the exercise	It turns the lesson into part of the Personal Learning Profile Page	Personal Learning Profile Page

Quick exercise

Find the viewport line in the example structure.

Mini-project task

Add charset, viewport and title to your profile page.

Topic checkpoint

Your final page now has a correct HTML foundation.

Topic 3

Headings and paragraphs

Headings create hierarchy and paragraphs explain content.

h1 to h6 and p

Use one clear h1 for the page topic, then use lower headings for sections.

<h1>Aisha's Learning Profile</h1>
<h2>Current Goal</h2>
<p>I am learning HTML, CSS and JavaScript to build beginner projects.</p>

Beginner mistake to avoid

Do not skip heading levels only to make text look bigger. Style size with CSS later.

Why this matters: It helps you give the Personal Learning Profile Page clear structure and meaning.

How to understand this example: Read it from top to bottom. First notice the key word, then notice the value, element or result it controls.

Key words for this subtopic
Key word	Simple meaning	Why we use it	Tiny example
h1 to h6 and p	The main idea in this part of the lesson	It gives you one building block for the final project	`h1`
example	A small sample that shows the idea	It helps you see how the concept looks in practice	`h1`
mini-project task	A small build step after the exercise	It turns the lesson into part of the Personal Learning Profile Page	Personal Learning Profile Page

Quick exercise

Write one h1 and one h2 for your page.

Mini-project task

Add a profile heading and introduction paragraph.

Topic checkpoint

Your profile page has a readable title and introduction.

Topic 4

Links and images

Links connect pages. Images need useful alt text.

Links and navigation

The a element links to pages, sections or external sites. Use clear link text.

<nav>
  <a href="#skills">Skills</a>
  <a href="#projects">Projects</a>
  <a href="#projects">Projects</a>
</nav>

Why this matters: It helps you give the Personal Learning Profile Page clear structure and meaning.

How to understand this example: Read it from top to bottom. First notice the key word, then notice the value, element or result it controls.

Key words for this subtopic
Key word	Simple meaning	Why we use it	Tiny example
Links and navigation	The main idea in this part of the lesson	It gives you one building block for the final project	`a`
example	A small sample that shows the idea	It helps you see how the concept looks in practice	`a`
mini-project task	A small build step after the exercise	It turns the lesson into part of the Personal Learning Profile Page	Personal Learning Profile Page

Quick exercise

Why is "View my projects" better than "Click here"?

Mini-project task

Add navigation links to your profile sections.

Images and alt text

Use alt text to describe meaningful images. Decorative images can have empty alt text.

<img src="learning-profile.png" alt="Screenshot of my learning profile project">

Beginner mistake to avoid

Do not write "image of image" as alt text. Explain the useful meaning.

Why this matters: It helps you give the Personal Learning Profile Page clear structure and meaning.

How to understand this example: Read it from top to bottom. First notice the key word, then notice the value, element or result it controls.

Key words for this subtopic
Key word	Simple meaning	Why we use it	Tiny example
Images and alt text	The main idea in this part of the lesson	It gives you one building block for the final project	`alt`
example	A small sample that shows the idea	It helps you see how the concept looks in practice	`alt`
mini-project task	A small build step after the exercise	It turns the lesson into part of the Personal Learning Profile Page	Personal Learning Profile Page

Quick exercise

Write alt text for a screenshot of your first webpage.

Mini-project task

Add a profile or learning image placeholder with meaningful alt text.

Topic checkpoint

Your page can now link between sections and include accessible image descriptions.

Topic 5

Lists

Lists group related items clearly.

ul, ol and li

Use unordered lists for general items and ordered lists when sequence matters.

<h2>Skills I am learning</h2>
<ul>
  <li>HTML structure</li>
  <li>CSS layout</li>
  <li>JavaScript interaction</li>
</ul>

Why this matters: It helps you give the Personal Learning Profile Page clear structure and meaning.

How to understand this example: Read it from top to bottom. First notice the key word, then notice the value, element or result it controls.

Key words for this subtopic
Key word	Simple meaning	Why we use it	Tiny example
ul, ol and li	The main idea in this part of the lesson	It gives you one building block for the final project	`<h2>Skills I am learning</h2> <ul> <li>HTML structu...`
example	A small sample that shows the idea	It helps you see how the concept looks in practice	`<h2>Skills I am learning</h2> <ul> <li>HTML structu...`
mini-project task	A small build step after the exercise	It turns the lesson into part of the Personal Learning Profile Page	Personal Learning Profile Page

Quick exercise

Should project steps use ul or ol?

Mini-project task

Add skills and learning goals lists to your profile page.

Topic checkpoint

Your profile page now shows skills and goals in a scannable way.

Topic 6

Semantic HTML

Semantic elements explain the role of page areas.

headernavmainsectionfooter

header, nav, main, section, article, aside and footer

Semantic structure helps accessibility, SEO and future maintenance.

<header>...intro content...</header>
<main>
  <section id="skills">...skills...</section>
  <section id="projects">...projects...</section>
</main>
<footer>...contact links...</footer>

Why this matters: It helps you give the Personal Learning Profile Page clear structure and meaning.

How to understand this example: Read it from top to bottom. First notice the key word, then notice the value, element or result it controls.

Key words for this subtopic
Key word	Simple meaning	Why we use it	Tiny example
header, nav, main, section, article, aside and footer	The main idea in this part of the lesson	It gives you one building block for the final project	`<header>...intro content...</header> <main> <sectio...`
example	A small sample that shows the idea	It helps you see how the concept looks in practice	`<header>...intro content...</header> <main> <sectio...`
mini-project task	A small build step after the exercise	It turns the lesson into part of the Personal Learning Profile Page	Personal Learning Profile Page

Quick exercise

Which element should wrap the main unique content of the page?

Mini-project task

Restructure your profile page with semantic elements.

Topic checkpoint

Your page has meaningful sections instead of generic blocks only.

Topic 7

Tables

Use tables for data, not layout.

table, caption, thead, tbody, tr, th and td

Tables work well for weekly schedules, marks or structured comparisons.

<table>
  <caption>Weekly learning schedule</caption>
  <thead>
    <tr><th>Day</th><th>Topic</th><th>Time</th></tr>
  </thead>
  <tbody>
    <tr><td>Monday</td><td>HTML</td><td>45 mins</td></tr>
  </tbody>
</table>

Why this matters: It helps you give the Personal Learning Profile Page clear structure and meaning.

How to understand this example: Read it from top to bottom. First notice the key word, then notice the value, element or result it controls.

Key words for this subtopic
Key word	Simple meaning	Why we use it	Tiny example
table, caption, thead, tbody, tr, th and td	The main idea in this part of the lesson	It gives you one building block for the final project	`<table> <caption>Weekly learning schedule</caption>...`
example	A small sample that shows the idea	It helps you see how the concept looks in practice	`<table> <caption>Weekly learning schedule</caption>...`
mini-project task	A small build step after the exercise	It turns the lesson into part of the Personal Learning Profile Page	Personal Learning Profile Page

Quick exercise

What should a table caption explain?

Mini-project task

Add a weekly learning schedule table.

Topic checkpoint

Your profile page can include structured schedule data.

Topic 8

Forms and accessibility

Forms collect input only when connected to a real process. This lesson uses a non-submitting example.

Forms basics

Forms use labels and controls such as input, textarea, select and button. A static demo form does not send data anywhere.

<form action="#" aria-label="Learning reflection example">
  <label for="reflection">What did I learn today?</label>
  <textarea id="reflection" name="reflection"></textarea>
  <button type="button">Example button only</button>
</form>

Beginner mistake to avoid

Do not pretend a static form submits messages. It needs a real backend or service later.

Why this matters: It helps you give the Personal Learning Profile Page clear structure and meaning.

How to understand this example: Read it from top to bottom. First notice the key word, then notice the value, element or result it controls.

Key words for this subtopic
Key word	Simple meaning	Why we use it	Tiny example
Forms basics	The main idea in this part of the lesson	It gives you one building block for the final project	`<form action="#" aria-label="Learning reflection ex...`
example	A small sample that shows the idea	It helps you see how the concept looks in practice	`<form action="#" aria-label="Learning reflection ex...`
mini-project task	A small build step after the exercise	It turns the lesson into part of the Personal Learning Profile Page	Personal Learning Profile Page

Quick exercise

Why should every input have a label?

Mini-project task

Create a non-submitting learning reflection form example.

Accessibility basics

Use labels, alt text, heading order, meaningful link text and keyboard-friendly structure.

<a href="#projects">View my beginner projects</a>

Why this matters: It helps you give the Personal Learning Profile Page clear structure and meaning.

How to understand this example: Read it from top to bottom. First notice the key word, then notice the value, element or result it controls.

Key words for this subtopic
Key word	Simple meaning	Why we use it	Tiny example
Accessibility basics	The main idea in this part of the lesson	It gives you one building block for the final project	`<a href="#projects">View my beginner projects</a>`
example	A small sample that shows the idea	It helps you see how the concept looks in practice	`<a href="#projects">View my beginner projects</a>`
mini-project task	A small build step after the exercise	It turns the lesson into part of the Personal Learning Profile Page	Personal Learning Profile Page

Quick exercise

Replace "click here" with more meaningful link text.

Mini-project task

Review your profile page for labels, alt text and heading order.

Topic checkpoint

Your page is easier to understand for people and assistive technologies.

Topic 9

SEO basics for HTML

Good HTML makes page purpose clearer to search engines and users.

title, meta description, headings and semantic structure

The title and meta description summarise the page. Clear headings and semantic sections support readability.

<title>Aisha's Learning Profile</title>
<meta name="description" content="A beginner learning profile showing skills, goals and projects.">

Why this matters: It helps you give the Personal Learning Profile Page clear structure and meaning.

How to understand this example: Read it from top to bottom. First notice the key word, then notice the value, element or result it controls.

Key words for this subtopic
Key word	Simple meaning	Why we use it	Tiny example
title, meta description, headings and semantic structure	The main idea in this part of the lesson	It gives you one building block for the final project	`<title>Aisha's Learning Profile</title> <meta name=...`
example	A small sample that shows the idea	It helps you see how the concept looks in practice	`<title>Aisha's Learning Profile</title> <meta name=...`
mini-project task	A small build step after the exercise	It turns the lesson into part of the Personal Learning Profile Page	Personal Learning Profile Page

Quick exercise

Write a 140-character description for your profile page.

Mini-project task

Add beginner SEO tags to your profile page.

Topic checkpoint

Your final page has basic metadata and a clear content structure.

Final mini project

Personal Learning Profile Page

This project combines document structure, headings, paragraphs, links, images, lists, semantic sections, tables, form basics, accessibility and SEO.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="A beginner learning profile showing skills, goals and projects.">
  <title>My Learning Profile</title>
</head>
<body>
  <header>
    <h1>My Learning Profile</h1>
    <p>I am building web skills through structured beginner projects.</p>
    <nav>
      <a href="#skills">Skills</a>
      <a href="#schedule">Schedule</a>
      <a href="#projects">Projects</a>
    </nav>
  </header>

  <main>
    <section id="skills">
      <h2>Skills I am learning</h2>
      <ul>
        <li>Semantic HTML</li>
        <li>Responsive CSS</li>
        <li>JavaScript interaction</li>
      </ul>
    </section>

    <section id="schedule">
      <h2>Weekly schedule</h2>
      <table>
        <caption>My study plan</caption>
        <tr><th>Day</th><th>Topic</th></tr>
        <tr><td>Monday</td><td>HTML</td></tr>
      </table>
    </section>
  </main>

  <footer>
    <p>Built as a beginner HTML project.</p>
  </footer>
</body>
</html>

Explain each section

The header introduces the learner, main contains skills and schedule content, and footer gives a simple project note.

Upgrade ideas

Add CSS styling
Add JavaScript interaction
Add project cards
Add a progress table
Add a downloadable CV link later

Next step

Style your HTML with CSS

HTML gives structure. CSS turns that structure into a polished responsive layout.

Continue to CSS Learn JavaScript