Link Functions
Standard Link
Links to another webpage. Opens in the same tab by default.
Google (this tab)<a href="https://www.google.com">Google</a>New Tab Link
Use target="_blank" to open the link in a new browser tab.
<a href="..." target="_blank">New Tab</a>Internal Link
Jumps to another section on the same page using its id.
<a href="#section-id">Internal Link</a>Email Link
Opens the user's default email client with a pre-filled address.
example@domain.com<a href="mailto:...">Email</a>Phone Link
Prompts the user to call a phone number on mobile devices.
Call us: +01 234 567 89<a href="tel:...">Call Us</a>IFrames
IFrames are used to embed content from
other sources, like a YouTube video.
<iframe src="https://example.com/site" title="IFrame Title" allowfullscreen></iframe>Image Formats for the Web
GIF
Lossily removes a large part of the colors from an image, leaving 255 different colors. Transparency is either fully transparent or completely opaque.
Typical usage: short loops, reaction GIFs, simple logos or icons where maximum compatibility is important.
JP(E)G
The lossy compression can be specified with a value between 0 and 100. 100 = low compression > large file, 0 = high compression > small file
Typical usage: photos, photorealistic backgrounds, social media images, product photos in shops.
PNG
Lossless image format, therefore rather large file, but very detailed. Supports transparency with an alpha channel.
Typical usage: UI elements, screenshots, logos & icons with transparency, diagrams, pixel art.
AVIF
Newer image format, offers lossless and lossy compression. Is ~50% smaller than a JPEG of similar quality, supports transparency with an alpha channel.
Typical usage: modern websites with many photos / HDR images, e-commerce, animated stickers with transparency. caniuse.com/?search=avif
WEBP
Newer image format, offers lossless and lossy compression, supports transparency with an alpha channel.
Typical usage: general web graphics, photos, thumbnails, animated stickers; good compromise between file size & support. caniuse.com/?search=webp
SVG
Scalable Vector Graphic - Vector-based image format, information is described with coordinates, can be scaled losslessly. Very small file size. Not suitable for photos.
Typical usage: logos, icons, diagrams, infographics, UI illustrations, responsive graphics.
Further Information on Image Formats:
MDN Web Docs: Image file type and format guideEmbedding Media
Images
Simple embedding an image from an external URL with <img>:
<img src="https://example.com/image.jpg" alt="Description of the image">
For the case where the image is not found,
you can define an alternative text with alt="...":
<img src="assets/img/notexistent.jpg" alt="Not existing image">
Use <picture> for multiple formats,
so the browser can decide which one to use:
<picture>
<source srcset="image_file.avif" type="image/avif">
<source srcset="image_file.webp" type="image/webp">
<img src="image_file.jpg" alt="Description of the image" loading="lazy">
</picture>
Further Information:
MDN: <img> MDN: <picture>Video
Use the <video> tag with controls to embed videos.
Provide multiple sources for compatibility.
<video controls>
<source src="video_file.mp4" type="video/mp4">
<source src="video_file.webm" type="video/webm">
Your browser does not support the video element.
</video>Further Information:
MDN: <video> MDN: Video codecsAudio
Use the <audio> tag with controls to embed audio.
Provide multiple sources for compatibility.
<audio controls>
<source src="audio_file.mp3" type="audio/mpeg">
<source src="audio_file.ogg" type="audio/ogg">
Your browser does not support the audio element.
</audio>