HTML (HyperText Markup Language)
1. Versions of HTML
Version Year Released
HTML 1.0 1993
HTML 2.0 1995
HTML 3.2 1997
HTML 4.01 1999
XHTML 2000
HTML5 2014 (finalized)
Current Version
• The current version is HTML5.
• It is still being enhanced and improved continuously.
2. What is HTML ?
HTML (HyperText Markup Language) is the standard language used to create and design web pages.
It uses tags (called elements) to define the structure and content of a webpage, such as:
• Headings
• Paragraphs
• Images
• Links
• Tables
2.1 Key Points about HTML
• It is a markup language, not a programming language.
• HTML files are saved with the .html extension.
• The browser reads HTML and displays the formatted content to users.
• HTML works along with CSS (for styling) and JavaScript (for functionality).
2.2 Syntax
<!DOCTYPE html>
<html>
<head>
<title> </title>
</head>
<body>
-------
-------
</body>
</html>
2.3 Standard Structure
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset = "UTF-8">
<meta name = "viewport" content = "width = device-width, initial-scale=1.0">
<title> My First HTML Page </title>
</head>
<body>
<h1> Welcome to HTML5 </h1>
<p> This is a paragraph of text. </p>
</body>
</html>
3. What are HTML Elements?
An HTML Element is a complete set of an opening tag, content, and a closing tag.
It is used to define the structure and content of web pages.
3.1 Basic Structure of an Element.
<opening-tag> Content </closing-tag>
Example
<p>This is a paragraph.</p>
<p> → Opening tag
This is a paragraph. → Content
</p> → Closing tag
3.2 Types of HTML Elements
1. Block-level Elements
o Start on a new line and take up the full width.
o Examples:
▪ <h1> to <h6> (Headings)
▪ <p> (Paragraph)
▪ <div> (Division)
▪ <table> (Table)
2. Inline Elements
o Do not start on a new line and only take up as much width as needed.
o Examples:
▪ <span>
▪ <a> (Anchor/link)
▪ <strong>, <em>
3.3 Void (Self-Closing) Elements
These do not have closing tags.
Examples:
Syntax : < tagname />
1. <img src="[Link]" alt="Image"/>
2. <br/> → Line Break
3. <hr/> → Horizontal Rule
4. HTML Headings
In HTML, headings are used to define titles or headings on a webpage.
They help to organize content and improve readability and SEO (Search Engine Optimization).
4.1 Types of Headings
HTML provides 6 levels of headings, from <h1> to <h6>:
Tag Purpose
<h1> Main heading (largest text)
<h2> Subheading
<h3> Smaller subheading
<h4> Smaller than <h3>
<h5> Smaller than <h4>
<h6> Smallest heading
Example :
<h1>This is Heading 1</h1>
<h2>This is Heading 2</h2>
<h3>This is Heading 3</h3>
<h4>This is Heading 4</h4>
<h5>This is Heading 5</h5>
<h6>This is Heading 6</h6>
Usage Tip
• Use <h1> only once per page for the main title.
• Use <h2> to <h6> for subheadings and structure.
5. HTML Paragraphs
In HTML, paragraphs are used to write blocks of text.
To define a paragraph, we use the <p> tag. Browsers automatically add space before and after
paragraphs to separate them visually.
Syntax
<p>This is a paragraph of text in HTML.</p>
Example
<p>HTML is the standard language for creating web pages.</p>
<p>It uses tags to structure the content.</p>
Output
This will display two separate lines of text with space between them.
6. Line Break
In HTML, the <br> tag is used to insert a line break, meaning the text after the <br> will appear on the
next line.
It is a self-closing tag, so it does not need a closing tag.
Syntax
Line 1 text.<br>Line 2 text.
Example
<p>This is the first line.<br>This is the second line after a break.</p>
Output
This is the first line.
This is the second line after a break.
7. Horizontal Rule
The <hr> tag in HTML is used to insert a horizontal line across the webpage.
It is a self-closing tag
Syntax
<hr>
Example
<h1>Welcome</h1>
<p>This is the introduction.</p>
<hr>
<p>This is a new section after the horizontal line.</p>
Output
It will display a horizontal line between the two paragraphs
8. Presentational Elements / Text formatting
Presentational elements in HTML are tags that are used to control the appearance or style of
text directly, rather than its structure.
8.1 Common Presentational Elements
Tag Purpose Example
<b> Makes text bold (no extra meaning). <b>Bold Text</b>
<i> Makes text italic. <i>Italic Text</i>
<em> Emphasized text <em>semantic italic</em>
<small> Makes text smaller. <small>Small Text</small>
<u> Underlines text. <u>Underlined Text</u>
<sup> Superscript (above the line). x<sup>2</sup> gives x²
<sub> Subscript (below the line). H<sub>2</sub>O gives H₂O
<strike> or <del> Strikethrough (deprecated). <strike>Old Text</strike>
<mark> Highlighted text <mark>Highlighted text</mark>
<Strong> Strongly important text <strong>Semantic Bold</strong>
<ins> Inserted text <ins>Inserted text</ins>
9. Preserved Whitespace in HTML
By default, HTML ignores extra spaces, tabs, and newlines in the code when displaying text in
the browser.
If you want the browser to preserve whitespace and line breaks exactly as written, you can use the:
<pre> Tag
• The <pre> tag is used to display preformatted text.
• It preserves spaces, tabs, and line breaks in the exact format written in the HTML.
Example
<pre>
This is line 1.
This is line 2 with a tab space.
This is line 3.
</pre>
Output
This is line 1.
This is line 2 with a tab space.
This is line 3.
When to Use
• For showing code snippets.
• For displaying poems, songs, or formatted text that needs exact spacing.
10. What are HTML Attributes?
Attributes in HTML provide additional information about an element.
They are always written inside the opening tag and usually come in name="value" format.
Example
<img src="[Link]" alt="A red flower" width="300">
• src → Specifies the image source.
• alt → Alternative text if the image cannot load.
• width → Sets the width of the image.
10.1 Common HTML Attributes
Attribute Purpose Example
id Unique identifier for an element. <p id="intro">Text</p>
class Applies a class name for styling. <div class="box">Content</div>
href Specifies link URL in <a>. <a href="[Link]
src Image source in <img>. <img src="[Link]">
alt Text shown if image fails. <img alt="description">
style Inline CSS styling. <p style="color:red;">Text</p>
title Tooltip text on hover. <p title="info">Hover me!</p>
11. Hyperlink
11.1 What is a Hyperlink in HTML?
• A hyperlink allows users to navigate from one page to another or jump to a section of the
same page.
• The <a> tag (anchor tag) is used to create a hyperlink.
Syntax:
<a href="URL">Link Text</a>
href = "hyperlink reference" (URL or file path)
Link Text = text the user clicks
11.2 Examples:
1. Link to another website:
<a href="[Link] target="_blank"> Go to Google</a>
2. Link to another page in same folder:
<a href="[Link]">About Us</a>
3. Link to a section within the same page:
<a href="#contact">Contact Section</a>
...
<h2 id="contact"> Contact Us </h2>
<p> Email: abc@[Link] </p>
12. HTML Images – <img> Tag
12.1 What is <img>?
The <img> tag is used to display images in a web page.
It does not have a closing tag and is written as a self-closing element.
Example :
<img src="image-path" alt="description" width="value" height="value">
12.2 Attributes of <img> Tag
Attribute Description
src Source: Specifies the path to the image (required)
Alternative text if the image doesn't load
alt
(required for accessibility)
width Width of the image in pixels or %
height Height of the image in pixels or %
title Shows tooltip text when mouse hovers
12.3 Image Path Types
1. Absolute Path
Full URL from the internet:
<img src="[Link] alt="Sample Image">
2. Relative Path
Image from the same folder or nearby folder:
<img src="[Link]" alt="Local Image">
3. Folder Path
If image is in a folder like /images:
<img src="images/[Link]" alt="Folder Image">
12.4 Tips
• Always use the alt attribute – it's good for accessibility (screen readers) and SEO.
• Avoid very large image sizes – it affects page loading time.
• Use width and height to control image layout.
• Use relevant file formats:
o .jpg or .jpeg: Good for photos.
o .png: Transparent background images.
o .gif: Animated images.
o .svg: Scalable vector graphics.
13. HTML Lists
A list in HTML is used to group related items together. It helps present content in a structured and
organized way.
Think of it like:
• A grocery list
• A to-do list
• A step-by-step instruction
13.1 There are three main types of lists in HTML:
Type Tag Purpose
Ordered List <ol> Numbered list (1, 2, 3...)
Unordered List <ul> Bulleted list (•, ○, ■)
Description List <dl> Term-definition list (like a dictionary)
1. Ordered List (<ol>)
Displays items in a numbered (or lettered, roman) sequence.
Syntax:
<ol>
<li>First item</li>
<li>Second item</li>
</ol>
Type Attribute:
You can change numbering style using type:
<ol type="A"> // <!-- A, a, I, i, 1 (default) -->
<li>Apple</li>
<li>Banana</li>
</ol>
2. Unordered List (<ul>)
• Displays items with bullets.
Syntax:
<ul>
<li>Milk</li>
<li>Bread</li>
</ul>
Output:
• Milk
• Bread
Type Attribute:
Change bullet style:
<ul type="circle"> <!-- disc (default), circle, square -->
<li>Circle bullet</li>
</ul>
3. Description List (<dl>)
• Displays terms and definitions, like a dictionary.
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
14. HTML table
An HTML table is used to display data in a structured format using rows and
columns. This is useful when you want to present information like schedules, marks, price
lists, etc.
14.1 Basic Structure of an HTML Table:
Part Tag Purpose
Table <table> Container for the table
Table Row <tr> Defines a row
Table Header <th> Defines a header cell (bold & centered)
Table Data <td> Defines a data cell
14.2 Syntax
<table>
<thead>
<tr>
<th>Heading1</th>
<th>Heading2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data1</td>
<td>Data2</td>
</tr>
</tbody>
</table>
14.3 Attributes for Styling:
Attribute Purpose
border Adds border around cells
cellspacing Space between cells
cellpadding Space inside each cell
width / height Size control
colspan Merge columns
rowspan Merge rows
15. HTML Div element :
15.1 What is <div> in HTML?
<div> stands for Division.
It is a block-level container used to group together HTML elements and apply CSS styling or layout to
them collectively.
15.2 Why use <div>?
• To organize content into sections.
• To apply styles (colors, borders, spacing).
• To create layouts (like header, sidebar, footer).
• Helps in clean and readable code.
15.3 Syntax:
<div>
<!-- Any content here -->
</div>
Simple Example:
<div style="background-color: lightblue; padding: 10px;">
<h2>This is a Div Block</h2>
<p>Divs are useful for grouping content together.</p>
</div>
16. Character Entities
16.1 What are Character Entities in HTML?
Some characters like <, >, &, ", and ' have special meanings in HTML, so they cannot be used directly.
To display these characters as normal text, we use Character Entities.
16.2 Syntax of Character Entities:
&entity_name; or &#entity_number;
16.3 Commonly Used Character Entities:
Character Entity Name Entity Number Use
< < < Less than symbol
> > > Greater than symbol
& & & Ampersand
" " " Double quote
' ' ' Single quote
© © © Copyright symbol
® ® ® Registered trademark
₹ ₹ - Indian Rupee symbol
Example Code:
<p>5 < 10 and 10 > 5</p>
<p>Use & to join strings in programming</p>
<p>Price: ₹100 ₹</p>
<p>This site is © 2025 Ram<p>
Output:
5 < 10 and 10 > 5
Use & to join strings in programming
Price: ₹100 ₹
This site is © 2025 Ram
17. HTML form
An HTML form is used to collect user input. It can include elements like text fields, radio buttons,
checkboxes, dropdowns, and buttons.
Forms send user data to a server for processing using either GET or POST methods.
17.1 Basic Structure of an HTML Form:
<form action="[Link]" method="post">
<!-- Form fields go here -->
</form>
action → URL or file where data will be sent.
method → How data is sent. Use:
o get → appends data in URL
o post → sends data securely in body
17.2 Form attributes
1. action
• Purpose: Specifies where to send the form data after submission.
• Example:
<form action="[Link]">
• If left empty (action=""), the data will be submitted to the same page.
2. method
• Purpose: Specifies the HTTP method used to send data.
• Values:
o "get" – Appends data in the URL (not secure).
o "post" – Sends data in the body (more secure).
• Example:
<form method="post">
3. target
• Purpose: Specifies where to display the response after submitting the form.
• Values:
o _self – Same window (default)
o _blank – New tab/window
• Example: <form target="_blank">
4. autocomplete
• Purpose: Enables or disables browser auto-filling of form fields.
• Values: "on" or "off"
• Example:
<form autocomplete="off">
17.3 Simple Example with Form Attributes:
<form action="[Link]" method="post" target="_blank" autocomplete="on">
<label>Name:</label>
<input type="text" name="username" />
<input type="submit" />
</form>
17.4 Working with Form Elements in HTML
HTML provides various form elements to gather different types of user inputs.
1. Text Input
<label for="fname">First Name:</label>
<input type="text" id="fname" name="firstname">
Used to take single-line text input.
2. Password Input
<label for="pwd">Password:</label>
<input type="password" id="pwd" name="password">
Input is hidden (dots/asterisks).
3. Radio Buttons
<p>Gender:</p>
<input type="radio" id="male" name="gender" value="Male">
<label for="male">Male</label>
<input type="radio" id="female" name="gender" value="Female">
<label for="female">Female</label>
Only one option can be selected from a group.
4. Checkboxes
<p>Hobbies:</p>
<input type="checkbox" id="read" name="hobby" value="Reading">
<label for="read">Reading</label>
<input type="checkbox" id="travel" name="hobby" value="Traveling">
<label for="travel">Traveling</label>
Allows selecting multiple options.
5. Dropdown (Select)
<label for="course">Choose a course:</label>
<select id="course" name="course">
<option value="html">HTML</option>
<option value="css">CSS</option>
<option value="js">JavaScript</option>
</select>
Used to create a dropdown list.
6. Textarea
<label for="msg">Message:</label><br>
<textarea id="msg" name="message" rows="4" cols="30"></textarea>
Used for multi-line text input.
7. Button
<input type="submit" value="Submit">
<input type="reset" value="Reset">
<button type="button" onclick="alert('Hello!')">Click Me</button>
Used to submit, reset, or trigger actions.
17.5 Example:
<!DOCTYPE html>
<html>
<head>
<title>Student Application Form</title>
</head>
<body>
<h2>Student Application Form</h2>
<form action="#" method="post">
<label for="first_name">First Name:</label>
<input type="text" id="first_name" name="first_name" required><br><br>
<label for="last_name">Last Name:</label>
<input type="text" id="last_name" name="last_name" required><br><br>
<label for="dob">Date of Birth:</label>
<input type="date" id="dob" name="dob" required><br><br>
<label>Gender:</label>
<input type="radio" id="male" name="gender" value="Male">
<label for="male">Male</label>
<input type="radio" id="female" name="gender" value="Female">
<label for="female">Female</label>
<input type="radio" id="other" name="gender" value="Other">
<label for="other">Other</label><br><br>
<label for="email">Email ID:</label>
<input type="email" id="email" name="email" required><br><br>
<label for="phone">Phone Number:</label>
<input type="tel" id="phone" name="phone" required><br><br>
<label for="course">Course Applying For:</label>
<select id="course" name="course" required>
<option value="">--Select--</option>
<option value="BCA">BCA</option>
<option value="[Link] PMCs">[Link] (PMCs)</option>
<option value="[Link]">[Link]</option>
<option value="B.A">B.A</option>
</select><br><br>
<label>Hobbies:</label>
<input type="checkbox" id="hobby1" name="hobbies" value="Reading">
<label for="hobby1">Reading</label>
<input type="checkbox" id="hobby2" name="hobbies" value="Sports">
<label for="hobby2">Sports</label>
<input type="checkbox" id="hobby3" name="hobbies" value="Music">
<label for="hobby3">Music</label><br><br>
<label for="address">Address:</label>
<textarea id="address" name="address" rows="4" cols="40" required></textarea><br><br>
<input type="submit" value="Submit" >
<input type="reset" value="Reset" >
</form>
</body>
</html>
18. IFrames
18.1 What is an <iframe>?
• <iframe> stands for inline frame.
• It is used to embed another HTML page or content (like websites, videos, etc.) inside your
current HTML page.
• Think of it like a window showing another webpage.
18.2 Basic Syntax:
<iframe src="URL" width="400" height="300"></iframe>
18.3 Example – Embedding a Website:
<h2>My College Website in an IFrame</h2>
<iframe src="[Link] width="600" height="400">
Your browser does not support iframes.
</iframe>
This will display the JSS Science and Technology University website inside your webpage
(if the website allows embedding).
19. What is a Responsive Webpage?
A responsive webpage automatically adjusts its layout and elements to look good on different screen
sizes like:
• Mobile phones
• Laptops
• Desktops
• Tablets
It improves user experience across devices.
19.1 How to Make a Page Responsive?
You typically use:
1. Viewport meta tag
2. CSS Media Queries
3. Flexible Layouts (%, em, rem, etc.)
19.2 Pure HTML Responsive-like Example:
<!DOCTYPE html>
<html>
<head>
<title>Simple HTML Responsive Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<h1>Welcome to My Webpage</h1>
<p>This webpage contains sections and will display well on both mobile and desktop
devices.</p>
<hr>
<h2>About Me</h2>
<p>Hello! I'm a student learning HTML. I enjoy coding and creating web pages.</p>
<h2>Projects</h2>
<ul>
<li>Portfolio Website</li>
<li>Student Form</li>
<li>List and Table Examples</li>
</ul>
<h2>Contact</h2>
<p>Email: student@[Link]</p>
<p>Phone: 123-456-7890</p>
<hr>
<p>© 2025 My Webpage</p>
</body>
</html>
Why This Works on Mobile
• It uses the <meta name="viewport"> tag.
• Simple block elements (<h1>, <p>, <ul>, etc.) naturally stack vertically on small
screens.