Lecture Notes Of Class 17
Introduction to
HTML5 Elements
Objective:
- Learn
about the new HTML5 elements introduced for creating more semantic and
accessible web pages.
- Understand
the use and structure of specific HTML5 elements such as <figure>, <figcaption>,
and <progress>.
Outcome:
- Students
will be able to use HTML5 structural and multimedia elements, including <figure>,
<figcaption>, and <progress>, effectively in web development.
Introduction to HTML5
HTML5 is the fifth
version of the HyperText Markup Language, designed to improve support for
multimedia, document structure, and web applications. One of the key features
of HTML5 is the introduction of new semantic elements that improve the clarity
of web page content. These elements not only provide better accessibility but
also help search engines better understand the structure and purpose of a web
page.
HTML5 Structural and
Multimedia Elements
In this class, we will
focus on three important HTML5 elements:
1.
<figure>
2.
<figcaption>
3.
<progress>
Each of these elements
serves a specific purpose and can help make your web pages more meaningful and
functional.
1. The <figure>
Element
The <figure>
element is used to encapsulate content that is related to a page, such as
images, illustrations, diagrams, or even code blocks. It is used to group media
content along with a caption or description that provides additional context.
Syntax:
|
<figure> <img
src="image.jpg" alt="Description of image"> <figcaption>Image
description goes here</figcaption> </figure> |
Explanation:
- The
<figure> element itself is a container that wraps the media content
(such as an image, video, or other media).
- It
can be used with images, videos, audio files, or other types of media
content.
- Inside
<figure>, you often include a <figcaption> element that
describes the content.
Example:
- In
this example, the <figure> contains an image and a caption that
explains the image content.
|
<figure> <img
src="nature.jpg" alt="A beautiful sunset over the
mountains"> <figcaption>Sunset
over the mountains captured during the winter season.</figcaption> </figure> |
2. The <figcaption>
Element
The <figcaption>
element is used to provide a caption or description for the content inside the <figure>
element. This is particularly useful for images, charts, or illustrations, as
it allows you to provide additional information that can be beneficial for the
user or search engines.
Syntax:
|
<figure> <img
src="image.jpg" alt="Description of image"> <figcaption>This
is a caption for the image.</figcaption> </figure>
|
Explanation:
- The
<figcaption> element is always placed inside the <figure>
element.
- It
provides a text description of the media, helping users understand the
context or meaning behind the media content.
Example:
- The
caption will appear under the image, describing what the image depicts.
|
<figure> <img
src="beach.jpg" alt="A peaceful beach with clear blue
water"> <figcaption>Relaxing
view of a beach with crystal-clear water and white sand.</figcaption> </figure> |
3. The <progress>
Element
The <progress>
element is used to represent the progress of a task or process. It displays a
progress bar, typically used for tasks like file uploads, downloads, or any
process that takes time to complete.
Syntax:
|
<progress
value="40" max="100"></progress> |
Explanation:
- The
value attribute specifies the current progress (from 0 to the value of max).
- The
max attribute specifies the maximum value, representing the goal or total
progress that can be achieved.
Example:
- In
this example, the progress bar will display 70% of the progress towards
the completion of a task.
|
<progress
value="70" max="100"></progress> |
Accessible and
Interactive Use:
Although the <progress>
element can be used to show progress visually, it is also important to provide
alternative ways for users to understand the progress, especially for users
with disabilities. This can be done using accessible labels or text, such as:
|
<progress
value="45" max="100"></progress> <p>Task is
45% complete.</p> |
When to Use These Elements
- <figure>
and <figcaption>: These elements
should be used when you have media content that needs explanation or
description. For example, use them to provide context for images, videos,
charts, or illustrations in articles, blogs, and news sites.
- <progress>:
This element is useful when displaying the status of a task, like an
upload or download process, a form submission, or any other timed process.
It helps visually represent progress and can be combined with JavaScript
for dynamic progress tracking.
Summary
In this lesson, you have
learned about three important HTML5 elements:
1.
<figure>
- Used to group media content with related information.
2.
<figcaption> -
Provides a caption or description for the content inside <figure>.
3.
<progress>
- Displays a progress bar to indicate the completion of a task or process.
These elements help make
web pages more semantic, accessible, and user-friendly. By using these elements
correctly, you can create pages that are easier to understand and interact
with, providing a better experience for your users.
Assignment:
1.
Create a webpage using the <figure>
and <figcaption> elements. Include at least one image with a caption
explaining the image.
2.
Implement a progress bar using the <progress>
element, and simulate a task like file uploading or task completion (use
JavaScript or set a static value).
3.
Experiment with these elements on your
personal projects and share the outcomes in the next class.