Definition and Usage
• The <img> tag is used to embed an image in an HTML page.
• Images are not technically inserted into a web page; images are
linked to web pages. The <img> tag creates a holding space for
the referenced image.
• The <img> tag has two required attributes:
• src - Specifies the path to the image
• alt - Specifies an alternate text for the image, if the image for
some reason cannot be displayed
• Note: Also, always specify the width and height of an image. If
width and height are not specified, the page might flicker while
the image loads.
Attributes
Attribute Value Description
alt text Specifies an alternate text for an image
height pixels Specifies the height of an image
src URL Specifies the path to the image
width pixels Specifies the width of an image
Example
How to insert an image:
<img src="img_girl.jpg" alt="Girl in a jacket" width="500"
height="600">
Image Maps
The HTML <map> tag defines an image map. An image map is an image with
clickable areas. The areas are defined with one or more <area> tags.
Try to click on the computer, phone, or the cup of coffee in the image below:
Example
Here is the HTML source code for the image map above:
<img src="[Link]" alt="Workplace" usemap="#workmap">
<map name="workmap">
<area shape="rect" coords="34,44,270,350" alt="Computer" href="comput
[Link]">
<area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.h
tm">
<area shape="circle" coords="337,300,44" alt="Coffee" href="[Link]
m">
</map>
How Does it Work?
The idea behind an image map is that you should be able to perform different
actions depending on where in the image you click.
To create an image map you need an image, and some HTML code that
describes the clickable areas.
The Image
The image is inserted using the <img> tag. The only difference from other
images is that you must add a usemap attribute:
<img src="[Link]" alt="Workplace" usemap="#workmap">
The usemap value starts with a hash tag # followed by the name of the image
map, and is used to create a relationship between the image and the image
map.
Create Image Map
Then, add a <map> element.
The <map> element is used to create an image map, and is linked to the image
by using the required name attribute:
<map name="workmap">
The name attribute must have the same value as the <img>'s usemap attribute .
The Areas
Then, add the clickable areas.
A clickable area is defined using an <area> element.
Shape
You must define the shape of the clickable area, and you can choose one of
these values:
• rect - defines a rectangular region [x1,y1,x2,y2]
• circle - defines a circular region [x,y,radius]
• poly - defines a polygonal region [x1,y1,...,x5,y5]
• default - defines the entire region
You must also define some coordinates to be able to place the clickable area
onto the image.
Shape="rect"
The coordinates for shape="rect" come in pairs, one for the x-axis and one for
the y-axis.
So, the coordinates 34,44 is located 34 pixels from the left margin and 44
pixels from the top:
The coordinates 270,350 is located 270 pixels from the left margin and 350
pixels from the top:
Now we have enough data to create a clickable rectangular area:
Example
<area shape="rect" coords="34, 44, 270, 350" href="[Link]">
The <form> Element
The HTML <form> element is used to create an HTML form for user input:
The <form> element is a container for different types of input elements, such
as: text fields, checkboxes, radio buttons, submit buttons, etc.
The <input> Element
The HTML <input> element is the most used form element.
An <input> element can be displayed in many ways, depending on
the type attribute.
Here are some examples:
Type Description
<input type="text"> Displays a single-line text input field
<input type="radio"> Displays a radio button (for selecting one of many
choices)
<input Displays a checkbox (for selecting zero or more of
type="checkbox"> many choices)
<input type="submit"> Displays a submit button (for submitting the
form)
<input type="button"> Displays a clickable button
Text Fields
The <input type="text"> defines a single-line input field for text input.
Example:
<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname">
</form>
The <label> Element
Notice the use of the <label> element in the example above.
The <label> tag defines a label for many form elements.
The <label> element is useful for screen-reader users, because the screen-
reader will read out loud the label when the user focuses on the input
element.
The <label> element also helps users who have difficulty clicking on very
small regions (such as radio buttons or checkboxes) - because when the user
clicks the text within the <label> element, it toggles the radio
button/checkbox.
The for attribute of the <label> tag should be equal to the id attribute of
the <input> element to bind them together.
Radio Buttons
The <input type="radio"> defines a radio button.
Radio buttons let a user select ONE of a limited number of choices.
Example:
<p>Choose your favorite Web language:</p>
<form>
<input type="radio" id="html" name="fav_language" value="HTML">
<label for="html">HTML</label><br>
<input type="radio" id="css" name="fav_language" value="CSS">
<label for="css">CSS</label><br>
<input type="radio" id="javascript" name="fav_language" value="JavaSc
ript">
<label for="javascript">JavaScript</label>
</form>
Checkboxes
The <input type="checkbox"> defines a checkbox.
Checkboxes let a user select ZERO or MORE options of a limited number of
choices.
Example:
<form>
<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<label for="vehicle1"> I have a bike</label><br>
<input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
<label for="vehicle2"> I have a car</label><br>
<input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
<label for="vehicle3"> I have a boat</label>
</form>
The Submit Button
The <input type="submit"> defines a button for submitting the form data to a
form-handler.
The form-handler is typically a file on the server with a script for processing
input data.
The form-handler is specified in the form's action attribute.
Example:
<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</form>
The Name Attribute for <input>
Notice that each input field must have a name attribute to be submitted.
If the name attribute is omitted, the value of the input field will not be sent at
all.
Example:
<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" value="John"><br><br>
<input type="submit" value="Submit">
</form>
Email Input Type
The email input type is used to create a field for entering an
email address. It helps validate the email format by
automatically checking if the value entered resembles an
email (i.e., contains "@" and a domain).
Example:
<input type="email" placeholder="Enter your email">
Validation: The browser automatically checks for a
valid email format (e.g., user@[Link]).
Password Input Type
The password input type is used for fields where sensitive
information, like passwords, should be entered. The entered
text is obscured for privacy.
Example:
<input type="password" placeholder="Enter your
password">
Visibility: The text entered is hidden by default to
maintain privacy.
File Input Type
The file input type is used to allow users to select and upload
files from their local system. The files can then be submitted
through a form.
Example:
<input type="file" name="file_upload">
File Selection: When clicked, it opens the file dialog box
for the user to select one or more files.
<textarea> Tag in HTML
The <textarea> tag is used to create a multi-line text input
field. It is commonly used for long text entries, such as
comments or messages. Unlike the <input> tag, which is
typically a single-line input, <textarea> allows for multiple
lines of text.
Basic Syntax:
<textarea rows="4" cols="50" placeholder="Enter your
message here"></textarea>
rows: Specifies the number of visible rows in the
textarea.
cols: Specifies the number of visible columns (width) of
the textarea.
placeholder: Displays a placeholder text when the
textarea is empty.
Example with Content:
<textarea rows="5" cols="30">Default text</textarea>
The text inside the <textarea> tag will appear as the
default content in the text box.
1. <select> Tag in HTML
The <select> tag is used to create a dropdown list in
HTML. It is commonly used when you want the user to
select one or more options from a list. The <select> tag
is often paired with <option> tags, which represent the
items in the dropdown list.
Basic Syntax:
<select name="dropdown" id="dropdown">
<option value="value1">Option 1</option>
<option value="value2">Option 2</option>
<option value="value3">Option 3</option>
</select>
name: Specifies the name of the dropdown that is
submitted with the form data.
id: A unique identifier for the dropdown, which
can be used with JavaScript or CSS.
2. <option> Tag in HTML
The <option> tag defines an option in a dropdown list
created by the <select> tag. Each <option> tag has a
value attribute that will be submitted when the form is
submitted.
Basic Syntax:
<option value="value1">Option 1</option>
value: Specifies the value to be sent when the
option is selected in the form. If not provided, the
text inside the option is sent as the value.
3. <optgroup> Tag in HTML
The <optgroup> tag is used to group related options
within a dropdown list. It helps organize the options
into categories, making the dropdown more structured
and user-friendly.
Basic Syntax:
<select name="fruits">
<optgroup label="Citrus">
<option value="orange">Orange</option>
<option value="lemon">Lemon</option>
</optgroup>
<optgroup label="Berries">
<option
value="strawberry">Strawberry</option>
<option
value="blueberry">Blueberry</option>
</optgroup>
</select>
label: Specifies the label of the group to
categorize the options under.
4. disabled Attribute in HTML
The disabled attribute is used to disable an element,
meaning it cannot be interacted with or selected by the
user. It can be applied to the <select>, <option>, and
other form elements like <input>.
Example:
<select>
<option disabled >Choose an option</option>
<option value="1">Option 1</option>
<option value="2" disabled> Option 2option>
</select>
Disabled <select> or <option>: Prevents
interaction with the option or dropdown list.
5. selected Attribute in HTML
The selected attribute is used to pre-select an option in
a dropdown list by default. This is helpful when you
want to show a default option to the user when the form
is first loaded.
Example:
<select>
<option value="1">Option 1</option>
<option value="2" selected>Option 2 </option>
</select>
selected: Marks the option as selected when the
page is loaded.
<fieldset> Element
• Purpose:
The <fieldset> element is used to group related
elements within a form. It helps organize form fields
into sections, improving readability and accessibility.
• Usage:
The <fieldset> tag is commonly used to wrap form
elements like input fields, checkboxes, radio buttons,
etc., and it visually groups them together.
• Structure:
<fieldset>
<legend>Section Title</legend>
<!-- Form elements go here -->
</fieldset>
• Default Style:
By default, browsers will render a border around the
form elements wrapped in the <fieldset>. The
<fieldset> typically adds padding around the form
elements as well.
• Accessibility:
Using <fieldset> improves the accessibility of forms,
especially for users with disabilities, as screen
readers can announce the group of elements as a
distinct section.
<legend> Element
• Purpose:
The <legend> element provides a caption or title for
the <fieldset> group. It’s used to describe the
purpose or contents of the section.
• Usage:
The <legend> tag must be placed immediately after
the opening <fieldset> tag. It’s typically used to label
a group of related form fields, making it easier for
users to understand the purpose of the fields.
• Structure:
<fieldset>
<legend>Personal Information</legend>
<!-- Form fields for personal information -->
</fieldset>
• Default Style:
The <legend> text is typically displayed in bold and is
usually placed inside the border of the <fieldset>.
• Accessibility:
The <legend> enhances the accessibility of forms by
allowing screen readers to read out the label of the
fieldset, providing context for the grouped form
controls.
Key Points:
• Grouping Elements:
o <fieldset> groups related elements.
o <legend> provides a label or title for that group.
• Visual Representation:
The <fieldset> creates a box around the grouped
fields, while <legend> gives the box a title.
• Accessibility:
Both elements enhance accessibility, especially for
users relying on screen readers, as it helps in
describing groups of form elements more clearly.
<form>
<fieldset>
<legend>Personal Information</legend>
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<br>
<label for="email">Email:</label>
<input type="email" id="email" name="email">
</fieldset>
</form>
1. <section>
The <section> element represents a thematic grouping
of content. It's typically used to divide a document into
sections that have a common theme or purpose.
Example:
<section>
<h2>Our Services</h2>
<p>We offer a variety of services to help you
succeed.</p>
</section>
2. <article>
The <article> element is used to represent a self-
contained piece of content that could be distributed
independently, such as a news article or a blog post.
Example:
<article>
<h2>Breaking News: Local Team Wins
Championship</h2>
<p>The local football team has won the
championship after a thrilling match...</p>
</article>
3. <aside>
The <aside> element is used for content that is
tangentially related to the content around it. It's often
used for sidebars, pull quotes, or related links.
Example:
<aside>
<h3>Related Articles</h3>
<ul>
<li><a href="#article1">How to Train Like a
Champion</a></li>
<li><a href="#article2">Top 10 Football Teams in
History</a></li>
</ul>
</aside>
4. <details>
The <details> element is used to create a disclosure
widget from which the user can obtain additional
information or controls. It can be expanded or
collapsed.
Example:
<details>
<summary>More Information</summary>
<p>This section contains more detailed information
about the topic.</p>
</details>
5. <figcaption>
The <figcaption> element is used to provide a caption
or legend for a <figure> element, which can contain
images, illustrations, or diagrams.
Example:
<figure>
<img src="[Link]" alt="Local Football
Team">
<figcaption>Local Football Team Celebrating Their
Victory</figcaption>
</figure>
6. <figure>
The <figure> element is used to encapsulate content
that is referenced from the main content, usually
accompanied by a caption.
Example:
<figure>
<img src="[Link]" alt="Championship Trophy">
<figcaption>Championship Trophy Won by the
Local Team</figcaption>
</figure>
7. <footer>
The <footer> element represents the footer of a section
or page, typically containing information about its
author, copyright information, or links to related
documents.
Example:
<footer>
<p>© 2024 Local Sports Club. All rights
reserved.</p>
<ul>
<li><a href="#privacy">Privacy Policy</a></li>
<li><a href="#contact">Contact Us</a></li>
</ul>
</footer>
8. <header>
The <header> element represents introductory content,
typically a group of introductory or navigational aids. It
usually contains headings, logos, or navigational links.
Example:
<header>
<h1>Welcome to the Local Sports Club</h1>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About Us</a></li>
<li><a href="#services">Services</a></li>
</ul>
</nav>
</header>
The Media Elements
1. <audio> Element
The <audio> element is used to embed sound content in web
pages. Here are some common attributes, their uses, and
example values:
Basic Syntax:
<audio controls autoplay loop muted>
<source src="audio-file.mp3" type="audio/mpeg">
</audio>
Attributes:
• controls: Displays playback controls.
o Value: None (just including the attribute enables the
controls).
• autoplay: Automatically starts playing the audio when
the page loads.
o Value: None (just including the attribute enables
autoplay).
• loop: Repeats the audio once it ends.
o Value: None (just including the attribute enables
looping).
• muted: Starts the audio muted.
o Value: None (just including the attribute mutes the
audio).
• preload: Specifies how the audio should be preloaded.
o Values:
▪ "none": Do not preload.
▪ "metadata": Preload only metadata.
▪ "auto": Preload the entire audio file.
2. <video> Element
The <video> element allows you to embed video content on a
web page. Here are its attributes along with examples:
Basic Syntax:
<video width="640" height="360" controls autoplay
loop muted poster="[Link]">
<source src="video-file.mp4" type="video/mp4">
</video>
Attributes:
• controls: Displays playback controls.
o Value: None (just including the attribute enables the
controls).
• autoplay: Automatically starts playing the video when
the page loads.
o Value: None (just including the attribute enables
autoplay).
• loop: Repeats the video once it ends.
o Value: None (just including the attribute enables
looping).
• muted: Starts the video muted.
o Value: None (just including the attribute mutes the
video).
• poster: Specifies an image to display while the video is
downloading or before it plays.
o Value: URL of the image (e.g., "poster-
[Link]").
• width and height: Specifies the dimensions of the video
player.
o Values: Numeric values (e.g., 640 for width and 360
for height).
• preload: Specifies how the video should be preloaded.
o Values:
▪ "none": Do not preload.
▪ "metadata": Preload only metadata.
▪ "auto": Preload the entire video file.
HTML GRAPHICS
1. The Canvas Element
Canvas is an HTML element used to draw graphics via
JavaScript. It is perfect for generating dynamic, real-time
graphics like animations, game graphics, and visual data like
charts.
Key Features:
• Resolution Dependent: The graphics drawn on a canvas
are bitmap-based, which means the resolution is fixed. If
the canvas is resized, the graphics can appear distorted.
• JavaScript Controlled: The canvas itself doesn't draw
anything; it provides an area where you can use
JavaScript to create shapes, text, and images.
• Used for Dynamic Graphics: Ideal for games,
animations, and data visualizations that need to be
constantly updated or changed.
• Good for Performance: It can handle complex
animations and real-time updates efficiently.
Example of Using Canvas:
<canvas id="myCanvas" width="200"
height="200"></canvas>
<script>
var canvas = [Link]("myCanvas");
var context = [Link]("2d");
// Drawing a rectangle
[Link] = "#FF0000";
[Link](10, 10, 150, 100);
</script>
• In this example, we create a red rectangle on a 200x200
canvas.
Use Cases:
• Games
• Animations
• Data visualizations (like charts)
• Photo editing tools
2. SVG (Scalable Vector Graphics)
SVG is a markup language for describing two-dimensional
graphics. Unlike Canvas, SVG is vector-based, which means
it is resolution-independent and scales well without losing
quality.
Key Features:
• Resolution Independent: Because SVG is vector-based,
it scales perfectly on any screen size or resolution
without distortion.
• Declarative Syntax: You can write SVG directly in your
HTML as XML, no JavaScript needed to display it.
• DOM Integration: Each part of the SVG (such as lines,
circles, and text) is part of the DOM, making it easy to
interact with using CSS and JavaScript.
• Static and Interactive Graphics: Best suited for
graphics that don't need constant updating. Great for
logos, icons, and illustrations.
Example of Using SVG:
<svg width="200" height="200">
<circle cx="100" cy="100" r="80" stroke="black"
stroke-width="3" fill="red" />
</svg>
• This example creates a red circle with a black border in a
200x200 area.
Use Cases:
• Logos and icons
• Charts and graphs (that don’t require constant updating)
• Infographics
• Maps
Canvas vs. SVG: When to Use What
Feature Canvas SVG
Rendering Bitmap (pixel- Vector-based (resolution
Method based) independent)
Good for real- Best for static images or
Performance
time applications occasional updates
Built-in DOM elements,
Requires
Interactivity easy to interact with
JavaScript
using CSS/JS
Loses quality Scales without loss of
Scaling
when scaled quality
Better for
Better for simpler shapes
Complexity complex
and static graphics
animations