HTML Links and Media Interview
Frequently asked interview questions on anchors, images, audio/video, and media best practices.
Topics: anchor attributes, relative vs absolute URLs, image accessibility, responsive media, lazy loading, figure/figcaption, downloadable links, media formats, fallback content, best practices.
1Difference between relative and absolute URL?easy
Answer: Relative URLs are path-based from current location; absolute URLs include full protocol and domain.
2How to open a link in new tab safely?easy
Answer: Use
target="_blank" with rel="noopener noreferrer".3Why is image
alt required?mediumAnswer: It supports screen readers and acts as fallback when images fail.
4What is the use of
figure and figcaption?mediumAnswer: They semantically group media with a descriptive caption.
5How to make images responsive?medium
Answer: Use CSS like
max-width:100%; height:auto; and proper container sizing.6What does
loading="lazy" do?easyAnswer: Defers off-screen image loading until needed, improving initial performance.
7Which tags embed media natively?easy
Answer:
audio and video with multiple source formats.8Why provide media fallback content?medium
Answer: It helps browsers/devices that cannot play a given format.
9How to create download links?easy
Answer: Use anchor with
download attribute.10Top interview best practice for links/media?medium
Answer: Combine accessibility (alt/captions), security (rel attrs), and performance (lazy loading/compression).
Tricky Q&A (10 Questions)
11rel='noopener' with target='_blank' prevents:tricky
Answer: Correct answer: New window access to window.opener. noopener blocks the new page from controlling opener.
12download attribute on anchor:tricky
Answer: Correct answer: Hints browser to download URL. download suggests downloading the linked resource.
13picture element works with:tricky
Answer: Correct answer: source elements for art direction/formats. picture + source enables responsive images.
14srcset on img provides:tricky
Answer: Correct answer: Candidate image URLs for different resolutions. srcset lets browser pick appropriate resolution.
15mailto: in href:tricky
Answer: Correct answer: Opens email client. mailto links launch email compose.
16tel: in href helps mobile by:tricky
Answer: Correct answer: Opening dialer with number. tel links trigger phone dialers on mobile.
17audio autoplay is often blocked unless:tricky
Answer: Correct answer: muted or user gesture policies allow. Browsers restrict autoplay with sound.
18video poster attribute sets:tricky
Answer: Correct answer: Preview image before playback. poster shows a thumbnail until play starts.
19track element on video adds:tricky
Answer: Correct answer: Text tracks like captions/subtitles. track provides timed text (WebVTT).
20Internal page link uses:tricky
Answer: Correct answer: href='#section-id'. Fragment identifiers jump to element id.