HTML5 HTML5 Responsive Design and CSS Integration

Question 1

Which HTML5 element and attribute combination is essential for responsive web design on mobile devices?

Accepted Answer

Answer

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?

Accepted Answer

Answer

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?

Accepted Answer

Specifying multiple image sources for different screen resolutions or widths

Answer

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?

Accepted Answer

Media queries

Answer

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?

Accepted Answer

The display size of the image at different viewport widths for srcset selection

Answer

The sizes attribute describes the image's display width at various viewport conditions, helping the browser pick the optimal source from srcset.

HTML5 - HTML5 Web Development Practice Test

HTML5 - HTML5 Web Development Practice Test

HTML5 HTML5 Responsive Design and CSS Integration