Module 3: Working with HTML Elements

Topic Introduction

Welcome to Module 3! In our previous lesson, you mastered the basic HTML structure,
creating a solid foundation for your web pages. Now, it's time to build on that foundation by
adding different types of content. Think of it this way: if the basic structure is the skeleton of
a person, then the elements we're learning today are the bones, muscles, and organs that
give the body its function and form. By the end of this module, you'll be able to create richer,
more interactive web content by adding lists, tables, links, and even images and videos to
your pages.

Learning Objectives:

By the end of this module, you will be able to:

 Implement semantic tags for structuring content, including lists (<ul>, <ol>, <li>),
and tables (<table>, <tr>, <td>).

 Insert different types of media, such as images (<img>) and videos (<video>).

 Create hyperlinks (<a>) to connect to other pages or external websites.

 Differentiate between various HTML elements and their appropriate use in

building a webpage.

Detailed Content

Now that we understand the basic structure, let's explore some of the most common and
powerful HTML elements. These elements are the building blocks we'll use to populate our
web pages with meaningful content.

1. Semantic Tags: Structuring Content

Semantic tags are special HTML tags that provide meaning and structure to your content.
Instead of just showing text, they tell the browser and other developers what that text
represents. This is important for accessibility and search engine optimization. Let's look at
some of the most useful semantic tags.

 Lists: You've seen lists on countless websites. In HTML, there are two primary types
of lists:

o Unordered Lists (<ul>): This is used for a list of items where the order
doesn't matter, like a list of ingredients in a recipe. Each list item is placed
inside an <li> tag.
 o Ordered Lists (<ol>): This is for a list where the order is important, such as
a set of step-by-step instructions. Again, each item is placed inside an <li>
tag.

 Tables: Tables are used to display data in a structured, grid-like format, with rows
and columns. The <table> tag serves as the container. Inside, you create rows with
the <tr> (table row) tag, and then individual data cells with the <td> (table data) tag.
This is perfect for presenting things like schedules or data sets.

 Divisions and Sections (<div>, <section>): While <div> is a generic container,

<section> is a semantic tag that groups related content together. Using <section>
helps organize your page's structure into logical parts, like an "About Us" section or
a "Contact" section.
2. Implementing Links and Media

The web is all about connecting information. Links allow us to navigate from one page to
another, and media elements let us add engaging visual and audio content to our sites.

 Hyperlinks (<a>): The <a> tag, or anchor tag, creates a hyperlink. The most
important part is the href attribute, which stands for Hypertext Reference. This
attribute tells the browser where to go when the link is clicked. The visible text of
the link is placed between the opening and closing <a> tags.

 Images (<img>): To add an image, we use the <img> tag. This is a self-closing tag,
meaning it doesn't require a separate closing tag. It has two essential attributes:

o src: This attribute specifies the source or file path of the image.

o alt: The alternative text. This is a text description of the image that appears
if the image cannot be loaded. It's also crucial for accessibility, as screen
readers use it to describe the image to visually impaired users.

 Audio and Video (<audio>, <video>): You can embed audio and video directly into
your HTML page using the <audio> and <video> tags. These tags also use the src
attribute to point to the media file. You can add a controls attribute to provide
standard playback controls like play, pause, and volume.

Example Problems & Solutions

Example 1: Creating a Simple Recipe Page

Problem: Create an HTML page for a simple recipe. The page should have a main heading
for the recipe title, an unordered list for ingredients, and an ordered list for the instructions.

Solution:
Step-by-Step Explanation:

1. Structure the Page: The standard <!DOCTYPE html>, <html>, <head>, and <body>
tags are used to set up the document.

2. Add Headings: An <h1> is used for the main recipe title, and <h2> is used for the
subheadings ("Ingredients" and "Instructions") to create a clear content hierarchy.

3. Create the Unordered List: The <ul> tag is used to create a list of ingredients, as
their order doesn't matter. Each ingredient is placed inside an <li> tag.

4. Create the Ordered List: The <ol> tag is used for the instructions, as the steps must
be followed in a specific order. Each step is an <li> tag.

Example 2: Adding an Image and a Link

Problem: Create a simple HTML page that displays an image of a cat and includes a link to a
website about cat care.
Solution:

HTML

<!DOCTYPE html>

<html>

<head>

<title>My Favorite Cat</title>

</head>

<body>

<h1>This is my cat, Mittens!</h1>

<img src="https://example.com/images/mittens.jpg" alt="A fluffy orange cat looking at

the camera." width="400" height="300">

<p>For more information on cats, visit this <a href="https://example.com/cat-care">cat

care website</a>.</p>

</body>

</html>

Step-by-Step Explanation:

1. Structure the Page: The basic HTML structure is set up with a title.

2. Add the Image: The <img> tag is used. The src attribute is set to the image file's
URL (or file path). The alt attribute provides a text description for accessibility.

3. Add the Link: The <a> tag is used to create the hyperlink. The href attribute is set
to the URL of the target page. The text "cat care website" is placed between the
opening and closing <a> tags, making it the clickable part of the link.

Example 3: Creating a Simple Schedule Table

Problem: Create an HTML table to display a simple weekly schedule for a student, showing
the day and one class for that day.

Solution:
Step-by-Step Explanation:

1. Start with the <table> Tag: The table is created using the <table> tag. The
border="1" attribute is added for visibility, creating a border around the table.

2. Create Table Rows: Each row is created using the <tr> (table row) tag.

3. Add Table Data Cells: Inside each <tr> tag, a <td> (table data) tag is used to create
the individual cells for each column, one for the day and one for the class name. This
nested structure ensures the data is correctly displayed in rows and columns.
Individual Activities

1. Laboratory-Oriented Activity: Building a Personal Profile Page

Instructions:

Building on the my_profile.html file you created in the last module, add the following
elements to your page.

1. Add a section with a subheading (<h2>) called "My Interests."

2. Under this subheading, create an unordered list (<ul>) of at least three of your
interests.

3. Add an image (<img>) of something you're interested in. Make sure to include an
alt attribute for accessibility.

4. Add a new paragraph (<p>) with a hyperlink (<a>) to a website that is relevant to
one of your interests. The link text should be descriptive (e.g., "Learn more about
photography here").

5. Save your my_profile.html file and open it in a browser to see your updated page.

"HTML is the language of the web's content. Master its grammar, and you can tell any
story you want."