Build Your First Solid Foundation in HTML
HTML is the foundation of every webpage on the internet. It provides the structure that allows browsers to display text, images, links, tables, forms and other content in an organised way.
In this beginner-friendly course, you will learn the essential concepts of HTML, understand how a basic webpage is constructed and practise using common HTML elements and attributes.
By the end of the course, you will be able to create a simple, well-structured and accessible webpage of your own.
Learning Outcomes
What you will be able to do after completing this course.
After completing the lessons and practical activities, you should be able to perform the following tasks confidently.
- Explain what HTML is and how it is used to structure webpages.
- Identify the basic structure of an HTML document.
- Use headings, paragraphs, line breaks and horizontal lines.
- Create simple tables using rows, columns and headings.
- Build forms with text fields, labels, buttons, checkboxes and radio buttons.
-
Use semantic elements such as
<header>,<nav>,<main>,<section>,<article>and<footer>. -
Apply attributes such as
id,class,href,src,titleandtarget. - Organise HTML code using proper indentation and comments.
- Identify and correct common HTML syntax errors.
- Create a complete basic webpage using valid HTML.
- Understand accessibility and meaningful page structure.
Course Roadmap
Follow the course in order or select a lesson to review.
Each lesson introduces a new concept, provides working examples and ends with a practical activity.
What Is HTML?
Understand the role of HTML in a webpage.
HTML stands for HyperText Markup Language. It is the standard markup language used to describe the structure and meaning of content on a webpage.
HTML does not normally control the visual appearance of a page by itself. Instead, HTML defines the structure, CSS controls the appearance and JavaScript can add interactive behaviour.
HTML
Defines the structure and meaning of webpage content.
Examples include headings, paragraphs, images, links, tables and forms.
Web Browser
Reads the HTML document and displays its content as a webpage.
Examples include Chrome, Firefox, Edge and Safari.
Your First HTML Elements
<h1>Welcome to My Webpage</h1>
<p>This is my first HTML paragraph.</p>
The browser understands that the content inside
<h1> is the main heading and that the content
inside <p> is a paragraph.
Practice Activity
- Open a basic text editor.
- Type the HTML example shown above.
- Save the file as
lesson1.html. - Open the file using a web browser.
Knowledge Check: What does HTML control?
HTML primarily controls the structure and meaning of webpage content. CSS is normally used to control the visual design.
The Basic Structure of an HTML Document
Learn how a complete HTML file is organised.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First Webpage</title>
</head>
<body>
<h1>Welcome to My Webpage</h1>
<p>This is my first complete HTML document.</p>
</body>
</html>| HTML Code | Purpose |
|---|---|
<!DOCTYPE html> |
Tells the browser that the document uses modern HTML. |
<html lang="en"> |
Contains the entire HTML document. The
lang attribute identifies the main language.
|
<head> |
Contains information about the page that is not normally displayed as the main content. |
<title> |
Sets the title shown in the browser tab. |
<body> |
Contains the visible webpage content. |
lang attribute. It helps browsers,
search engines and assistive technologies understand the language
of the page.
Practice Activity
Create a complete HTML document with the following:
- A browser title of My Practice Page.
- A main heading containing your name.
- A paragraph explaining why you are learning HTML.
View Suggested Answer
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Practice Page</title>
</head>
<body>
<h1>My Name Is Alex</h1>
<p>I am learning HTML so that I can create my own webpages.</p>
</body>
</html>Headings, Paragraphs and Text Structure
Organise written content clearly and logically.
Headings
HTML provides six heading levels, from
<h1> to <h6>. The
<h1> element normally represents the main page
heading.
<h1>Main Page Title</h1>
<h2>Main Section</h2>
<h3>Subsection</h3>
<h4>Smaller Subsection</h4>Paragraphs
<p>
HTML paragraphs are created using the paragraph element.
</p>Line Breaks
The <br> element starts a new line without
creating a new paragraph.
<p>
Lemon Web Learning Centre<br>
Kuala Lumpur<br>
Malaysia
</p>Horizontal Lines
The <hr> element represents a thematic break or
change of topic.
<h2>Chapter One</h2>
<p>Content for the first chapter.</p>
<hr>
<h2>Chapter Two</h2>
<p>Content for the second chapter.</p>Practice Activity
Create an “About Me” section containing:
- One main heading.
- Two subsection headings.
- At least three paragraphs.
- One horizontal line between the sections.
View Suggested Structure
<h1>About Me</h1>
<h2>My Background</h2>
<p>My name is Alex and I live in Kuala Lumpur.</p>
<p>I am interested in technology and web development.</p>
<hr>
<h2>Why I Am Learning HTML</h2>
<p>I want to create useful and accessible websites.</p>Links, Images and HTML Attributes
Add information and functionality to HTML elements.
id,
class, href, src,
title and target.
An HTML attribute provides additional information about an element. Attributes are normally placed inside the opening tag.
<element attribute="value">Content</element>Creating a Link
<a href="https://example.com">Visit Example Website</a>
The href attribute specifies where the link should
take the visitor.
Opening a Link in a New Tab
<a
href="https://example.com"
target="_blank"
rel="noopener"
>
Open Example Website
</a>Adding an Image
<img src="/images/html-course.jpg"
alt="Student learning HTML on a laptop"
title="HTML Learning Course"
>
The src attribute identifies the image file. The
alt attribute describes the image when it cannot be
seen or loaded.
Using ID and Class Attributes
<section id="about-section" class="content-section">
<h2>About Us</h2>
<p>Learn more about our organisation.</p>
</section>| Attribute | Purpose |
|---|---|
id |
Provides a unique identifier for one element. |
class |
Groups one or more elements for styling or scripting. |
href |
Defines the destination of a link. |
src |
Defines the source file used by an image or media element. |
title |
Provides additional advisory information about an element. |
target |
Controls where a linked document is opened. |
Practice Activity
- Create a heading with the text “Useful Resources”.
- Add a link to a website that you frequently visit.
- Make the link open in a new tab.
- Add an image with meaningful alternative text.
-
Give the section a unique
id.
View Suggested Answer
<section id="useful-resources" class="content-section">
<h2>Useful Resources</h2>
<p>
<a
href="https://example.com"
target="_blank"
rel="noopener"
>
Visit Example Website
</a>
</p>
<img src="/images/learning.jpg"
alt="Open notebook beside a laptop"
>
</section>Creating Simple Tables
Display related information using rows and columns.
| Element | Purpose |
|---|---|
<table> |
Contains the entire table. |
<caption> |
Provides a meaningful title for the table. |
<thead> |
Groups the table heading rows. |
<tbody> |
Groups the main table data. |
<tr> |
Creates one table row. |
<th> |
Creates a table heading cell. |
<td> |
Creates a standard table data cell. |
Complete Table Example
<table>
<caption>Weekly Class Schedule</caption>
<thead>
<tr>
<th scope="col">Day</th>
<th scope="col">Topic</th>
<th scope="col">Time</th>
</tr>
</thead>
<tbody>
<tr>
<td>Monday</td>
<td>HTML Basics</td>
<td>9:00 AM</td>
</tr>
<tr>
<td>Wednesday</td>
<td>HTML Forms</td>
<td>9:00 AM</td>
</tr>
</tbody>
</table>scope="col" for column headings and
scope="row" for row headings. This helps screen
readers connect table headings with their data.
Practice Activity
Create a table containing three columns:
- Course name
- Difficulty level
- Completion status
Add at least three rows of course information.
Building Basic HTML Forms
Collect information from webpage visitors.
Text Field and Label
<label for="full-name">Full Name</label>
<input
type="text"
id="full-name"
name="full_name"
>
The label's for value must match the input's
id. This allows visitors to activate the input by
selecting its label.
Checkbox
<input
type="checkbox"
id="email-updates"
name="email_updates"
>
<label for="email-updates">
Send me email updates
</label>Radio Buttons
<p>Choose your experience level:</p>
<input
type="radio"
id="level-beginner"
name="experience_level"
value="beginner"
>
<label for="level-beginner">Beginner</label>
<input
type="radio"
id="level-intermediate"
name="experience_level"
value="intermediate"
>
<label for="level-intermediate">Intermediate</label>
Radio buttons must share the same name when the visitor
should select only one option.
Complete Form Example
<form action="#" method="post">
<div>
<label for="student-name">Full Name</label>
<input
type="text"
id="student-name"
name="student_name"
required
>
</div>
<div>
<label for="student-email">Email Address</label>
<input
type="email"
id="student-email"
name="student_email"
required
>
</div>
<fieldset>
<legend>Preferred Learning Method</legend>
<input
type="radio"
id="method-video"
name="learning_method"
value="video"
>
<label for="method-video">Video lessons</label>
<input
type="radio"
id="method-reading"
name="learning_method"
value="reading"
>
<label for="method-reading">Reading materials</label>
</fieldset>
<div>
<input
type="checkbox"
id="accept-terms"
name="accept_terms"
required
>
<label for="accept-terms">
I agree to the course terms
</label>
</div>
<button type="submit">Register</button>
</form>Practice Activity
Create a course feedback form containing:
- A name field.
- An email field.
- Radio buttons for “Excellent”, “Good” and “Needs Improvement”.
- A checkbox asking permission to contact the learner.
- A submit button.
Using Semantic HTML Elements
Give each part of the webpage a clear meaning.
Semantic HTML elements describe the purpose of their content. They help browsers, search engines, developers and assistive technologies understand how a page is organised.
| Element | Typical Purpose |
|---|---|
<header> |
Introductory content for a page or section. |
<nav> |
A group of important navigation links. |
<main> |
The main content that is unique to the page. |
<section> |
A themed group of related content. |
<article> |
Independent content that can stand on its own. |
<footer> |
Footer information for a page or section. |
Semantic Page Example
<header>
<h1>Learning HTML</h1>
<nav aria-label="Main navigation">
<a href="#about">About</a>
<a href="#lessons">Lessons</a>
<a href="#contact">Contact</a>
</nav>
</header>
<main>
<section id="about">
<h2>About This Course</h2>
<p>This course introduces the fundamentals of HTML.</p>
</section>
<section id="lessons">
<h2>Latest Lessons</h2>
<article>
<h3>Understanding HTML Headings</h3>
<p>Learn how headings organise webpage content.</p>
</article>
</section>
</main>
<footer>
<p>© 2026 HTML Learning Centre</p>
</footer><main> element. It represents the primary content
of that page.
Practice Activity
Rewrite one of your earlier practice pages using the following structure:
-
<header>for the page title. -
<nav>for navigation links. -
<main>for the main content. -
At least two
<section>elements. -
<footer>for copyright information.
Organising HTML with Indentation and Comments
Make HTML easier to read, maintain and troubleshoot.
Poorly Organised HTML
<main><section><h2>About</h2><p>Our course information.</p></section></main>Properly Organised HTML
<main>
<section>
<h2>About</h2>
<p>Our course information.</p>
</section>
</main>Indentation visually shows which elements are contained inside other elements. Two spaces are used in these examples, but consistency is more important than the exact number of spaces.
HTML Comments
<!-- Main course introduction -->
<section id="course-introduction">
<h2>Course Introduction</h2>
</section>
<!-- Student registration form -->
<section id="registration">
<h2>Register for the Course</h2>
</section>Comments are not displayed as normal webpage content. They can be used to explain sections of code or leave notes for developers.
Practice Activity
- Open one of your earlier HTML files.
- Apply consistent indentation.
- Add comments above the header, main content and footer.
- Check that every opening tag has the correct closing tag.
Finding and Correcting Common HTML Errors
Recognise problems that can affect webpage structure.
-
Missing closing tag
<p>This paragraph is missing its closing tag.Correct version:
<p>This paragraph has a closing tag.</p> -
Incorrectly nested elements
<p><strong>Important information</p></strong>Correct version:
<p><strong>Important information</strong></p> -
Missing quotation marks
<a href=https://example.com>Visit Website</a>Correct version:
<a href="https://example.com">Visit Website</a> -
Duplicate IDs
<section id="about">First section</section> <section id="about">Second section</section>Correct version:
<section id="about">First section</section> <section id="services">Second section</section> -
Missing image alternative text
<img src="/student.jpg">Correct version:
<img src="/student.jpg" alt="Student completing an online course" >
Simple Troubleshooting Process
- Check the browser's developer tools.
- Confirm that tags are spelled correctly.
- Check opening and closing tags.
- Check quotation marks around attribute values.
- Review element nesting and indentation.
- Test links and image file paths.
- Use an HTML validation tool when available.
Error-Correction Exercise
Find the mistakes in this code:
<section id="about">
<h2>About Our Course
<p class=description>
Learn HTML step by step.
</p>
<img src="/course.jpg">
</section>View Corrected Answer
<section id="about">
<h2>About Our Course</h2>
<p class="description">
Learn HTML step by step.
</p>
<img src="/course.jpg"
alt="Student following an online HTML course"
>
</section>HTML Accessibility and Meaningful Structure
Create content that more people can understand and use.
Web accessibility means designing and developing websites so that people with different abilities can perceive, understand, navigate and interact with the content.
- Use a clear and logical heading order.
- Provide meaningful alternative text for informative images.
- Connect every form field to a visible label.
- Use semantic elements instead of unnecessary generic containers.
- Use descriptive link text instead of phrases such as “click here”.
-
Identify the webpage language using the
langattribute. - Use table headings for tabular data.
- Make interactive elements understandable using text labels.
Descriptive Link Text
Less meaningful:
<a href="/course.html">Click here</a>More meaningful:
<a href="/course.html">View the complete HTML course</a>Meaningful Alternative Text
Too vague:
<img src="/classroom.jpg" alt="Image">More informative:
<img src="/classroom.jpg"
alt="Students learning web development in a computer laboratory"
>alt="".
Accessibility Review
Review one of your practice pages and confirm that:
- The page contains one clear main heading.
- The heading levels follow a logical order.
- Images include suitable alternative text.
- Links explain where they lead.
- Form inputs have labels.
- Semantic page elements are used appropriately.
Final Project: Create a Complete Basic Webpage
Combine everything you have learned into one HTML document.
Project Requirements
- A valid HTML document structure.
- A meaningful browser page title.
- A page header and navigation area.
- One main heading and logical subheadings.
- At least three paragraphs.
- At least one image with alternative text.
- At least two links.
- One simple table.
- One basic form.
- Semantic sections and a footer.
- Proper indentation.
- Comments identifying major code sections.
Complete Project Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Web Development Journey</title>
</head>
<body id="top">
<!-- Page header and navigation -->
<header>
<h1>My Web Development Journey</h1>
<nav aria-label="Main navigation">
<a href="#about">About</a>
<a href="#schedule">Schedule</a>
<a href="#contact">Contact</a>
</nav>
</header>
<!-- Main page content -->
<main>
<section id="about">
<h2>About My Learning Journey</h2>
<img src="/images/html-learning.jpg"
alt="Laptop displaying HTML code beside a notebook"
>
<p>
I started learning HTML because I wanted to understand
how webpages are created.
</p>
<p>
HTML allows me to organise headings, paragraphs,
images, links, tables and forms.
</p>
<p>
My next goal is to learn CSS so that I can improve
the visual design of my webpages.
</p>
<p>
Visit the
<a href="https://example.com">HTML learning resources</a>
page for more information.
</p>
</section>
<hr>
<section id="schedule">
<h2>My Learning Schedule</h2>
<table>
<caption>Weekly Study Plan</caption>
<thead>
<tr>
<th scope="col">Day</th>
<th scope="col">Topic</th>
<th scope="col">Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>Monday</td>
<td>HTML Structure</td>
<td>Completed</td>
</tr>
<tr>
<td>Wednesday</td>
<td>Tables and Forms</td>
<td>In Progress</td>
</tr>
<tr>
<td>Friday</td>
<td>Semantic HTML</td>
<td>Not Started</td>
</tr>
</tbody>
</table>
</section>
<hr>
<section id="contact">
<h2>Contact Me</h2>
<form action="#" method="post">
<div>
<label for="contact-name">Your Name</label>
<input
type="text"
id="contact-name"
name="contact_name"
required
>
</div>
<div>
<label for="contact-email">Email Address</label>
<input
type="email"
id="contact-email"
name="contact_email"
required
>
</div>
<fieldset>
<legend>Reason for Contact</legend>
<input
type="radio"
id="reason-question"
name="contact_reason"
value="question"
>
<label for="reason-question">Ask a question</label>
<input
type="radio"
id="reason-feedback"
name="contact_reason"
value="feedback"
>
<label for="reason-feedback">Provide feedback</label>
</fieldset>
<div>
<input
type="checkbox"
id="contact-permission"
name="contact_permission"
>
<label for="contact-permission">
You may contact me by email
</label>
</div>
<button type="submit">Send Message</button>
</form>
</section>
</main>
<!-- Page footer -->
<footer>
<p>
© 2026 My Web Development Journey
</p>
<p>
<a href="#top">Return to the top of the page</a>
</p>
</footer>
</body>
</html>Final Project Review Checklist
-
The document begins with
<!DOCTYPE html>. -
The
<html>element includes a language attribute. -
The page includes a meaningful
<title>. - All opening and closing tags are correctly matched.
- Elements are nested in the correct order.
- Attribute values are enclosed in quotation marks.
- Every ID is unique.
- Images include appropriate alternative text.
- Form controls have visible labels.
- Heading levels follow a logical structure.
- The code uses consistent indentation.
Congratulations!
You have completed Build Your First Solid Foundation in HTML.
You can now identify the structure of an HTML document, organise content using meaningful elements, create links, images, tables and forms, and apply basic accessibility practices.
Continue practising by creating small webpages about topics that interest you. Once you are comfortable with HTML, the next step is to learn CSS and use it to control layout, colours, typography and responsive design.
