HTML5 HTML5 Responsive Design and CSS Integration 1 — Questions and Answers
Question 1: Which HTML5 element and attribute combination is essential for responsive web design on mobile devices?
- <meta name='viewport' content='width=device-width, initial-scale=1'> (Correct answer)
- <meta name='mobile' content='responsive'>
- <meta name='scale' content='1'>
- <meta name='responsive' content='true'>
Correct answer: <meta name='viewport' content='width=device-width, initial-scale=1'>
The viewport meta tag instructs the browser to set the page width to the device width and not scale the page, which is the foundation of responsive design.
Question 2: Which HTML5 element is used to provide multiple image sources for different screen resolutions or sizes?
- <picture> (Correct answer)
- <img srcset>
- <source>
- <responsive-img>
Correct answer: <picture>
The <picture> element contains multiple <source> elements and an <img> fallback, letting the browser choose the most appropriate image for the current conditions.
Question 3: What does the 'srcset' attribute on an <img> element allow?
- Specifying multiple image sources for different screen resolutions or widths (Correct answer)
- Setting a fallback image source
- Lazy-loading images
- Defining image dimensions
Correct answer: Specifying multiple image sources for different screen resolutions or widths
The srcset attribute provides a list of candidate images with their sizes or pixel densities so the browser can select the most appropriate one.
Question 4: Which CSS3 feature, commonly used with HTML5, allows applying different styles based on screen width?
- Media queries (Correct answer)
- Flexbox
- CSS Grid
- CSS Variables
Correct answer: Media queries
CSS media queries use @media rules to apply styles conditionally based on device characteristics like screen width, enabling responsive layouts.
Question 5: What does the 'sizes' attribute on an HTML5 <img> element specify?
- The display size of the image at different viewport widths for srcset selection (Correct answer)
- The natural width and height of the image
- The maximum file size allowed
- The CSS size of the image
Correct answer: The display size of the image at different viewport widths for srcset selection
The sizes attribute describes the image's display width at various viewport conditions, helping the browser pick the optimal source from srcset.
Question 6: Which HTML5 feature allows embedding scalable vector graphics directly in an HTML document?
- Inline SVG (Correct answer)
- HTML5 Canvas
- <embed> element
- Object element
Correct answer: Inline SVG
Inline SVG allows embedding SVG markup directly inside HTML, enabling SVG elements to be styled with CSS and manipulated with JavaScript.
HTML5 HTML5 Responsive Design and CSS Integration 1
Which HTML5 element and attribute combination is essential for responsive web design on mobile devices?