Embedded Files
1. What is the primary purpose of the <!DOCTYPE html> declaration?
Answer: The <!DOCTYPE html> declaration is not an HTML tag but an instruction to the web browser about what version of HTML the page is written in. It ensures that the browser renders the page in standards mode, following the latest HTML5 specifications. Without a proper DOCTYPE, browsers might render the page in quirks mode, which can lead to inconsistent styling and layout across different browsers.
2. Explain the difference between the readonly and disabled attributes for form inputs.
Answer: Both readonly and disabled attributes prevent users from editing form input fields, but they have key differences:
readonly: The field cannot be modified, but it remains focusable (users can click or tab into it), its value is visible, and the value is submitted with the form data.
disabled: The field is completely inactive - it cannot be focused, edited, or selected, and its value is not submitted with the form. Disabled fields typically appear grayed out to indicate their inactive state.
3. Why is it important to specify the alt attribute for an <img> tag?
Answer: The alt attribute serves two crucial purposes:
Accessibility: It provides alternative text for screen readers, allowing visually impaired users to understand the image's content and purpose.
Functionality: It displays text when the image fails to load due to broken links, slow connections, or if images are disabled in the browser.
SEO: Search engines use alt text to understand image content and improve page ranking for relevant searches.
4. Describe the function of the placeholder attribute in an <input> tag. Provide an example.
Answer: The placeholder attribute displays a short hint or example value in an input field before the user enters anything. It disappears automatically when the user starts typing and reappears if the field is emptied. This provides user guidance without using permanent text.
Example:
html
<input type="email" placeholder="Enter your email address">
<input type="text" placeholder="Search for products...">
5. What is the key difference between the id and class attributes in HTML?
Answer: The main differences are:
Uniqueness: An id must be unique within a page - only one element can have a specific id value. Multiple elements can share the same class name.
Specificity: In CSS, id selectors (#id) have higher specificity than class selectors (.class), meaning id-based styles will override class-based styles.
JavaScript: ids are commonly used as hooks for JavaScript functionality since getElementById() quickly finds a single element.
6. Explain the CSS Box Model and name its four components.
Answer: The CSS Box Model is a fundamental concept that describes how every HTML element is represented as a rectangular box with four distinct layers:
Content: The actual text, image, or other media content of the element
Padding: The transparent space between the content and the border
Border: The line that surrounds the padding and content
Margin: The transparent space outside the border that separates the element from other elements
These components work from the inside out: Content → Padding → Border → Margin.
7. What is the difference between margin and padding?
Answer: Margin and padding are both spacing properties but serve different purposes:
Padding is the space between an element's content and its border. It's inside the element and affects the element's background and clickable area.
Margin is the space outside an element's border. It separates the element from other elements and doesn't affect the element's background.
Visualization: | Margin | Border | Padding | Content | Padding | Border | Margin |
8. Describe the difference between position: relative; and position: absolute;.
Answer:
position: relative: The element is positioned relative to its normal position in the document flow. Other elements still respect its original space. Use top, right, bottom, left to offset it from its normal position.
position: absolute: The element is removed from the normal document flow and positioned relative to its nearest positioned ancestor (any ancestor with position not static). If no positioned ancestor exists, it's positioned relative to the initial containing block (usually the viewport).
9. What problem does the float property solve, and what related property is used to clear floats?
Answer: The float property was originally designed for wrapping text around images but evolved into a layout tool. It solves the problem of creating multi-column layouts and positioning elements side-by-side.
The clear property is used to stop elements from wrapping around floated elements. Common values include:
clear: left - clears left-floated elements
clear: right - clears right-floated elements
clear: both - clears both sides
10. What is the purpose of the z-index property, and what must be true for it to work?
Answer: The z-index property controls the stacking order of positioned elements along the z-axis (depth). Higher z-index values appear in front of lower values.
Prerequisites for z-index to work:
The element must have a position value other than static (relative, absolute, fixed, or sticky)
The elements must be in the same stacking context
11. Explain the difference between display: none; and visibility: hidden;.
Answer:
display: none: Completely removes the element from the document flow. The element doesn't take up any space, and other elements reflow to fill the gap. It's as if the element doesn't exist.
visibility: hidden: Hides the element but maintains its space in the layout. The element is invisible but still affects the page flow. Other elements don't move to fill the space.
12. What are the three ways to include CSS in a web page? Briefly describe each.
Answer:
Inline CSS: Styles applied directly to an HTML element using the style attribute. Highest specificity but poor maintainability.
html
<p style="color: blue; font-size: 16px;">Text</p>
Internal CSS: Styles defined within a <style> tag in the HTML document's <head> section. Applies to the current page only.
html
<style>
p { color: blue; }
</style>
External CSS: Styles stored in a separate .css file and linked to HTML documents using the <link> tag. Best for maintainability and site-wide consistency.
html
<link rel="stylesheet" href="styles.css">
13. What is a CSS selector? Give examples of a basic selector, a class selector, and an ID selector.
Answer: A CSS selector is a pattern used to select and style HTML elements.
Examples:
Basic selector (Element selector): p - selects all <p> elements
Class selector: .intro - selects all elements with class="intro"
ID selector: #header - selects the element with id="header"
Usage:
css
p { color: black; } /* Element selector */
.intro { font-size: 18px; } /* Class selector */
#header { background: blue; } /* ID selector */
14. What is the purpose of the <dl>, <dt>, and <dd> tags? Provide a simple example.
Answer: These tags create a description list (formerly called definition list):
<dl>: The container for the description list
<dt>: The term being described (Description Term)
<dd>: The description or definition of the term (Description Data)
Example:
html
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language - the standard markup language for web pages</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets - used for describing the presentation of web pages</dd>
</dl>
15. How can you change the numbering style of an ordered list from numbers to uppercase Roman numerals?
Answer: Use the type attribute with value "I" on the <ol> tag:
html
<ol type="I">
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ol>
This will display as:
I. First item
II. Second item
III. Third item
16. What is the main advantage of using the <audio> and <video> tags over older methods like Flash?
Answer: The main advantages include:
Native browser support: No plugins required, works across modern browsers and devices
Better performance: Hardware acceleration and efficient decoding
Mobile compatibility: Works on iOS and Android devices that don't support Flash
Accessibility: Built-in controls and better screen reader support
SEO friendly: Search engines can index multimedia content
Security: Reduced vulnerability compared to plugin-based solutions
17. Why is it a good practice to provide multiple <source> tags within an <audio> or <video> element?
Answer: Different browsers support different media formats. Providing multiple sources ensures broader compatibility:
MP4/MP3: Widely supported across all modern browsers
WebM: Open format with good compression, supported by Chrome, Firefox, Opera
OGG: Open format alternative
The browser will try each source in order until it finds one it can play.
Example:
html
<video controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.webm" type="video/webm">
Your browser does not support the video tag.
</video>
18. What is a client-side image map?
Answer: A client-side image map is an image with defined clickable areas that are processed entirely by the web browser. Unlike server-side image maps (which require server processing), client-side image maps use HTML to define regions within an image that link to different destinations.
Key components:
<img> with usemap attribute
<map> element with name attribute
<area> elements defining clickable regions with shapes and coordinates
19. Name the three shapes you can define for an <area> tag and the coordinate format required for each.
Answer:
rect (rectangle): Requires four coordinates: x1,y1,x2,y2
x1,y1 = top-left corner
x2,y2 = bottom-right corner
circle: Requires three coordinates: x,y,radius
x,y = center point
radius = circle radius in pixels
poly (polygon): Requires multiple coordinate pairs: x1,y1,x2,y2,x3,y3,...
Each pair defines a vertex of the polygon
Example:
html
<area shape="rect" coords="0,0,100,50" href="page1.html">
<area shape="circle" coords="150,75,25" href="page2.html">
<area shape="poly" coords="200,50,250,25,300,50,250,75" href="page3.html">
20. What is an <iframe> commonly used for? Mention two common use cases.
Answer: An <iframe> (Inline Frame) embeds another HTML document within the current page.
Common use cases:
Embedding third-party content: Google Maps, YouTube videos, social media widgets, or advertisements
Loading external applications: Embedded payment forms, chat widgets, or external tools
Content isolation: Displaying documents while maintaining separate styling and scripting contexts
Example:
html
<iframe src="https://www.google.com/maps/embed?..." width="600" height="450"></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/..." frameborder="0"></iframe>
21. What is the primary benefit of using External CSS over Internal or Inline CSS?
Answer: The primary benefit is maintainability and reusability:
Single source of truth: Change styles in one file to update across entire website
Caching: Browsers cache external CSS files, improving load times for subsequent pages
Separation of concerns: Keeps structure (HTML) separate from presentation (CSS)
Team collaboration: Multiple developers can work on styling without conflict
Performance: Reduced HTML file size and parallel downloading of resources
22. What does CSS specificity mean? Put the following selectors in order of increasing specificity: .class, #id, p, .
Answer: CSS specificity is a weighting system that determines which style rules are applied when multiple rules target the same element. It's calculated based on the selector types used.
Order of increasing specificity:
* (universal selector) - specificity: 0,0,0,0
p (element selector) - specificity: 0,0,0,1
.class (class selector) - specificity: 0,0,1,0
#id (ID selector) - specificity: 0,1,0,0
Specificity calculation: (inline, IDs, classes/elements)
23. What is a pseudo-class? Provide two examples.
Answer: A pseudo-class selects elements based on their state or characteristics that aren't represented in the document tree.
Examples:
:hover - applies when user hovers over an element
css
a:hover { color: red; }
:focus - applies when element receives focus
css
input:focus { border-color: blue; }
:nth-child() - selects elements based on their position
css
li:nth-child(odd) { background: #f0f0f0; }
24. What is a pseudo-element? Provide two examples.
Answer: A pseudo-element styles specific parts of an element rather than the element itself.
Examples:
::before - inserts content before an element's content
css
.note::before { content: "Note: "; font-weight: bold; }
::first-letter - styles the first letter of text
css
p::first-letter { font-size: 200%; color: red; }
::selection - styles text selected by the user
css
::selection { background: yellow; color: black; }
25. What is the purpose of the :hover pseudo-class? Provide a CSS example.
Answer: The :hover pseudo-class applies styles when a user hovers over an element with a pointing device (like a mouse). It's commonly used for interactive feedback.
CSS Example:
css
/* Basic link hover effect */
a:hover {
color: #ff0000;
text-decoration: underline;
}
/* Button hover effect */
.button:hover {
background-color: #4CAF50;
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}
/* Image overlay on hover */
.image-container:hover .overlay {
opacity: 1;
}
26. Explain the purpose of the transition property in CSS.
Answer: The transition property creates smooth animations when CSS properties change from one value to another. It controls the timing of these changes rather than having them happen instantly.
Key aspects:
Smooth state changes: Hover effects, focus states, class changes
Configurable timing: Control duration, delay, and timing function
Hardware acceleration: Better performance than JavaScript animations
Example:
css
.button {
background: blue;
transition: background 0.3s ease, transform 0.2s;
}
.button:hover {
background: darkblue;
transform: scale(1.05);
}
27. What is the difference between em and rem units in CSS?
Answer: Both are relative units, but they calculate size differently:
em: Relative to the font-size of the parent element (or the current element for other properties)
css
.parent { font-size: 16px; }
.child { font-size: 1.5em; } /* = 24px (16 × 1.5) */
rem: Relative to the font-size of the root element (html)
css
html { font-size: 16px; }
.element { font-size: 1.5rem; } /* = 24px (16 × 1.5) */
rem is more predictable since it's not affected by nested font sizes.
28. What is a media query, and what is it used for in modern web design?
Answer: A media query is a CSS technique that applies styles based on specific conditions or device characteristics. It's the foundation of responsive web design.
Common uses:
Screen size adaptation: Adjust layouts for mobile, tablet, desktop
Device orientation: Landscape vs portrait modes
Print styles: Optimize content for printing
High-resolution displays: Serve higher quality images
Example:
css
/* Mobile first */
.container { width: 100%; }
/* Tablet */
@media (min-width: 768px) {
.container { width: 750px; }
}
/* Desktop */
@media (min-width: 1200px) {
.container { width: 1170px; }
}
29. Name three HTML5 semantic tags and describe their intended use.
Answer:
<header>: Represents introductory content, typically containing heading elements, logos, navigation, or author information. Can be used for the page header or within articles/sections.
<nav>: Defines a section of navigation links - either within the current document or to other documents. Used for main navigation menus, breadcrumbs, or table of contents.
<article>: Represents self-contained composition that could be distributed independently, such as blog posts, news articles, forum posts, or product cards.
Additional examples:
<section>: Thematic grouping of content
<aside>: Tangentially related content (sidebars, pull quotes)
<footer>: Footer for its nearest sectioning content
30. What is the key difference between the <div> and <span> elements?
Answer: The fundamental difference is their display behavior:
<div>: Block-level element
Starts on a new line and takes full available width
Used for larger content sections and layout structure
Can contain other block and inline elements
<span>: Inline element
Flows within surrounding content, only takes necessary width
Used for styling small portions of text or inline content
Typically contains only text or other inline elements
Example:
html
<div class="container">
<p>This is a paragraph with <span class="highlight">highlighted text</span> inside it.</p>
<div class="sidebar">This is a sidebar div</div>
</div>
Page updated
Google Sites
Report abuse