HTML
• HTML (HyperText Markup Language) is the standard
language used to create and design web pages.
• It provides the basic structure of a webpage using a
system of elements enclosed in tags (< >).
• Why HTML?
HTML is essential for web development because:
1. Defines the Structure – It organizes the content on a
webpage, such as headings, paragraphs, images, and
links.
2. Foundation of Web Development – It works with CSS
(for styling) and JavaScript (for interactivity) to create
full-featured websites.
3. Easy to Learn & Use – Simple syntax with readable
tags makes
4. it beginner-friendly.
5. Cross-Platform Compatibility – Works on all browsers
and devices.
6. SEO-Friendly – Proper HTML structure helps search
engines understand and rank webpages better.
• Paired tags
Paired tags have both an opening tag and a closing tag.
The closing tag is written with a forward slash (/) before
the tag name.
Example : <h1> </h1> , <p> </p>
• Unpaired tags
Unpaired tags do not have a closing tag. They are self-
closing, meaning they work alone without wrapping any
content.
Example : <hr/> , <br> , <img>
STRUCTURE OF HTML
Elements
Elements are define as a combination of opening tag
and closing tag with content is called as element.
Example: <h1> HELLO WORLD </h1>
Types of Elements
• Block-Level Elements
• These elements take up the full width of the page
and start on a new line.
Examples:
1. <h1> - <h6> → Headings (Titles on a webpage)
2. <p> → Paragraph (Used for text)
3. <div> → Division (A container to group elements)
4. <section> → Defines a section of a webpage
5. <article> → Represents an independent content
piece.
• Inline-Level Elements
• These elements do not start on a new line and only
take up as much space as needed.
Examples:
1. <span> → Used to style a part of the text
2. <a> → Hyperlink (Used to link to other pages)
3. <strong> → Makes text bold
4. <em> → Makes text italic
Formatting Tags
• HTML formatting tags are used to style text and
make it more readable and meaningful.
• Formatting tags are the inline-level elements
1. Small Text (<small>)
• Makes text smaller than normal text.
2. Big Text (<big>)
• Used to make text larger than normal text.
3. Superscript (<sup>)
• Raises text above the normal line (used for
exponents, footnotes).
4. Subscript (<sub>)
• Lowers text below the normal line (used for chemical
formulas, mathematical notations).
5. Bold (<b>)
• Makes text bold for visual emphasis. (Does not add
extra meaning.)
6. Strong (<strong>)
• Makes text bold and also indicates important
content. (Screen readers emphasize it more.)
7. Underline (<u>)
• Underlines text for emphasis. (Not recommended for
links, as it may confuse users.)
8. Emphasis (<em>)
• Makes text italic and adds importance (used for
meaning, not just styling).
9. Italic (<i>)
• Makes text italic for visual appearance (without
adding importance).
10. Insertion (<ins>)
• Shows inserted (added) text, usually underlined.
(Used to show updates in text.)
11. Deletion (<del>)
• Shows deleted (removed) text, usually with a
strikethrough. (Used to indicate changes in text.)
12. Abbreviation(<abbr>)
• The <abbr> tag in HTML is used to represent an
abbreviation, with the full form of the abbreviation
typically provided in the title attribute. When a user
hovers over the abbreviation, the full version is
displayed as a tooltip.
Syntax:
<abbr title="HyperText Markup Language> HTML </abbr>
Relative and Absolute Paths in HTML
When working with HTML, we often need to link to other
web pages, images, or files. To do this, we use paths.
There are two main types of paths:
1. Relative Paths
2. Absolute Paths
1. What is a Path in HTML?
A path tells the browser where to find a file, such as an
image, a webpage. Think of it as giving directions to a
place. There are two ways to give these directions:
1. Absolute Path – Like giving a complete address.
2. Relative Path – Like giving directions from where you
are standing.
1. Absolute Paths (Full Address)
An absolute path is the full address (URL) of a file,
including the domain name. It tells the browser exactly
where to find the file, no matter where the user is.
• Example 1: Linking to a Website
<a href="[Link]
About Page</a>
• This is an absolute path because it includes the full
web address.
• The browser will go to
[Link] no matter
where the file is.
• Example 2: Displaying an Image from a Website
<img src="[Link]
alt="Website Logo">
• The browser fetches the image from the exact web
address.
• The file location does not depend on where your
HTML file is stored.
2. Relative Paths (Shorter Directions)
A relative path gives directions based on where the
current file is. It is like saying, "The file is inside this
folder" instead of giving a full address.
• Example 1: Linking to a File in the Same Folder
<a href="./[Link]">Visit About Page</a>
• If the HTML file and [Link] are in the same
folder, this works.
• Example 2: Linking to a File in a Subfolder
<a href="pages/[Link]">Contact Us</a>
• The browser looks for pages/[Link] inside the
current folder.
• Example 3: Linking to a File in the Parent Folder
<a href="../[Link]">Go to Home</a>
• .. means "go one folder up."
• Example 4: Moving Back Multiple Folders
<a href="../../[Link]">Go to Home</a>
• ../../ moves two folders up.
Multimedia in HTML
What is Multimedia?
Multimedia means using different types of content like
images, audio and videos on a webpage. HTML allows us
to add multimedia so that websites can be more
interactive and engaging.
Types of Multimedia in HTML
1. Images (<img>)
2. Audio (<audio>)
3. Video (<video>)
1. Adding Images in HTML
We use the <img> tag to add images to a webpage.
Syntax:
<img src="[Link]" alt="Description of Image"
width="300" height="200">
Explanation:
• src="[Link]" → Specifies the location (URL) of the
image.
• alt="Description of Image" → Provides alternative
text if the image doesn’t load.
• width="300" height="200" → Adjusts the image size
(optional).
2. Adding Audio in HTML
We use the <audio> tag to add sound/music to a
webpage.
Syntax:
<audio controls>
<source src="music.mp3" type="audio/mpeg">
</audio>
Explanation:
• <audio controls> → Adds play, pause, and volume
buttons.
• <source src="music.mp3" type="audio/mpeg"> →
Provides the file and format.
• The text inside the <audio> tag will show if the
browser doesn’t support audio.
3. Adding Video in HTML
We use the <video> tag to add videos to a webpage.
Syntax:
<video width="500" controls>
<source src="video.mp4" type="video/mp4">
</video>
Explanation:
• <video width="500" controls> → Adds a video player
with controls.
• <source src="video.mp4" type="video/mp4"> →
Specifies the video file and format.
Lists
A list is a way to organize content by grouping similar
items together. HTML provides three types of lists:
1. Ordered List (<ol>) - A numbered list.
2. Unordered List (<ul>) - A bulleted list.
3. Description List (<dl>) - A list with terms and
descriptions.
1. Ordered List (<ol>)
An ordered list displays items in a numbered format.
Syntax:
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
Output:
1. Item 1
2. Item 2
3. Item 3
Explanation:
• <ol> → Starts the ordered list.
• <li> → Defines each list item.
2. Unordered List (<ul>)
An unordered list displays items with bullets instead of
numbers.
Syntax:
<ul >
<li>Dog</li>
<li>Cat</li>
<li>Rabbit</li>
</ul>
Output:
▪ Dog
▪ Cat
▪ Rabbit
3. Description List (<dl>)
A description list is used to define terms and their
descriptions.
Syntax:
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets</dd>
</dl>
Output:
HTML
HyperText Markup Language
CSS
Cascading Style Sheets
Explanation:
• <dl> → Starts the description list.
• <dt> → Defines the term (title).
• <dd> → Describes the term.
Attributes in list
1. Start - The start attribute specifies the starting
number of the list. By default, ordered lists start
from 1, but this attribute allows you to start from any
number.
2. Type - The type attribute defines the numbering
style for list items. The possible values are:
• "1" (default) → Numbers (1, 2, 3, …)
• "A" → Uppercase letters (A, B, C, …)
• "a" → Lowercase letters (a, b, c, …)
• "I" → Uppercase Roman numerals (I, II, III, …)
• "i" → Lowercase Roman numerals (i, ii, iii, …)
3. Reversed
The reversed attribute displays the list in descending
order. It does not take a value (just its presence is
enough).
DETAILS AND SUMMARY
Details
• This is the container that holds content you can
expand or collapse. By default, the content inside
<details> is hidden unless it’s set to open.
Summary
• This acts as the visible title or label for the <details>
element. When you click on it, it toggles the visibility
of the rest of the content inside <details>.
Example code:
<details>
<summary>More Information</summary>
<p>This is additional information that is hidden by
default and only shown when the summary is
clicked.</p>
</details>
FAVICON
A favicon (short for favorite icon) is the small icon
that appears in the browser tab next to your website's
title. It's also used in bookmarks and other places in
browsers.
• We use link tag in header part to insert a favicon in
our webpage
<head>
<link rel="icon"
type="image/png" href="/path-to-your-
favicon/[Link]">
<title>Your Website Title</title></head>
Anchor Tags
An anchor tag (<a>) in HTML is used to create links. It
allows users to navigate from one page to another or to a
specific section within a webpage.
Example:
<a href="[Link] Google</a>
This creates a clickable link that takes the user to Google
when clicked.
• href Attribute
The href attribute in the anchor tag specifies the
destination URL. If href is missing, the link won’t work.
• Types of Links:
1. External Links (Links to other websites)
2. Internal Links (Links within the same website)
3. Email Links (Opens an email client)
4. Telephone Links (Dial a number on mobile)
1. External Links (Linking to another website)
<a href="[Link] to
Wikipedia</a>
This link directs the user to Wikipedia.
2. Internal Links (Linking to another page in the same
website)
<a href="[Link]">About Us</a>
If there is an [Link] page in the same folder, this link
will open it.
3. Linking to a Section within the Same Page
You can create a link that jumps to a specific section of a
webpage using id.
<a href="#section2">Jump to Section 2</a>
<h2 id="section2">This is Section 2</h2>
This will move the user to Section 2 when clicked.
4. Email Links (Opening the email client)
<a href="[Link] an
Email</a>
Clicking this opens the user’s default email client with the
email address already filled in.
5. Telephone Links (Dialing a number on mobile)
<a href="[Link] Us</a>
On mobile, clicking this link will dial the phone number.
• Opening Links in a New Tab
To make a link open in a new tab, use the target="_blank"
attribute.
<a href="[Link]
target="_blank">Open Google in a new tab</a>
• Download with <a> tag
To allow users to download a file (like a PDF, image, or
text file), use the download attribute:
<a href="files/[Link]" download>Download PDF</a>
• href points to the file location.
• download tells the browser to download it instead of
opening it.
IFRAMES
We use the <iframe> tag to embed external content like
YouTube videos or Google Maps.
Embedding a YouTube Video
<iframe width="560" height="315"
src="[Link]
allowfullscreen></iframe>
Target Attribute
The target attribute in HTML is mainly used with the <a>
(anchor) tag to specify how a linked document should be
opened. It defines where the linked resource will be
displayed when a user clicks on the hyperlink.
Values in Target attribute
Tables in HTML
A table is used to display data in rows and columns, just
like a spreadsheet or a timetable. HTML allows us to
create tables using the <table> tag.
Basic Table Structure
A table consists of:
1. Table (<table>) → Defines the table.
2. Table Row (<tr>) → Defines a row.
3. Table Header (<th>) → Defines a heading (bold text).
4. Table Data (<td>) → Defines normal data.
Example:
<table border="1">
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>Alice</td>
<td>25</td>
</tr>
<tr>
<td>Bob</td>
<td>30</td>
</tr>
</table>
Attributes in tables
1. Rowspan - Merging more than one row
2. Colspan - Merging more than one column
3. Cellpadding - Space around the content
4. Cellspacing - Space between the cells
5. Border - Outline for the Cells/Table
Forms in HTML
A form in HTML is a way to collect user input,
like names, email addresses, passwords, or any other
data. Forms are commonly used in websites for:
1. Signing up or logging in
2. Searching for something
3. Sending messages
• A form is created using the <form> tag in HTML.
Form Elements
• Input Field (<input>)
The <input> tag is used to take user input. It has
different type attributes for different types of data.
• Labels (<label>)
The <label> tag is used to describe what an input
field is for. It improves accessibility and usability.
Fieldset and legend tags
• <fieldset> (Group Related Form Elements)
The <fieldset> tag is used to group related inputs
together.
• <legend> (Title for a <fieldset>)
The <legend> tag provides a title for the <fieldset>.
Attributes in the <form> Tag
The <form> tag in HTML has several important attributes
that control how the form behaves. These attributes
define where and how the form data is sent when the
user submits it.
1. action - Where to Send Form Data
The action attribute specifies the URL (web address)
where the form data should be sent after submission.
2. method - How to Send Form Data
The method attribute defines how the form data should
be sent to the server.
Two Common Methods:
1. GET – Sends data in the URL (for simple requests).
2. POST – Sends data in the request body (for sensitive
data).
Attributes in input element
1. autocomplete (Auto-Fill Feature)
The autocomplete attribute tells the browser whether to
remember and suggest previously entered values in a
form field.
Values:
• "on" (default) → Browser remembers and suggests
previous values.
• "off" → Browser does not suggest previous values.
[Link] (Prevent User Input)
The disabled attribute makes an input field unclickable
and uneditable.
3. placeholder (Hint Text Inside Input Field)
The placeholder attribute shows temporary text inside an
input field. It disappears when the user starts typing.
[Link] (Limit Maximum Characters)
The maxlength attribute restricts how many characters a
user can type in an input field.
5. minlength (Set Minimum Characters)
The minlength attribute forces users to enter at least a
certain number of characters.
6. autofocus (Automatically Focus on an Input Field)
The autofocus attribute places the cursor inside an input
field when the page loads.
7. required (Make a Field Mandatory)
The required attribute prevents form submission if the
field is left empty.
Input Types in HTML Forms
The <input> element in HTML is used to collect data from
users. It has different types that define how data is
entered.
1. Text Input Types
These types accept text-based input from the user.
a) text
• Allows users to enter a single-line text.
b) password
• Hides the entered text (e.g., replaces characters with
● or *).
c) email
• Only allows valid email formats (e.g.,
example@[Link]).
d) tel (Telephone)
• Accepts phone numbers, but it does not enforce a
specific format.
e) url
• Requires a valid website URL (e.g.,
[Link]
2. Number and Date Input Types
These types accept numerical values and dates.
a) number
• Accepts only numbers and can have a minimum,
maximum, and step value.
b) range
• Provides a slider to select a number within a range.
c) date
• Allows users to pick a date from a calendar.
d) time
• Allows users to pick a time.
e) datetime-local
• Allows selection of both date and time (without a
timezone).
3. Selection Input Types
These types allow users to choose from options.
a) radio (Single Choice)
• Used for selecting one option from multiple choices.
b) checkbox (Multiple Choice)
• Allows users to select multiple options.
4. File and Media Input Types
These types allow file uploads and media capture.
a) file
• Allows users to upload a file (e.g., images, PDFs).
5. Special Input Types
These types provide special functionalities.
a) color
• Displays a color picker for selecting a color.
b) search
• Similar to text, but designed for search fields.
c) hidden
• Stores data but is not visible to the user.
6. Button Input Types
These types allow different types of buttons.
a) submit
• Sends the form data to the server.
b) reset
• Clears all form inputs.
c) button
• A general button that can be used with JavaScript.
PATTERNS
• The pattern attribute in HTML is used to specify a
regular expression that the input must match before
the form can be submitted.
• It is mainly used with the <input> element for
custom validation.
• If the value doesn't match the pattern, the form
won't be submitted and a warning will be shown.
EMAIL VALIDATION :
<input type="email" name="email" pattern="[a-z0-
9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$" required>
MOBILE VALIDATION :
<input type="tel" name="mobile" pattern="[6-9][0-9]{9}"
required>
Forms in HTML
A form in HTML is a way to collect user input,
like names, email addresses, passwords, or any other
data. Forms are commonly used in websites for:
1. Signing up or logging in
2. Searching for something
3. Sending messages
• A form is created using the <form> tag in HTML.
Form Elements
• Input Field (<input>)
The <input> tag is used to take user input. It has
different type attributes for different types of data.
• Labels (<label>)
The <label> tag is used to describe what an input
field is for. It improves accessibility and usability.
Fieldset and legend tags
• <fieldset> (Group Related Form Elements)
The <fieldset> tag is used to group related inputs
together.
• <legend> (Title for a <fieldset>)
The <legend> tag provides a title for the <fieldset>.
Attributes in the <form> Tag
The <form> tag in HTML has several important attributes
that control how the form behaves. These attributes
define where and how the form data is sent when the
user submits it.
1. action - Where to Send Form Data
The action attribute specifies the URL (web address)
where the form data should be sent after submission.
2. method - How to Send Form Data
The method attribute defines how the form data should
be sent to the server.
Two Common Methods:
1. GET – Sends data in the URL (for simple requests).
2. POST – Sends data in the request body (for sensitive
data).
Attributes in input element
1. autocomplete (Auto-Fill Feature)
The autocomplete attribute tells the browser whether to
remember and suggest previously entered values in a
form field.
Values:
• "on" (default) → Browser remembers and suggests
previous values.
• "off" → Browser does not suggest previous values.
[Link] (Prevent User Input)
The disabled attribute makes an input field unclickable
and uneditable.
3. placeholder (Hint Text Inside Input Field)
The placeholder attribute shows temporary text inside an
input field. It disappears when the user starts typing.
[Link] (Limit Maximum Characters)
The maxlength attribute restricts how many characters a
user can type in an input field.
5. minlength (Set Minimum Characters)
The minlength attribute forces users to enter at least a
certain number of characters.
6. autofocus (Automatically Focus on an Input Field)
The autofocus attribute places the cursor inside an input
field when the page loads.
7. required (Make a Field Mandatory)
The required attribute prevents form submission if the
field is left empty.
Input Types in HTML Forms
The <input> element in HTML is used to collect data from
users. It has different types that define how data is
entered.
1. Text Input Types
These types accept text-based input from the user.
a) text
• Allows users to enter a single-line text.
b) password
• Hides the entered text (e.g., replaces characters with
● or *).
c) email
• Only allows valid email formats (e.g.,
example@[Link]).
d) tel (Telephone)
• Accepts phone numbers, but it does not enforce a
specific format.
e) url
• Requires a valid website URL (e.g.,
[Link]
2. Number and Date Input Types
These types accept numerical values and dates.
a) number
• Accepts only numbers and can have a minimum,
maximum, and step value.
b) range
• Provides a slider to select a number within a range.
c) date
• Allows users to pick a date from a calendar.
d) time
• Allows users to pick a time.
e) datetime-local
• Allows selection of both date and time (without a
timezone).
3. Selection Input Types
These types allow users to choose from options.
a) radio (Single Choice)
• Used for selecting one option from multiple choices.
b) checkbox (Multiple Choice)
• Allows users to select multiple options.
4. File and Media Input Types
These types allow file uploads and media capture.
a) file
• Allows users to upload a file (e.g., images, PDFs).
5. Special Input Types
These types provide special functionalities.
a) color
• Displays a color picker for selecting a color.
b) search
• Similar to text, but designed for search fields.
c) hidden
• Stores data but is not visible to the user.
6. Button Input Types
These types allow different types of buttons.
a) submit
• Sends the form data to the server.
b) reset
• Clears all form inputs.
c) button
• A general button that can be used with JavaScript.
PATTERNS
• The pattern attribute in HTML is used to specify a
regular expression that the input must match before
the form can be submitted.
• It is mainly used with the <input> element for
custom validation.
• If the value doesn't match the pattern, the form
won't be submitted and a warning will be shown.
EMAIL VALIDATION :
<input type="email" name="email" pattern="[a-z0-
9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$" required>
MOBILE VALIDATION :
<input type="tel" name="mobile" pattern="[6-9][0-9]{9}"
required>