Prateik_hai_na
Mamu is here
Class 10 CBSE HTML Important QnA
1. HTML Basics
HTML (HyperText Markup Language) is the standard language used to create and design webpages.
It was developed by Tim Berners-Lee in 1991.
It is called a markup language because:
It uses tags to "mark up" text.
These tags tell the browser how to display content.
It does not perform calculations or logical operations like C++ or Java.
👉 Programming languages (C++, Java) execute logic.
👉 HTML only structures content.
2. Basic Structure of HTML Document
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
Content goes here
</body>
</html>
Purpose of Each Tag:
<html> → Root element. Everything is inside this.
<head> → Contains meta information (title, CSS, links).
<title>→ Displays title on browser tab.
<body> → Contains visible content of webpage.
3. Tag vs Element vs Attribute
🔹 Tag
Keywords inside angle brackets.
Example:
<p>
🔹 Element
Complete structure including opening tag, content, and closing tag.
<p>Hello</p>
🔹 Attribute
Provides extra information inside opening tag.
<p align="center">
Here, align is attribute.
Prateik Sharma Sir | Instagram : @beyooneek | Telegram @prateiksir
4. Container vs Empty Elements
Container Elements
Have opening and closing tags.
Contain content.
Example:
<p>Text</p>
<h1>Heading</h1>
Empty Elements
No closing tag.
No content inside.
Example
<br>
<hr>
<img>
5. Steps to Create HTML File (Using Notepad)
[Link] Notepad.
[Link] HTML code.
→
[Link] File Save As.
[Link] as [Link]
[Link] "All Files".
[Link] the file in browser (Chrome/Edge).
7.
6. bgcolor vs background
bgcolor → Sets background color
<body bgcolor="yellow">
background → Sets background image.
<body background="[Link]">
7. Link Colors
Used in <body> tag:
link→ Color of unvisited link.
vlink→ Color of visited link.
alink→ Color when link is clicked.
Example:
<body link="blue" vlink="purple" alink="red">
8. Headings
HTML provides 6 heading levels:
<h1> to <h6>
<h1> → Largest heading
<h6> → Smallest heading
Prateik Sharma Sir | Instagram : @beyooneek | Telegram @prateiksir
9. Paragraph Tag
<p>This is a paragraph.</p>
align values:
left
right
center
justify
Example: <p align="center">Hello</p>
10. <br> vs <hr>
<br> → Line break (moves text to next line).
<hr> → Draws horizontal line across page.
11. HR Attributes
Example
<hr size="5" width="50%" color="red" noshade>
size→ Thickness
width→ Length
→
color Line color
noshade → Removes 3D shadow effect
12. Comments
Syntax:
<!-- This is a comment -->
Browsers ignore comments because they are meant only for developers.
13. <font> vs <basefont>
<font>→ Changes style of specific text.
<basefont> →
Sets default font for whole page.
Attributes:
size
color
face
Example: <font size="4" color="blue" face="Arial">Hello</font>
14. Logical vs Physical Text Styles
Logical Styles (Meaning-based)
<strong> → Important text
<em> → Emphasized
<dfn>→ Definition
Physical Styles (Appearance-based)
<b>→ Bold
<i>→ Italic
<u>→ Underline
Prateik Sharma Sir | Instagram : @beyooneek | Telegram @prateiksir
15. Subscript & Superscript
Example:
H<sub>2</sub>O
x<sup>2</sup>
Used for:
Chemical formulas | Mathematical equations
16. Special Characters (Escape Sequences)
SymbolCode
< < > >
& &
Example: <p>
17. Three Types of Lists
1.<ul> → Unordered list
2.<ol> → Ordered list
3.<dl> → Definition list
18. Unordered List
Structure:
<ul type="circle">
<li>Item 1</li>
<li>Item 2</li>
</ul>
Types:
disc
circle
square
19. Ordered List Attributes
<ol type="A" start="3">
type → 1, A, a, I, i
start→ Starting number
20. Definition List
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language</dd>
</dl>
<dl> → Definition list
<dt> → Term
<dd> → Description
Prateik Sharma Sir | Instagram : @beyooneek | Telegram @prateiksir
21. Nested List
List inside another list.
Example:
<ul>
<li>Item 1
<ol>
<li>Sub Item</li>
</ol>
</li>
</ul>
22. <img> Tag
<img src="[Link]" alt="Sample Image">
src→ Image path (mandatory)
alt→ Alternative text (important for accessibility)
23. Anchor Tag
<a href="[Link]
href → Destination URL
24. Internal Linking
<a name="top"></a>
<a href="#top">Go to Top</a>
Jumps within same page.
25. Email Link
<a href="[Link] Us</a>
Opens email client.
Prateik Sharma Sir | Instagram : @beyooneek | Telegram @prateiksir
26. Table Tags
<table border="1">
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>John</td>
<td>20</td>
</tr>
</table>
<table> →Table
<tr> → Row
<th> → Header
<td> → Data
27. cellpadding vs cellspacing
cellpadding → Space inside cell.
cellspacing → Space between cells.
28. rowspan & colspan
<td rowspan="2">Merged</td>
<td colspan="2">Merged</td>
rowspan → Merge rows.
colspan → Merge columns.
29. Multimedia & Forms
Multimedia:
<audio controls>
<source src="audio.mp3">
</audio>
<video controls>
<source src="video.mp4">
</video>
Forms:
<form>
<input type="text">
<textarea></textarea>
<select>
<option>Option 1</option>
</select>
</form>
Prateik Sharma Sir | Instagram : @beyooneek | Telegram @prateiksir
30. CSS (Cascading Style Sheets)
CSS is used to style HTML elements.
Advantages:
Reduces repetition
Faster loading
Better design control
Separation of content & design
Types:
Inline
<p style="color:red;">
nternal
<style>
p { color: red; }
</style>
External
<link rel="stylesheet" href="[Link]">
Prateik Sharma Sir | Instagram : @beyooneek | Telegram @prateiksir
Prateik_hai_na
MILES TO GO !
LOVE YOU ALL !
Prateik Sharma Sir | Instagram : @beyooneek | Telegram @prateiksir
