HTML
1.What is HTML, and why is it used?
It is an hypertext markup language which used to create webpage.
It contain the series of elements
It describe the structure of the webpage
2.What is the difference between HTML and HTML5?
html is a markup language for structuring the webpage while html5 is the latest version with modern feature like (video,audio,semantic,offline storage).
3.What are HTML tags and elements?
tag is an instruction keyword to the browser about how to interpet content.
An element is the complete structure: the opening tag, the content, and the closing tag together.
It represents the actual component on the webpage.
4.What are attributes in HTML?
attributes are extra pieces of information added to a tag to control its behavior or provide details
Define properties of elements (like size, color, link, etc.).
5.What is the difference between <div> and <span>?
div is an block level element which create a divsion or container and it is used to structure or separate section of the webpage and start on newline takes entire width
span is an inline element which used to style small portion of text without breaking the flow of line
6.What are semantic HTML elements? Give some examples.
It describe the meaning of the element
eg:header,footer,section,main,article
7.What is the difference between block-level and inline elements?
block level is an element which start on the new line and stretch the full width available and use the structure the larger section of the webpage
eg:div,p1,h1
Inline is an element do not start on a new line stay with in the flow of surrounding text and used to style small portion of the text
eg:span,a,img
8.What is the purpose of the <head> and <body> tags?
head-Contains metadata which used to define the page title and links external file
body-Contains the actual content that is displayed on the webpage.hold text,img,links etc.
9.What is the difference between <ol>, <ul>, and <dl>?
ol-Creates a list where items are numbered or ordered.
ul-Creates a list where items are bulleted (unordered).
dl-Creates a list of terms and descriptions.
10.What is the difference between id and class?
id-Unique identifier for a single element. Used once per page.
class-Groups multiple elements together for styling/behavior. Can be reused.
11.What are HTML forms, and what are some common form elements?
Forms collect user input and send it to a server.
Common Elements: input,button,label,form
12.What is the difference between GET and POST methods in an HTML form?
GET:
Sends data in the URL (visible).
Used for simple requests (search queries).
Less secure, limited data size.
POST:
Sends data in the request body (hidden).
Used for sensitive data (login, signup).
More secure, supports large data.
13.What is the purpose of the alt attribute in an <img> tag?
Provides alternative text if the image cannot be displayed.
14.What is the difference between<strong>and<b>?
b: Makes text bold (visual only).
strong: Makes text bold and adds semantic meaning
15.What is the purpose of the <meta> tag?
Provides metadata about the webpage
Helps with SEO, accessibility, and browser behavior.
SEO (Search Engine Optimization) is the process of improving a website so that search engines like Google can easily understand, index, and rank it higher in search results
CSS
1.What is CSS, and why is it used?
CSS (Cascading Style Sheets) is used to style HTML elements (colors, fonts, layouts).
It separates content (HTML) from presentation (CSS), making websites cleaner and easier to maintain.
2.Ways to Apply CSS
Inline CSS → inside the style attribute.
Internal CSS → inside <style> in the <head>.
External CSS → separate .css file linked with <link>.
3.Difference between id and class selectors
#id → selects one unique element.
.class → selects multiple elements with the same class.
4.CSS Box Model
Every element is a box with:
Content - text/image.
Padding - space inside border.
Border - edge around content.
Margin - space outside border.
5.Difference between Margin and Padding
Margin = space outside the element (separates from others).
Padding = space inside the element (between content & border).
6.Difference between display: none and visibility: hidden
display: none - element is removed from layout (no space).
visibility: hidden - element is invisible but still takes up space.
7.Difference between position: relative and position: absolute
relative → positioned relative to its normal place.
absolute → positioned relative to the nearest positioned ancestor
8.Difference between inline,block, and inline-block
Inline → stays in line (e.g., <span>).
Block → starts on new line, full width (e.g.,<div>).
Inline-block → behaves like inline but allows block properties (width, height).
9.What is Flexbox, and why is it used?
Flexbox = one-dimensional layout system (row OR column).
Used for aligning items easily (nav bars, centering, equal spacing).
10.What is CSS Grid, and how is it different from Flexbox?
Grid = two-dimensional layout (rows AND columns).
Flexbox = best for alignment in one direction.
Grid = best for complex page layouts.
11.Difference between px, %, em, and rem
px - fixed pixels.
% - relative to parent element.
em - relative to parent’s font size.
rem - relative to root (html) font size.
12.Pseudo-classes in CSS
Define special states of elements.
Examples:
:hover - when mouse is over.
:focus - when input is active.
:nth-child(2) - selects the 2nd child.
13.Media Query
Used for responsive design (different styles for different screen sizes).
css
@media (max-width: 600px) {
body { background-color: lightblue; }
}
14.CSS Specificity
Determines which CSS rule wins when multiple apply.
Order: Inline > ID > Class > Element.
15.Centering an Element Horizontally & Vertically
Using Flexbox:
css
.container {
display: flex;
justify-content: center; /* horizontal */
align-items: center; /* vertical */
height: 100vh;
}
Top comments (0)