1.

HTML5 Basics
Q1: What is HTML5?

• HTML5 is the latest version of HyperText Markup Language (HTML) used for
structuring web content.
• It includes new semantic elements, multimedia support, and APIs.

Q2: What are the key features of HTML5?

✅ New Semantic Elements (<header>, <footer>, <article>, <section>)

✅ Multimedia Support (<audio>, <video>)
✅ Form Enhancements (<datalist>, <output>, autocomplete)
✅ Canvas API for Graphics (<canvas>)
✅ Local Storage (localStorage, sessionStorage)
✅ Geolocation API (for getting user location)

Q3: What are semantic elements in HTML5?

• Semantic elements clearly de ne their meaning for both browsers and developers.
Tag Description
<header> De nes a header section
<nav> De nes navigation links
<section
De nes a section in a document
>
<article
De nes independent content
>
<aside> De nes sidebar content
De nes the footer of a
<footer> document

<header>
<h1>Welcome to My Website</h1>
</header>
<nav>
<a href="#">Home</a> | <a href="#">Contact</a>
</nav>
<section>
<article>
<h2>Article Title</h2>
<p>Article content goes here...</p>
fi
fi
fi
fi
fi
fi
fi
 </article>
</section>
<footer>
<p>&copy; 2025 My Website</p>
</footer>

Q4: What is the difference between <section> and <article>?

Featur
e
<section> <article>
Purpos Groups related Represents independent
e content content
Usage Chapters, topics Blog posts, news articles

<section>
<h2>About Us</h2>
<p>Details about our company...</p>
</section>
<article>
<h2>Latest News</h2>
<p>New features added to our product...</p>
</article>

2. Web Form 2.0

Q5: What is Web Form 2.0?

• Web Form 2.0 is an enhancement in HTML5 that provides new input types, attributes, and
validation features.

Q6: What are new input types in HTML5 Forms?

Input Type Description

type="email" Validates an email address
type="url" Validates a URL
type="date" Selects a date
type="number Accepts only numeric
" values
type="range" Creates a slider control
type="color" Allows color selection
type="tel" Accepts phone numbers
 <form>
Email: <input type="email" required> <br>
Phone: <input type="tel"> <br>
Birthdate: <input type="date"> <br>
<button type="submit">Submit</button>
</form>

Q7: What are new attributes in HTML5 Forms?

Attribute Description
autocomplet
Suggests previously entered values
e
Automatically focuses on input
autofocus eld
required Makes input mandatory
placeholder Displays hint text inside input
pattern De nes a custom validation pattern

<form>
<input type="text" placeholder="Enter your name"
required>
<input type="password" pattern="[a-zA-Z0-9]{8,}"
title="At least 8 characters">
</form>

3. Web Storage (localStorage & sessionStorage)

Q8: What is Web Storage in HTML5?

• Web Storage provides a way to store data inside the browser.

• It includes:
◦ localStorage → Stores data permanently.
◦ sessionStorage → Stores data until the browser is closed.

Q9: What is the difference between localStorage and

sessionStorage?

Feature localStorage sessionStorage

Data Stores data Data is deleted after closing the
Persistence permanently browser
Scope Accessible across tabs Accessible only within a single tab

Q10: How to store and retrieve data using localStorage?

fi
fi
 // Store data
localStorage.setItem("username", "Alice");

// Retrieve data
console.log(localStorage.getItem("username")); // Output:
Alice

// Remove data
localStorage.removeItem("username");

Q11: How to use sessionStorage?

// Store data
sessionStorage.setItem("sessionUser", "Bob");

// Retrieve data
console.log(sessionStorage.getItem("sessionUser")); //
Output: Bob

// Remove data
sessionStorage.removeItem("sessionUser");

Q12: What are the advantages of Web Storage over Cookies?

Web Storage (localStorage,

Feature Cookies
sessionStorage)
Storage
5MB 4KB
Limit
Expiration Never (localStorage), on close (sessionStorage) De ned by expiration
Accessibilit Sent with every HTTP
Only within the browser
y request

4. Geolocation API
Q13: What is the Geolocation API in HTML5?

• The Geolocation API allows web apps to get a user's location.

Q14: How do you get the user’s current location using the Geolocation API?

navigator.geolocation.getCurrentPosition(
position => {
fi
 console.log("Latitude:", position.coords.latitude);
console.log("Longitude:", position.coords.longitude);
},
error => {
console.error("Error:", error.message);
}
);

Q15: What are the parameters of getCurrentPosition()?

• successCallback(position) → Returns the latitude & longitude.

• errorCallback(error) → Handles errors like user denied location.
• options (optional) → Con gures accuracy and timeout.

navigator.geolocation.getCurrentPosition(
showPosition,
showError,
{ enableHighAccuracy: true, timeout: 5000 }
);

function showPosition(position) {
console.log("Lat: " + position.coords.latitude);
console.log("Long: " + position.coords.longitude);
}

function showError(error) {
console.error("Error:", error.message);
}

Q16: What are the possible errors in the Geolocation API?

Error Code Description

User denied location
PERMISSION_DENIED access
POSITION_UNAVAILABL
Location unavailable
E
TIMEOUT Request timed out

Q17: How to track the user’s position in real-time?

Use watchPosition() instead of getCurrentPosition().

navigator.geolocation.watchPosition(position => {
fi
 console.log("Updated Latitude:",
position.coords.latitude);
});

Q1: What is CSS?

• CSS (Cascading Style Sheets) is used to style HTML elements.

• It controls layout, colors, fonts, spacing, and positioning.
Example:

h1 {
color: blue;
font-size: 24px;
}

Q2: What are the different ways to apply CSS?

1. Inline CSS (Inside the style attribute in HTML elements)

2. Internal CSS (Inside the <style> tag in the HTML <head>)
3. External CSS (Linked as a separate le using <link>)
Example:

<!-- Inline CSS -->

<h1 style="color: red;">Hello</h1>

<!-- Internal CSS -->

<style>
p { color: green; }
</style>

<!-- External CSS -->

<link rel="stylesheet" href="styles.css">

2. CSS Selectors
Q3: What are the different types of CSS selectors?

Selector Example Description

Universal (*) * { margin: 0; } Targets all elements
Element p { color: blue; } Targets speci c HTML elements
Class (.) .title { font-size: Targets elements with a class
20px; }
fi
fi
 #header { background:
ID (#) Targets elements with a speci c ID
yellow; }
Group (,) h1, h2 { color: red; } Applies styles to multiple elements
Descendant ( ) div p { color: green; } Targets <p> inside <div>
Targets direct child <p> inside
Child (>) div > p { color: red; }
<div>
Adjacent Sibling Targets the immediate <p> after
h1 + p { color: purple; }
(+ ) <h1>
General Sibling h1 ~ p { color: brown; } Targets all <p> after <h1>
(~ )
Example:

/* Universal Selector */
* { margin: 0; padding: 0; }

/* Element Selector */
h1 { color: red; }

/* Class Selector */
.card { border: 1px solid black; }

/* ID Selector */
#main-title { font-size: 24px; }

/* Group Selector */
h1, h2 { text-align: center; }

/* Descendant Selector */
div p { font-size: 18px; }

Q4: What is the difference between class and id selectors?

Feature Class (.) ID (#)

Uniquenes
Can be used multiple times Should be unique on a page
s
Priority Lower speci city Higher speci city
.button { color: #submit-btn { color:
Example
red; } blue; }

Example:

/* Class - Reusable */
fi
fi
fi
.card { background: lightgray; }

/* ID - Unique */
#header { background: yellow; }

3. Styling Basics
Q5: How to change text color and background color?

h1 {
color: blue; /* Text color */
background-color: yellow; /* Background color */
}

Q6: How to change font size and font family in CSS?

p {
font-size: 18px;
font-family: Arial, sans-serif;
}

Q7: How to apply borders and rounded corners in CSS?

.box {
border: 2px solid black; /* Solid border */
border-radius: 10px; /* Rounded corners */
}

Q8: How to add margin and padding in CSS?

Property Description
Space outside an
margin element
paddin
Space inside an element
g

Example:

.container {
margin: 20px; /* Space outside */
padding: 10px; /* Space inside */
}

4. Positioning & Layout

Q9: What are different CSS position values?

Position Description
static Default position
relativ
Moves relative to its normal position
e
absolut Moves relative to the nearest positioned
e ancestor
fixed Stays in the same position on scroll
sticky Sticks when scrolling reaches a certain point

.fixed-box {
position: fixed;
top: 10px;
right: 10px;
}