HTML: Media, Links & Embedding Flashcards
Subtopics: Embedding images, audio, video Responsive media with srcset and picture Anchor links and target attributes Iframes and sandboxing Interview-style Questions: How do you make an image responsive? What’s the difference between , , and ? What are the security concerns with iframes? (20 cards)
What tag is used to embed an image in HTML?
The <img></img> tag is used to embed an image in HTML pages.
How do you make an image responsive in HTML?
Use CSS max-width: 100% and height: auto, or use the <picture> element with srcset for different resolutions.</picture>
What is the <audio> tag used for?</audio>
The <audio> tag is used to embed sound content such as music or audio streams.</audio>
What does the <video> tag do in HTML?</video>
The <video> tag allows you to embed video files directly into an HTML page with controls like play, pause, and volume.</video>
What is the purpose of the srcset attribute in <img></img>?
srcset allows browsers to choose the most appropriate image based on device resolution and screen size.
What does the <picture> tag do?</picture>
The <picture> tag provides multiple source images for different scenarios, enabling art direction and responsive image loading.</picture>
What is an anchor link in HTML?
An anchor link (<a>) is used to link to other pages, locations within the same page, or external URLs.</a>
What does the target="_blank" attribute do?
It opens the linked document in a new browser tab or window.
What is the <iframe> tag used for?
The <iframe> tag embeds another HTML page within the current one, such as YouTube videos or embedded widgets.
What are security risks of using iframes?
Iframes can be exploited for clickjacking, cross-site scripting, and loading malicious content if not sandboxed properly.
What is the sandbox attribute in iframes?
sandbox restricts the iframe’s capabilities, improving security by disabling scripts, forms, and plugins unless explicitly allowed.
What is the difference between <embed></embed>, <object>, and <iframe>?</object>
<embed></embed>
is for external resources (e.g. PDFs), <object> for general-purpose content (can fallback), <iframe> for embedding full web pages.</object>
What are the advantages of using <picture> and srcset?</picture>
They allow for responsive image loading, improving load time and user experience on different devices.
What are disadvantages of embedding large media files?
They increase page load time, can degrade performance, and may cause compatibility issues on some browsers.
What is a best practice when using media tags?
Always provide fallback content or attributes like controls and preload to enhance accessibility and user experience.
What are good use cases for <iframe>?
Embedding third-party content like maps, videos, or analytics dashboards without integrating directly into your codebase.
What is the architectural impact of heavy media usage?
Heavy media can strain bandwidth, increase load times, and require CDN strategies and caching for scalability.
How does responsive media affect performance?
It optimizes asset loading for device capabilities, reducing load time and improving UX on mobile and slow networks.
What are common interview questions about HTML media?
‘How do you make media responsive?’, ‘What are the security implications of using iframes?’, ‘Difference between embed, object, iframe?’
What is a potential gotcha with <img></img> and srcset?
Browsers may choose unexpected sources from srcset if sizes and resolutions are not defined clearly.
