Learn the basics and the most important HTML, CSS, and JavaScript interview questions and answers and make your journey stronger in web development.
1) What is HTML ?
Answer: HTML stands for Hypertext Markup Language. It is the standard and powerful markup language that is used to create web pages.
“HyperText” refers to the clickable links that connect to web pages.
“Markup Language” means it uses multiple tags to define elements like headings, paragraphs, tables, buttons, images, etc.
HTML Code Example:
<!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>
2) What is the difference between <div> and <span>?
Answer: The <div> tag is used in groups or big sections like containers, layouts, etc.
The <span> tag is used when we want to style small parts inside a line, for example, color a specific word.
Simple Example:
<div> Tag:
<div>
<h1>Title</h1>
<p>This is a paragraph.</p>
</div>
<span> Tag:
<p>This is a <span style="color:red;">red</span> word.</p>
3) What is the CSS ?
Answer: CSS stands for “Cascading Style Sheets”. It is a style sheet language used in web development to give styles to the HTML elements.
We can create the best UI designs using CSS because it controls the colors, fonts, spacing, layout, animations, and more.
What CSS Can Do:
- CSS can change the text color, size, and font.
- It can add backgrounds, borders, and shadows
- Can create different layouts (For example, grid or flexbox)
- Make responsive web pages to access them on different devices.
- It adds the best hover effects and animations to the web page.
4) What Is The CSS box model.
Answer: The CSS Box Model is the basic structure of web pages. It is used to understand how the elements are displayed with the proper spacing on a web page.
Every HTML element is treated like a box, and this box is made up of 4 parts:
- Margins
- Borders
- Padding
- Content area
Use Case of CSS Box Model:
+-----------------------------+
| Margin | ⬅️ Outside space (gap from other elements)
| +-----------------------+ |
| | Border | | ⬅️ Add border around the element
| | +-----------------+ | |
| | | Padding | | | ⬅️ Space between content & border
| | | +-------------+ | | |
| | | | Content | | | | ⬅️ Actual text or image inside the content
| | | +-------------+ | | |
| | +-----------------+ | |
| +-----------------------+ |
+-----------------------------+
5) What is JavaScript?
Answer: JavaScript is a high-level, interpreted programming language, and it is also called as a scripting language. It is used to create dynamic and interactive content on the web page.
Example of JavaScript:
Without JavaScript:
<button>Click Me</button>
With JavaScript:
<button onclick="alert('Hello!')">Click Me</button>
6) What is the difference between var, let, and const in JavaScript?
Answer: var, let, and const are the variable scopes in JavaScript.
- var is a short form of “variable” that is used to declare a variable, but it is an older method in JavaScript.
- Let has no official full form, but it comes from “let this be”. It is also used as a variable that can change its value at any time.
- Const stands for “constant”; it is an unchangeable variable that whose value cannot be changed after it’s assigned.
Simple Example of JavaScript Variables:
var name = "John";
let age = 25;
const country = "India";
name = "Doe"; // allowed
age = 30; // allowed
// country = "USA"; // Error: Cannot reassign a const value
7) What are meta tags in HTML?
Answer: Meta tags are special HTML tags that provide all the information about a web page, but they are not visible to the users on the page.
The Meta tags are placed into the <head> section of an HTML document. It helps search engines, browsers, and social media platforms understand your page.
Example of Meta Tags:
<head>
<meta charset="UTF-8">
<meta name="description" content="Learn HTML, CSS, JavaScript tutorials">
<meta name="keywords" content="HTML, CSS, JavaScript, Web Development">
<meta name="author" content="BoxofLearn">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
Why Meta Tags Are Important:
- It helps for SEO (Search Engine Optimization)
- Make your website mobile-friendly
- Improve the page loading and behavior of your site.
- It controls how your site appears on social media previews
8) Explain the purpose of alt attribute in images.
Answer: The alt stands for “alternative text” used in the <img> tag to provide information about the web page images.
Search engines can’t see images, but they can read alt text. So it’s helping Google to understand your content.
Sometimes images are not loading on the website due to network issues. In this case, the alt text can help users understand what kind of images are being placed.
Example of alt Text:
<img src="dog.jpg" alt="A brown dog playing in the park">
If the image doesn’t load, users will still see:
A brown dog playing in the park
9) How can you center a div horizontally in CSS?
Answer: There are multiple ways to center a <div> tag horizontally, depending on the layout method you’re using. Here are the most common and beginner-friendly methods available:
Method 1: Use margin: auto (for fixed width)
.center-div {
width: 300px;
margin: 0 auto;
}
Method 2: Use the Flexbox
.container {
display: flex;
justify-content: center;
}
<div class="container">
<div class="center-div">I am centered</div>
</div>
Method 3: Use text-align: center (for inline-block or text)
.container {
text-align: center;
}
.center-div {
display: inline-block;
}
10) What are CSS selectors ?
Answer: A CSS selector means applying styles to HTML tags. You can directly style the whole element without typing a specific class.
For example:
<p> Hello, my name is Harry.</p>
<p> I am a 30-year-old </p>
We will applying style to the whole <p> tag:
p {
color: red;
}
Types of CSS Selectors:
| Selector Type | Example | What It Selects |
|---|---|---|
| Universal Selector | * | All elements on the page |
| Element Selector | h1, p, div | All elements of that tag name |
| Class Selector | .title | Elements with class=”title” |
| ID Selector | #header | Element with id=”header” |
| Group Selector | h1, p | Multiple elements (h1 and p) |
| Descendant Selector | div p | <p> inside a <div> |
| Child Selector | ul > li | Direct <li> children of a <ul> |
| Pseudo-class | a:hover | hover effect |
| Attribute Selector | input[type=”text”] | All input fields of type text |
11) What is the DOM?
Answer: DOM stands for Document Object Model. It is a programming interface that represents your web page dynamically using JavaScript.
You can do anything using DOM, like editing content, hiding buttons, etc.
Real-World Example:
Your HTML page:
<body>
<h1>Hello</h1>
<p>This is a paragraph</p>
</body>
This is seen as a tree in the DOM:
Document
└── html
└── body
├── h1
└── p
JavaScript can do:
document.querySelector("h1").innerText = "Hi there!";
12) How do you create an object in JavaScript?
Answer: You create an object in JavaScript to store and organize data.
Method 1: Using Object Literal (most common method)
const person = {
name: "John",
age: 30,
isStudent: false
};
A person is an object with a key’s name, age, and isStudent.
Method 2: Using new Object() method
const car = new Object();
car.brand = "Toyota";
car.model = "Camry";
car.year = 2023;
Method 3: Using a Constructor Function
function Person(name, age) {
this.name = name;
this.age = age;
}
const user1 = new Person("Alice", 25);
Method 4: Using the Class method(ES6+)
class Animal {
constructor(name, type) {
this.name = name;
this.type = type;
}
}
const dog = new Animal("Buddy", "Dog");
13) What is the difference between HTML5 and HTML?
Answer: HTML stands for “Hyper Text Markup Language”. It is a standard language that is used to create webpages.
HTML5 is the latest version of HTML, which adds new features and improvements to the web.
Foe example:
HTML:
<b>Hello</b>
HTML5:
<strong>Hello</strong>
<video src="video.mp4" controls></video>
Features Added in HTML5:
- New semantic elements: <header>, <footer>, <section>, <article>
- Media tags: <audio>, <video>
- Graphics support: <canvas>, SVG
- Form input types: email, date, range
- Offline storage: localStorage, sessionStorage
14) How do you create a hyperlink in HTML?
Answer:
Basic Syntax:
<a href="https://www.example.com">Click Here</a>
href = hyperlink reference
The text between <a>…</a> is the clickable part.
Example:
<a href="https://www.google.com">Visit Google</a>
Output: Visit Google > when you click on it, so it will open Google.
15) What is a media query in CSS?
Answer: A media query is a powerful method that allows us to make a responsive design for different-sized devices. For example, mobile, tablets, and Windows, etc.
Basic Syntax of Media Query:
@media (max-width: 600px) {
body {
background-color: lightblue;
}
}
This means:
If the screen width is 600px or less, the background color will change to light blue
16) What are pseudo-classes in CSS?
Answer: Pseudo-classes are the CSS method that allows you to make a style for an element in a special state, such as hover on the link, activate the button, or focus on the specific content.
Syntax of pseudo-classes:
selector:pseudo-class {
/* CSS rules */
}
17) What is the this keyword in JavaScript ?
Answer: “this” is a special keyword in JavaScript that refers to the object that is currently calling or executing a function.
const user = {
name: "Jully",
greet: function() {
console.log("Hi, my name is " + this.name);
}
};
user.greet(); // Output: Hi, my name is Jully
18) Explain the difference between == and === in JavaScript.
Answer: == and === both are comparison operators in programming, but they work differently.
== (Loose Equality)
- It compares only values
- It performs only type conversion.
- For example:
'5' == 5 // This is true because string converted to the number
=== (Strict Equality)
- This operator compares values AND data types
- No type conversion
- For example:
'5' === 5 // false (string and number are not matching)
19) What is the DOCTYPE in HTML?
Answer: DOCTYPE specifies the version of HTML.
<! DOCTYPE> is an instruction at the top of your HTML file that tells the browser, “Hey! This page is written in HTML5“.
For example:
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>
20) What is the purpose of the <head> tag?
Answer: The <head> tag contains metadata of the web page, such as stylesheet links, scripts, and other important information that does not display on the page.
Simple Example of The <Head> Tag:
<head>
<title>Box of Learn</title>
<meta charset="UTF-8">
<meta name="description" content="Learn HTML, CSS, JavaScript easily">
<link rel="stylesheet" href="style.css">
</head>
Top 10 Java Coding Interview Questions
Top 10 Artificial Intelligence (AI) Interview Questions and Answers