What is HTML?
HTML stands for HyperText Markup Language.
👉 HTML is not a programming language
👉 It is a markup language used to create the structure of a web
page
HTML tells the browser:
What is a heading
What is paragraph text
Where to show images
How to create links, tables, forms, etc.
Every website you see on the internet starts with HTML 🌐
What is an HTML Tag?
HTML uses tags to define elements.
A tag usually has:
Opening tag <tag>
Closing tag </tag>
Example:
<p>This is a paragraph</p>
Basic Structure of an HTML Page
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
</head>
<body>
<h1>Hello World</h1>
<p>This is my first webpage</p>
1
</body>
</html>
Commonly Used HTML Tags
1. <!DOCTYPE html>
Tells the browser that this is an HTML5 document
2. <html>
Root element of the HTML page
Wraps all HTML content
3. <head>
Contains meta information
Title, CSS links, SEO info (not visible on page)
4. <title>
Sets the page title (shown in browser tab)
<title>Home Page</title>
5. <body>
Contains all visible content of the webpage
Text Content Tags
6. Headings (<h1> to <h6>)
Used for headings (big to small)
<h1>Main Heading</h1>
<h2>Sub Heading</h2>
<h6>Small Heading</h6>
2
7. <p> – Paragraph
<p>This is a paragraph</p>
8. <br> – Line Break
Moves text to next line
No closing tag
Hello<br>World
9. <hr> – Horizontal Line
<hr>
Formatting Tags
10. <b> – Bold
<b>Bold Text</b>
11. <i> – Italic
<i>Italic Text</i>
12. <u> – Underline
<u>Underlined Text</u>
Link & Image Tags
13. <a> – Anchor (Link)
<a href="[Link] to Google</a>
14. <img> – Image
<img src="[Link]" alt="My Image">
src → image path
alt → alternate text
List Tags
3
15. Ordered List <ol>
<ol>
<li>HTML</li>
<li>CSS</li>
</ol>
16. Unordered List <ul>
<ul>
<li>JavaScript</li>
<li>React</li>
</ul>
Table Tags
<table>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>Sree</td>
<td>25</td>
</tr>
</table>
<table> → table
<tr> → row
<th> → heading cell
<td> → data cell
Form Tags
4
<form>
<input type="text" placeholder="Enter name">
<input type="password">
<button>Submit</button>
</form>
Common form elements:
<input>
<textarea>
<select>
<button>
Other Important Tags
Tag Use
Containe
<div>
r / layout
Inline
<span> text
styling
SEO &
<meta>
charset
Connect
<link>
CSS
Connect
<script>
JS
1️⃣ HTML Elements
What is an HTML Element?
An HTML element is a complete structure made of:
Opening tag
Content
Closing tag
5
Example:
<p>Hello World</p>
👉 Here:
<p> → opening tag
Hello World → content
</p> → closing tag
✅ This whole thing is one HTML element
Types of Elements
a) Block-level Elements
Start on a new line
Take full width
Examples:
<div>, <p>, <h1>, <table>, <form>
b) Inline Elements
Stay in the same line
Examples:
<span>, <a>, <img>, <b>, <i>
2️⃣ HTML Attributes
What are Attributes?
Attributes give extra information about an element.
👉 Attributes are written inside the opening tag
👉 Format:
<tag attribute="value">
Common Attributes with Examples
1. href (for links)
6
<a href="[Link]
2. src (for images)
<img src="[Link]" alt="Profile Image">
3. alt (alternate text)
<img src="[Link]" alt="Company Logo">
4. id (unique identifier)
<p id="para1">This is paragraph</p>
5. class (used for CSS styling)
<div class="box">Content</div>
6. style (inline CSS)
<h1 style="color: red;">Hello</h1>
7. type (input type)
<input type="text">
<input type="password">
3️⃣ HTML Forms
What is a Form?
An HTML form is used to collect user data and send it to the server.
Examples:
Login form
Registration form
Contact form
7
Basic Form Structure
<form action="[Link]" method="post">
<label>Name:</label>
<input type="text" name="username"><br><br>
<label>Password:</label>
<input type="password" name="password"><br><br>
<input type="submit" value="Login">
</form>
Common Form Elements
1. <input>
<input type="text">
<input type="email">
<input type="password">
<input type="radio">
<input type="checkbox">
2. <textarea>
<textarea rows="4" cols="30"></textarea>
3. <select> (Dropdown)
<select>
<option>India</option>
<option>USA</option>
8
</select>
4. <button>
<button>Submit</button>
Important Form Attributes
Attribute Use
action Where data is sent
method GET / POST
name Data key
required Mandatory field
placeholder Hint text
Example:
<input type="email" required placeholder="Enter email">
4️⃣ HTML Tables
What is a Table?
Tables are used to display data in rows and columns.
Table Structure
<table border="1">
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>Sree</td>
9
<td>25</td>
</tr>
<tr>
<td>Ravi</td>
<td>28</td>
</tr>
</table>
Table Tags Explained
Tag Meaning
<table> Table
<tr> Table row
Table
<th>
heading
<td> Table data
Table
<thead>
header
Table
<tbody>
body
Table
<tfoot>
footer
Advanced Table Example
<table border="1">
<thead>
<tr>
<th>Course</th>
<th>Duration</th>
10
</tr>
</thead>
<tbody>
<tr>
<td>MERN</td>
<td>6 Months</td>
</tr>
</tbody>
</table>
1️⃣ Lists in HTML
What is an HTML List?
A list is used to display items in an ordered or unordered way.
HTML supports 3 types of lists:
1. Unordered List
2. Ordered List
3. Description List
🔹 1. Unordered List (<ul>)
👉 Used when order doesn’t matter
👉 Default bullets (●)
Example:
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
11
Output:
• HTML
• CSS
• JavaScript
Change Bullet Style (using type)
<ul type="circle">
<li>Apple</li>
<li>Banana</li>
</ul>
Types:
disc (default)
circle
square
🔹 2. Ordered List (<ol>)
👉 Used when order is important
👉 Shows numbers by default
Example:
<ol>
<li>Wake up</li>
<li>Study</li>
<li>Practice</li>
</ol>
Output:
1. Wake up
2. Study
3. Practice
12
Ordered List Types
<ol type="A">
<li>HTML</li>
<li>CSS</li>
</ol>
Types:
1 → Numbers (default)
A → Capital letters
a → Small letters
I → Roman (capital)
i → Roman (small)
Start from a Specific Number
<ol start="5">
<li>Item</li>
<li>Item</li>
</ol>
🔹 3. Description List (<dl>)
👉 Used for terms and descriptions
Example:
<dl>
<dt>HTML</dt>
<dd>Markup language for web pages</dd>
<dt>CSS</dt>
<dd>Used for styling</dd>
</dl>
13
Tags Used:
Tag Meaning
<dl> Description list
<dt> Term
<dd> Description
🔹 Nested List (List inside List)
<ul>
<li>Frontend
<ul>
<li>HTML</li>
<li>CSS</li>
</ul>
</li>
<li>Backend</li>
</ul>
14
