Module 2
The <div> Tag in HTML
1. Definition:
The <div> (short for division) tag is a block-level container used to group HTML elements
together.
It doesn’t have any semantic meaning by itself — it’s a generic container, mainly used for
layout, styling, and scripting.
Think of it as an empty box that can hold other HTML elements and be styled using CSS.
2. Syntax:
<div> ...content... </div>
3. Key Attributes:
Attribute Description Example
id Assigns a unique identifier to a div <div id="header">
class Assigns one or more CSS classes <div class="container">
style Adds inline CSS directly <div style="background:yellow;">
title Adds tooltip text <div title="Main Content">
4. Default Behavior:
• The <div> tag is block-level, meaning it always starts on a new line.
• It occupies full width by default.
• Commonly used to create sections or containers in a webpage.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
.box {
background-color: lightblue;
padding: 15px;
margin: 10px;
}
</style>
</head>
<body>
<div id="header" class="box">
<h1>Welcome to My Website</h1>
</div>
<div id="content" class="box">
<p>This is the content section.</p>
</div>
</body>
</html>
Use Case: To create page sections like header, footer, sidebar, etc.
Media and Embedding
Multimedia Tags:
• <audio> – embeds sound content
• <video> – embeds video content
• <source> – specifies multiple media sources
• <track> – adds subtitles/captions
• <embed> – embeds external content (e.g., Flash, PDF)
• <object> – embeds external objects (e.g., applets, media players)
• <param> – defines parameters for the object
1. <audio> Tag
Definition:
The <audio> element is used to embed sound content (music, narration, or any audio file)
into a webpage.
Common Attributes:
• src → Path to the audio file.
• controls → Adds play/pause buttons and volume control.
• autoplay → Starts playing automatically.
• loop → Repeats the audio.
• muted → Starts with sound off.
Example:
<audio controls>
<source src="song.mp3" type="audio/mpeg">
<source src="[Link]" type="audio/ogg">
Your browser does not support the audio element.
</audio>
Explanation:
Browsers will pick the first compatible format (.mp3, .ogg, etc.) and provide playback
controls.
2. <video> Tag
Definition:
The <video> element embeds a video file into an HTML page.
Common Attributes:
• src → File path to the video.
• width / height → Display dimensions.
• controls → Adds video controls (play, pause, volume, etc.).
• autoplay → Plays automatically.
• loop → Repeats playback.
• poster → Displays an image before the video plays.
Example:
<video width="480" height="270" controls poster="[Link]">
<source src="movie.mp4" type="video/mp4">
<source src="[Link]" type="video/webm">
Your browser does not support the video tag.
</video>
Explanation:
It shows a preview image first. If the browser doesn’t support .mp4, it tries .webm.
3. <source> Tag
Definition:
Specifies multiple sources for <audio> or <video>.
Browsers use the first supported file.
Example:
<video controls>
<source src="clip.mp4" type="video/mp4">
<source src="[Link]" type="video/ogg">
</video>
Explanation:
Gives fallback options for better cross-browser compatibility.
4. <track> Tag
Definition:
Adds subtitles, captions, or descriptions to a video.
Common Attributes:
• src → File path to the subtitle file (.vtt).
• kind → Type of text track (subtitles, captions, descriptions).
• srclang → Language of the track (e.g., "en", "fr").
• label → Display name in the video player.
Example:
<video controls>
<source src="movie.mp4" type="video/mp4">
<track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English">
<track src="subtitles_es.vtt" kind="subtitles" srclang="es" label="Español">
</video>
Explanation:
Viewers can switch between English and Spanish subtitles.
5. <embed> Tag
Definition:
Used to embed external content (like PDF, Flash, or multimedia applications) directly into a
webpage.
Common Attributes:
• src → File or URL to embed.
• type → MIME type (e.g., application/pdf).
• width / height → Size of embedded area.
Example:
<embed src="[Link]" type="application/pdf" width="600" height="400">
Explanation:
Displays a PDF file directly in the browser window.
6. <object> Tag
Definition:
Embeds external resources (like multimedia, PDFs, or Java applets) and can also act as a
fallback container.
Common Attributes:
• data → Path to the embedded resource.
• type → MIME type.
• width, height → Dimensions.
• name → Reference name for scripting.
Example:
<object data="[Link]" type="application/pdf" width="600" height="400">
<p>PDF cannot be displayed. <a href="[Link]">Download here</a>.</p>
</object>
Explanation:
If the browser can’t render the PDF, the fallback message with a download link appears.
7. <param> Tag
Definition:
Used inside <object> to define parameters for the embedded object (like autoplay or
quality).
Common Attributes:
• name → Name of the parameter.
• value → Parameter value.
Example:
<object data="[Link]" type="application/x-shockwave-flash" width="500"
height="300">
<param name="autoplay" value="true">
<param name="quality" value="high">
</object>
Explanation:
Defines playback behavior and quality for a Flash video (older usage, now mostly replaced
by <video>).
The <source> Tag
Definition:
The <source> tag is used inside <audio> or <video> elements to specify multiple media
sources.
The browser will use the first supported format it finds.
Attributes:
• src → URL of the media file
• type → MIME type (for example, audio/mpeg, video/mp4)
Example 1: Using <source> in a Video
<!DOCTYPE html>
<html>
<body>
<h2>Video with Multiple Sources</h2>
<video width="400" height="250" controls>
<source src="movie.mp4" type="video/mp4">
<source src="[Link]" type="video/webm">
<source src="[Link]" type="video/ogg">
Your browser does not support the video tag.
</video>
</body>
</html>
The <iframe> Tag — Inline Frame in HTML
1. Definition
<iframe> stands for inline frame.
It is used to embed another HTML page within the current page.
Think of it as a “window” that shows another webpage inside your own page.
2. Basic Syntax
<iframe src="URL"></iframe>
Example:
<iframe src="[Link]
3. Important Attributes
Attribute Description Example
src The URL of the page to embed <iframe src="[Link]">
width Width of the frame (px or %) <iframe width="600">
height Height of the frame <iframe height="400">
title Provides an accessible title for screen <iframe title="Wikipedia
readers page">
name Used to target links to open in this frame <iframe name="frame1">
frameborder Sets border visibility (deprecated in <iframe frameborder="0">
HTML5; use CSS instead)
scrolling Controls scrollbars (yes, no, auto) <iframe scrolling="yes">
allowfullscreen Allows the content to go full screen <iframe allowfullscreen>
sandbox Adds security restrictions <iframe sandbox>
allow Defines permissions like camera, <iframe allow="autoplay;
microphone, etc. fullscreen">
4. Basic Example
<!DOCTYPE html>
<html>
<body>
<h2>Embedding a Webpage Using Iframe</h2>
<iframe src="[Link] width="600" height="400"
title="Wikipedia"></iframe>
</body>
</html>
Explanation:
This example embeds the homepage of Wikipedia into your own webpage.
5. Embedding a Local Page
You can also embed a page from your own website:
<iframe src="[Link]" width="500" height="300" title="About Us"></iframe>
Use Case:
Useful for embedding help pages, contact forms, or reports without opening new tabs.
6. Linking Content to an Iframe using name
You can make a link open inside an iframe using the target attribute.
<h2>Navigation Example</h2>
<a href="[Link]" target="frame1">Home</a> |
<a href="[Link]" target="frame1">Contact</a>
<iframe name="frame1" width="500" height="300" title="Content Area"></iframe>
Explanation:
When you click “Home” or “Contact,” the content loads inside the iframe, not a new tab.
7. Styling an Iframe (Using CSS)
You can style iframes just like other HTML elements.
<iframe src="[Link]
style="border:3px solid blue; border-radius:10px; box-shadow:2px 2px 5px gray;"
width="600" height="400">
</iframe>
Explanation:
Rounded corners and shadows make the iframe visually integrated with your design.
8. Iframe with YouTube Videos
This is one of the most common uses of iframes — embedding videos.
<iframe width="560" height="315"
src="[Link]
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-
picture"
allowfullscreen>
</iframe>
Explanation:
The <iframe> here loads a YouTube video player directly on your page.
YouTube automatically provides this embed code for any video.
9. Semantic Tags
1. Definition:
Semantic tags are HTML elements that clearly describe their meaning — both to the
browser and to developers.
In simple terms: They tell what kind of content is inside.
Example:
<header>...</header> <!-- clearly a header section -->
<footer>...</footer> <!-- clearly a footer section -->
Before HTML5, developers used <div> for everything:
<div id="header"></div>
<div id="nav"></div>
<div id="content"></div>
Now, we use:
<header></header>
<nav></nav>
<main></main>
<footer></footer>
This improves:
• Code readability
• Search engine optimization (SEO)
• Accessibility for screen readers
• Web structure clarity
2. Common Semantic Tags and Their Purpose
Tag Description Example
<header> Defines the top section of a page or article Page title, logo, navigation
<nav> Contains navigation links Menus, site navigation
<section> Groups related content in a document Chapters, topics
<article> Represents independent content Blog post, news story
<aside> Sidebar content related to main text Ads, side notes
<main> Main unique content of the page Central content area
<footer> Defines the bottom section of a page Copyright, contact info
<figure> Contains media (images, charts, diagrams) Figure with caption
<figcaption> Caption or description for <figure> Description for image
<details> Defines collapsible content FAQs, toggles
<summary> Title for <details> element Clickable heading
<mark> Highlights or marks text Important text
<time> Defines date or time Date of publication
Example:
<!DOCTYPE html>
<html>
<body>
<header>
<h1>My Blog</h1>
</header>
<nav>
<a href="#home">Home</a> |
<a href="#articles">Articles</a> |
<a href="#contact">Contact</a>
</nav>
<main>
<article>
<h2>Semantic HTML</h2>
<p>Semantic tags help search engines understand web content better.</p>
</article>
</main>
<footer>
<p>© 2025 My Blog</p>
</footer>
</body>
</html>
HTML forms
1. Definition:
A form is an HTML structure used to collect information from users and send it to a server
for processing.
It begins with a <form> tag and contains input elements like text boxes, checkboxes,
dropdowns, and buttons.
<form action="[Link]" method="post">
<!-- form elements go here -->
</form>
2. The <form> Tag and Its Main Attributes
Attribute Description Example
action Specifies where to send the form data action="[Link]"
method Specifies how to send data (GET or POST) method="post"
target Specifies where to display the response target="_blank"
enctype Defines how form data should be encoded enctype="multipart/form-
(for file uploads) data"
autocomplete Enables/Disables auto-fill autocomplete="off"
GET vs POST
Feature GET POST
Visibility Data shown in URL Data hidden
Use case Search, filtering Login, signup
Data limit Limited (~2048 chars) Unlimited
Security Less secure More secure
3. Basic Form Example
<form action="submit_form.php" method="post">
<label for="username">Username:</label>
<input type="text" id="username" name="username"><br><br>
<label for="password">Password:</label>
<input type="password" id="password" name="password"><br><br>
<input type="submit" value="Login">
</form>
Explanation:
• <label> connects text to its input box using the for attribute.
• name attribute identifies the data on the server side.
• <input type="submit"> sends the data.
4. Common Input Types
Input Type Example Description
text <input type="text"> Single-line text field
password <input type="password"> Hidden characters
email <input type="email"> Email validation
number <input type="number"> Numeric input
radio <input type="radio"> Choose one option
checkbox <input type="checkbox"> Choose multiple options
date <input type="date"> Date picker
color <input type="color"> Color picker
file <input type="file"> Upload a file
submit <input type="submit"> Submit form
reset <input type="reset"> Reset fields
button <input type="button"> Custom button
hidden <input type="hidden"> Hidden data field
Example: Various Input Types
<form>
Name: <input type="text" name="name"><br>
Email: <input type="email" name="email"><br>
Age: <input type="number" name="age"><br>
Date of Birth: <input type="date" name="dob"><br>
Favorite Color: <input type="color" name="color"><br>
Upload File: <input type="file" name="resume"><br>
<input type="submit">
</form>
5. Radio Buttons and Checkboxes
Radio Buttons
Used when you want the user to select only one option.
<p>Select Gender:</p>
<input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="female"> Female
All radio buttons that share the same name are part of one group.
Checkboxes
Used when the user can select multiple options.
<p>Select Hobbies:</p>
<input type="checkbox" name="hobby" value="reading"> Reading
<input type="checkbox" name="hobby" value="music"> Music
<input type="checkbox" name="hobby" value="sports"> Sports
6. Dropdown (Select Menu)
<label for="city">Select City:</label>
<select id="city" name="city">
<option value="kochi">Kochi</option>
<option value="calicut">Calicut</option>
<option value="thrissur">Thrissur</option>
</select>
Explanation:
The <select> tag creates a dropdown list, and each <option> represents a choice.
7. Textarea (Multiline Input)
<label for="feedback">Feedback:</label><br>
<textarea id="feedback" name="feedback" rows="4" cols="50"></textarea>
Use: For comments, feedback, or messages.
8. Grouping Fields with <fieldset> and <legend>
<form>
<fieldset>
<legend>Personal Information</legend>
Name: <input type="text" name="name"><br>
Email: <input type="email" name="email">
</fieldset>
</form>
Explanation:
<fieldset> groups related inputs, and <legend> provides a title for that group.
9. Datalist (Auto Suggest Options)
<label for="browser">Choose a browser:</label>
<input list="browsers" name="browser">
<datalist id="browsers">
<option value="Chrome">
<option value="Firefox">
<option value="Edge">
<option value="Safari">
</datalist>
Explanation:
As the user types, suggested options appear automatically.
10. Buttons in Forms
<input type="submit" value="Submit Form">
<input type="reset" value="Clear Form">
<button type="button" onclick="alert('Form Saved!')">Save</button>
Explanation:
• submit → sends data
• reset → clears all fields
• button → custom JavaScript actions
11. Form Validation Attributes
Attribute Purpose Example
required Field must be filled <input required>
min / max Numeric limits <input type="number" min="18" max="99">
maxlength Max number of characters <input maxlength="20">
pattern Regex pattern for validation <input pattern="[A-Za-z]{3,}">
placeholder Hint text <input placeholder="Enter name">
Example:
<input type="email" name="email" required placeholder="example@[Link]">
12. File Upload Example
When uploading files, you must include:
• enctype="multipart/form-data"
• method="post"
<form action="[Link]" method="post" enctype="multipart/form-data">
<input type="file" name="resume">
<input type="submit" value="Upload">
</form>
13. Example – Full Registration Form
<form action="[Link]" method="post">
<fieldset>
<legend>Registration Form</legend>
<label for="name">Full Name:</label>
<input type="text" id="name" name="fullname" required><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required><br><br>
<label for="password">Password:</label>
<input type="password" id="password" name="password" minlength="6"
required><br><br>
<label>Gender:</label>
<input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="female"> Female<br><br>
<label for="course">Select Course:</label>
<select id="course" name="course">
<option value="bca">BCA</option>
<option value="bsc">BSc</option>
<option value="mca">MCA</option>
</select><br><br>
<label for="bio">Short Bio:</label><br>
<textarea id="bio" name="bio" rows="4" cols="40"></textarea><br><br>
<input type="submit" value="Register">
</fieldset>
</form>
Explanation:
This collects basic user info — and when submitted, the form sends it to [Link].