To build a high-performance website, you need to know more than just the tag name. You need to understand Attributes. Attributes provide additional information about an element and control how it behaves.
Here are the most commonly used attributes for media and general tags that every developer must know:
| Attribute | Applies to | Description |
|---|---|---|
| src | <img>, <video>, <iframe> | Specifies the path to the media file or URL. |
| alt | <img>, <area> | Alternative text for screen readers and SEO. |
| controls | <video>, <audio> | Displays play/pause, volume, and seek bars. |
| autoplay | <video>, <audio> | Starts playing as soon as the page loads (use with 'muted'). |
| loop | <video>, <audio> | Automatically restarts the media when it finishes. |
| poster | <video> | An image shown before the video starts playing. |
| loading | <img>, <iframe> | Use "lazy" to speed up page loading. |
Using a placeholder from an online library like Unsplash is great for testing layouts. We also use the loading="lazy" attribute here to optimize performance.
A "Poster" image acts as a thumbnail. It makes the video look professional before the user clicks play.
A Favicon is the small icon you see in the browser tab. This is added in the <head> using the <link> tag.
width and height for images. This prevents "Layout Shift" where the page jumps around while loading, leading to a much better user experience.