1. What is <!DOCTYPE html> in HTML5?
The <!DOCTYPE html> declaration defines the document type and version of HTML. In HTML5, it ensures that the browser renders the page in standards mode.
Example:
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Page</title>
</head>
<body>
<h1>Welcome to HTML5</h1>
</body>
</html>
2. Difference between <div> and <span> in HTML
- ``: A block-level element used for grouping elements.
- ``: An inline element used for styling part of text or grouping inline elements.
Example:
<div style="background-color: lightblue;">This is a div</div>
<p>This is a <span style="color: red;">span inside a paragraph</span></p>
3. What are semantic and non-semantic tags in HTML?
-
Semantic Tags: These tags have meaningful names, like
<header>,<article>,<footer>. -
Non-Semantic Tags: Generic containers like
<div>and<span>.
Example of Semantic Tags:
<header>Website Header</header>
<nav>Navigation Links</nav>
<article>Main Content</article>
<footer>Footer Section</footer>
4. Difference between HTML and HTML5
| Feature | HTML | HTML5 |
|---|---|---|
| Doctype | Complex | Simple <!DOCTYPE html>
|
| Multimedia Support | Limited | Supports <audio> and <video>
|
| Canvas Support | No | Yes |
| Semantic Elements | No | Yes |
5. What is the <iframe> tag in HTML5?
An <iframe> (Inline Frame) is used to embed another webpage inside the current page.
Example:
<iframe src="https://www.example.com" width="600" height="400"></iframe>
6. What are formatting tags in HTML?
Tags like <b>, <i>, <u>, <strong>, <em>, <mark>, <small> format text.
7. Difference between <b> and <strong>
-
<b>: Bold text for styling. -
<strong>: Indicates strong importance (SEO-friendly).
Example:
<p>This is <b>bold</b> text and this is <strong>important</strong> text.</p>
8. What is viewport attribute in HTML?
Defines how a webpage is displayed on mobile devices.
Example:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
9. What is an attribute in HTML?
An attribute provides additional information about an element.
Example:
<a href="https://example.com" target="_blank">Visit</a>
10. Block-level vs Inline elements
-
Block-level: Takes full width (
<div>,<p>,<h1>) -
Inline: Takes only necessary width (
<span>,<a>,<img>)
CSS Interview Questions & Answers
1. Difference between CSS and CSS3
- CSS3 introduced new features like animations, transitions, flexbox, and grid.
2. What are selectors in CSS?
-
Simple Selectors:
element,id,class -
Combinators:
descendant,child,adjacent -
Pseudo-selectors:
hover,focus
3. What is media query in CSS?
Used for responsive design.
Example:
@media (max-width: 600px) {
body { background-color: lightgray; }
}
4. Different position values in CSS
-
static,relative,absolute,fixed,sticky
5. What is BOM in CSS?
BOM (Box Model) includes margin, border, padding, content.
6. Difference between PX, EM, REM in CSS
-
px: Fixed size -
em: Relative to parent -
rem: Relative to root
7. What is flexbox in CSS?
A layout module for flexible alignment.
Example:
display: flex;
justify-content: center;
align-items: center;
8. What are pseudo-selectors in CSS?
-
:hover,:focus,:nth-child(n)
9. How to make a website responsive?
Using media queries, fluid layouts, flexbox, and responsive images.
10. What are breakpoints for responsive design?
-
320px,768px,1024px,1200px
11. Why use box-sizing in CSS?
To ensure width includes padding and border.
Example:
* { box-sizing: border-box; }
Top comments (0)