By Mohan Barle…
🌐 What is HTML?
HTML (HyperText Markup Language) is the standard language used to create
and design web pages. It tells the browser what to display on the screen.
HTML is not a programming language. It is a markup language used to
structure content.
🏠 Simple Real-Life Example
Think of HTML like the skeleton of a house 🏗️
●🧱 Walls = Headings
●🚪 Doors = Links
🛋️ Furniture = Images & Text
Without the skeleton, the house cannot [Link] HTML, a website cannot exist.
🧱 What Does HTML Do?
HTML creates:
📝
📄
● Headings
🔗
● Paragraphs
🖼️
● Links
📋
● Images
📦
● Tables
📑
● Forms
● Lists
It builds the structure of a website.
Simple Example
<!DOCTYPE html>
<html>
<head>
<title>My First Page</title>
</head>
<body>
<h1>Hello Mohan 👋</h1>
<p>This is my first webpage.</p>
</body>
</html>
🏗️ How HTML Works
1️⃣ You write HTML code
2️⃣ Save it as .html file
3️⃣ Open in browser
4️⃣ Browser reads & displays it
📄 Basic Structure of HTML
—--------------------
📘 What is Basic HTML Structure?
Every HTML document must follow this structure so that browsers like Chrome
and Edge can understand and display the page correctly.
🧱 Standard HTML Template
<!DOCTYPE html>
<html>
<head> <title>My First Page</title> </head>
<body>
<h1>Hello World</h1>
<p>This is my first HTML page.</p>
</body>
</html>
🔍 Explanation of Each Part
1️⃣ <!DOCTYPE html>
Declares that this document is HTML5. It tells the browser which HTML version is
used. Always written at the top.
2️⃣ <html> Tag
● Root element of the HTML page.
● All other tags must be inside this tag.
● Think of it as the main container.
3️⃣ <head> Section
Contains metadata (information about the page). This content is NOT visible on the
webpage. Inside <head> we usually write:
●<title> – Page title (shown on browser tab)
●<link> – CSS file
●<script> – JavaScript file
4️⃣ <title> Tag
Defines the page title. Displayed on the browser tab.
Example:
<title>Training Website</title>
5️⃣ 🧍 <body> Section in HTML
<body> is the main visible section of an HTML document. Everything inside
<body> is displayed in the browser.
Examples:
●Headings <h1> to <h6>
●Paragraph <p>
●Images <img>
🏠 Real-Life Example
Think of an HTML page like a human body 🧍
●<head> → Brain (Information, title, meta data)
●<body> → Body (Visible content users see)
If <body> is empty → The page shows nothing.
🏷️ Heading Tags (<h1> – <h6>) in HTML
—-----------
Heading tags are used to define titles and subtitles on a webpage. There are 6
levels of headings:
<h1> → Largest (Most Important)
<h6> → Smallest (Least Important)
🏠 Real-Life Example
Think of headings like a book structure 📖
●📕 Book Title → <h1>
●📘 Chapter Title → <h2>
●📗 Section Title → <h3>
●Smaller topics → <h4>, <h5>, <h6>
<h1>Main Title</h1>
<h2>Sub Title</h2>
<h3>Section Title</h3>
<h4>Topic</h4>
<h5>Small Topic</h5>
<h6>Very Small Topic</h6
📘 Understanding <p>, <br>, and <hr> in HTML
—----------
1️⃣ <p> — Paragraph Tag 📝
Used to define a paragraph.
Example:
<body>
<p>This is my first paragraph.</p>
<p>This is my second paragraph.</p>
</body>
2️⃣ <br> — Line Break Tag ↩️
Used to break the line (go to the next line).
✅ Example:
<body>
<p>Hello<br>World</p>
</body>
📌 Important:
●No closing tag
●Just moves to next line
3️⃣ <hr> — Horizontal Rule Tag ➖
Used to create a horizontal line across the page.
✅ Example:
<p>Section 1</p>
<hr>
<p>Section 2</p>
📦 <div> Tag in HTML
<div> stands for Division. It is a container tag used to group HTML elements
together. It does not add style by default.
It is mainly used for layout and styling with CSS
🧱 Basic Syntax
<div>
<h2>About Me</h2>
<p>I am learning HTML.</p>
</div>
The <div> groups the heading and paragraph together.
🎨 Using <div> with CSS,Creates a colored box with content inside.
<div style="background-color: lightblue; padding: 10px;">
<h2>Welcome</h2>
<p>This is inside a div.</p>
</div>
Example: Page Layout
<div id="header">
<h1>My Website</h1>
</div>
<div id="content">
<p>This is the main content area.</p>
</div>
<div id="footer">
<p>Copyright 2026</p>
</div>
🏷️ <span> Tag in HTML
<span> is an inline container tag used to style or group small parts of text.
● To style a specific word
● To change color of part of text
●To add icons inside text
<p>This is
<span style="color: red; font-weight: bold;">
important
</span>
text.
</p>
—--------------------------- 🏷️ HTML Attributes
What are Attributes?
Attributes provide extra information about an HTML element. They are written
inside the opening tag. They usually come in name="value" format
🧱 Basic Syntax
<tagname attribute="value">Content</tagname>
Example:
<p style="color: red;">Hello</p>
Here:
●style is attribute
●"color: red;" is value
Common HTML Attributes
1️⃣ id
Used to uniquely identify an element. Should be [Link] in CSS & JavaScript
<div id="header">Welcome</div>
2️⃣ class
Used to group multiple [Link] be used multiple [Link] used in CSS
<p class="text">Paragraph 1</p>
<p class="text">Paragraph 2</p>
—---------------- 🔗 Links in HTML – <a> Tag
<a> stands for Anchor.
It is used to create links in a webpage. It connects one page to another. It connects to
websites. It can link to files, emails, or sections
🧱 Basic Syntax
<a href="URL">Link Text</a>
●href = destination address
●Link Text = clickable text
🌍 1️⃣ External Linking
Links to another website.
<a href="[Link] Google</a>
🔓 Open Link in New Tab
<a href="[Link] target="_blank">
Visit Google
</a>
🏠 2️⃣ Internal Linking
Links to another page in the same website.
Example:
<a href="[Link]">About Us</a>
Both files must be in the same folder. Used inside websites
📧 4️⃣ Email Link
<a href="[Link] Email</a>
🖼️ 5️⃣ Images in HTML – <img> Tag
The <img> tag is used to display images on a webpage. It is a self-closing tag
It does NOT have a closing tag
🧱 Basic Syntax
<img src="[Link]" alt="Description">
Important Attributes:
📂 Relative Path vs Absolute Path
—-------------------------------------
1️⃣ Relative Path 📁
Used when the image is inside your project folder.
Example Folder Structure:
project/
├── [Link]
└── images/
└── [Link]
HTML Code:
<img src="images/[Link]" alt="Picture">
2️⃣ Absolute Path 🌐
Used when an image is from the internet.
Example:
<img src="[Link] alt="Online Image">
● Includes full URL
●Used for external images
●Needs internet connection
📋 Lists in HTML (<ul>, <ol>)
—---------------------
Lists are used to display items in an organized way. There are two main types of
lists in HTML:
1️⃣ Unordered List (<ul>)
2️⃣ Ordered List (<ol>). Both use the <li> (list item) tag
1️⃣ Unordered List <ul> 🔹
Used when order does NOT matter. Shows bullet points.
🧱 Syntax
<ul>
<li>Apple</li>
<li>Banana</li>
<li>Mango</li>
</ul>
🔎 Output:
●Apple
●Banana
●Mango
2️⃣ Ordered List <ol>
Used when order DOES matter. Shows numbers by default.
🧱 Syntax
<ol>
<li>Wake up</li>
<li>Brush teeth</li>
<li>Go to school</li>
</ol>
🔎 Output:
1. Wake up
2. Brush teeth
3. Go to school
📌 Different Types in Ordered List
You can change the numbering style using the type attribute.
<ol type="A">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ol>
Types Available:
🧱 What is a Table in HTML?
—------------------
A table is used to display data in rows and columns.
Main Tags Used
●<table> → Creates the table
●<tr> → Creates a row
●<th> → Creates a heading cell (bold by default)
●<td> → Creates a normal data cell
✅ Basic Example
<body>
<table border="1">
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>Rahul</td>
<td>20</td>
</tr>
<tr>
<td>Anjali</td>
<td>22</td>
</tr>
</table>
</body>
How It Works
●First row uses <th> → These are headings
●Next rows use <td> → These are data cells
●Each <tr> creates a new row
📌 Important Attributes
🔹 border: Adds border to the table.
<table border="1">
🔹 colspan: Used to merge columns.
<td colspan="2">Merged Column</td>
🔹 rowspan: Used to merge rows.
<td rowspan="2">Merged Row</td>
—-----------------🧾 Forms in HTML (Very Important)
Forms are used to collect user input (login, signup, feedback, search, etc.)
🔹 <form> Tag: It creates a form. <form> </form>
✅ action and method
<form action="[Link]" method="post"></form>
●action → Where the form data goes (server file)
●method → How data is sent
○get → Data visible in URL
○post → Data hidden (more secure)
🔹 <input> Tag
Used to take different types of input.
1️⃣ Text Input
<input type="text" placeholder="Enter your name">
2️⃣ Password Input
<input type="password" placeholder="Enter password">
3️⃣ Email Input
<input type="email" placeholder="Enter email">
✔ ️Check valid email format automatically.
4️⃣ Radio Button
Used to select one option only. Same name means only one can be selected.
<input type="radio" name="gender"> Male
<input type="radio" name="gender"> Female
5️⃣ Checkbox: Used to select multiple options.
<input type="checkbox"> Cricket
<input type="checkbox"> Football
6️⃣ Submit Button
<input type="submit" value="Register">
🔹 <label> Tag: Used to describe input fields. Better way (professional):
<label>Name:</label>
<input type="text">
<label for="name">Name:</label>
<input type="text" id="name">
🔹 <textarea>
<textarea> is an HTML tag used to create a multi-line text input box. .Used for
long text (messages, comments).
🏠 Real-Life Example
Think of <textarea> like a notebook page 📒
You can write long paragraphs, not just one small word.
<textarea rows="4" cols="30"></textarea>
🔹 <select> Dropdown
<select> is an HTML tag used to create a dropdown list. It allows users to choose
one or more options from a list.
The options are written using the <option> tag inside <select>.
🏠 Real-Life Example
Think of it like a restaurant menu card 🍽️
You don’t type the food name.
You simply select one item from the list.
<select>
<option>India</option>
<option>USA</option>
<option>Canada</option>
</select>
✅ Complete Example Form
<form>
<label>Hobbies:</label>
<input type="checkbox"> Cricket
<input type="checkbox"> Music<br><br>
<label>Message:</label><br>
<textarea rows="4" cols="30"></textarea><br><br>
<label>Country:</label>
<select>
<option>India</option>
<option>USA</option>
</select><br><br>
<input type="submit" value="Submit">
</form>
Semantic HTML (Very Important for Modern Development)
Semantic tags clearly describe the meaning of content.
🔹 <header>: Represents the top section of a page or section.
Usually contains:
●Logo
●Website title
●Navigation
<header>
<h1>My Website</h1>
</header>
🔹 <nav>: Used for navigation links. Only for main navigation links.
<nav>
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Contact</a>
</nav>
🔹 <section>: Represents a section of [Link] to divide a page into parts.
🏠 Real-Life Example
Think of a book 📖
●Chapter 1
●Chapter 2
●Chapter 3
Each chapter is like a <section>.
<section>
<h2>About Us</h2>
<p>We provide Java training for developers.</p>
</section>
<section>
<h2>Our Courses</h2>
<p>Java, Spring, Microservices</p></section>
🔹 <article>
●<article> is a semantic HTML5 tag used to define independent,
self-contained content.
● The content inside <article> should make sense on its own, even if removed
from the page.
🏠 Real-Life Example
Think of a newspaper 🗞️
Each news story:
●Has its own title
●Has its own content
●Can be read independently
That single news story = <article>
<section>
<h1>Latest Blog Posts</h1>
<article>
<h2>What is HTML?</h2>
<p>HTML is used to structure web pages.</p>
</article>
<article>
<h2>What is CSS?</h2>
<p>CSS is used to style web pages.</p>
</article>
</section>
🔹 <footer>
<footer> is a semantic HTML5 tag used to define the footer section of a
webpage or a section.
It usually contains:
●Copyright information
●Author details
●Contact info
●Social media links
●Related links
🏠 Real-Life Example
Think of a book’s last page 📘
At the bottom you see:
●Author name
●Copyright
●Publisher
That bottom part = <footer>
<body>
<header>
<h1>My Website</h1>
</header>
<section>
<h2>About Us</h2>
<p>We provide Java and Web Development training.</p>
</section>
<footer>
<p>Contact: info@[Link]</p>
<p>© 2026 All Rights Reserved</p>
</footer>
</body>
—-------------------Multimedia in HTML 🎵🎬
HTML allows you to add audio, video, and external content to your website.
🔊 <audio> Tag
<audio> is an HTML5 tag used to embed sound or music into a web page.
It allows users to:
⏸
●▶ Play
🔊
● Pause
● Control volume
🏠 Real-Life Example
Think of it like a music player app 🎵
When you open Spotify or any music app,
you can play songs — <audio> works the same way inside a website
✅ Basic Example
<audio controls>
<source src="song.mp3" type="audio/mpeg">
<source src="[Link]" type="audio/ogg">
</audio>
⚙ Important Attributes
1️⃣ controls: Shows audio controls.
<audio controls></audio>
2️⃣ autoplay: Audio starts automatically (not recommended in most cases).
<audio autoplay></audio>
3️⃣ loop: Repeat the audio again and again.
<audio loop></audio>
4️⃣ muted: Starts audio in muted mode.
<audio muted></audio>
🎥 <video> Tag
<video> is an HTML5 tag used to embed videos into a web page.
It allows users to:
⏸
●▶ Play
🔊
● Pause
● Adjust volume
●⛶ Fullscreen
It works similar to a YouTube-style video player.
✅ Basic Example
<video width="400" controls>
<source src="movie.mp4" type="video/mp4">
</video>
<video src="movie.mp4" width="400" controls></video>
🌐 <iframe> Tag
Used to embed content from another website.
Common uses:
●YouTube videos
●Google Maps
●Other webpages
▶️ Embed YouTube Video Example
<iframe width="560" height="315"
src="[Link]
frameborder="0"
allowfullscreen>
</iframe>
🗺️ Embed Google Map Example
<iframe
src="[Link]
width="400"
height="300">
</iframe>
