MEDIAS IN HTML

Hello again my friends! As always, my name is Gustavo, and I'm a Computer Engineering student. I'm writing these articles to help me learn while teaching you at the same time :).
Today, we will see about medias in HTML.

IMAGES:

To insert an image in HTML, we use:

<img src="path/filename.format">

We can add a description that will be displayed if the image does not load:

<img src="path/filename.format" alt="Description">

We can add a caption to an image too, we do that using the and

tags:

<figure>
  <img src="path/filename.format" alt="Description">
  <figcaption>Put your caption here</figcaption>
</figure>

The commands to use in the tag image are:

Basic HTML Attributes

src – Specifies the image file URL.

alt – Provides alternative text for accessibility or when the image cannot be displayed.

width – Sets the image width (in pixels or percentage).

height – Sets the image height (in pixels or percentage).

title – Adds a tooltip text shown when hovering over the image.

loading – Controls lazy loading behavior (lazy, eager).

decoding – Suggests how the browser should decode the image (sync, async, auto).

crossorigin – Handles cross-origin requests for the image (anonymous, use-credentials).

referrerpolicy – Controls the Referer header sent when fetching the image.

Responsive & Advanced Image Features

srcset – Defines multiple image versions for different resolutions or devices.

sizes – Specifies which image size should be used in different layouts (with srcset).

usemap – Links the image to an image map (<map>) for clickable areas.

ismap – Indicates the image is part of a server-side image map.

AUDIOS:

To insert audio in HTML we use:

<audio src = "path/filename.format"></audio>

To display the built-in browser controls:

<audio src = "path/filename.format" controls></audio>

In addition of the controls, we can have other options, they are:

autoplay – Starts playing the audio automatically when the page loads.

loop – Makes the audio start over again after it ends.

muted – Starts the audio with the volume set to silent.

preload – Hints how the browser should load the audio file before playback (none, metadata, auto).

Example:

<audio
  src="audio.mp3"
  loop
  controls
  muted
></audio>

We can also use nested tags inside :

<source> – Specifies multiple audio file formats for browser compatibility.

<track> – Adds timed text tracks like subtitles or captions.

Example:

<audio controls>
  <source src = "audio.ogg" type="audio/ogg">
  <source src = "audio.wav" type="audio/wav">
  <source src = "audio.mp3" type="audio/mpeg">
</audio>

VIDEOS:

For videos, we use the same approach that we used for audio.

<video
  src = "path/filename.format"
  loop
  controls
  muted
></video>

Here a list of the commands to control the video:

controls – Displays the built-in browser video controls (play, pause, volume, seek bar, fullscreen, etc.).

autoplay – Starts playing the video automatically when the page loads.

loop – Restarts the video automatically when it ends.

muted – Starts the video with sound off.

poster – Sets an image to display before the video starts playing.

preload – Hints how the browser should preload the video (none, metadata, auto).

width – Sets the width of the video display area.

height – Sets the height of the video display area.

Example:

<video
  src = "path/filename.format"
  loop
  controls
  muted
  poster = "link"
  width = "620"
></video>

We can add medias from other sites too, we do that using the tag <iframe>. The basic structure of this tag is:

<iframe
  src="video-url"
  width="width-value"
  height="height-value"
  allowfullscreen
></iframe>

Let's see now a list of elements that we can use in it:

Basic <iframe> Attributes

src – Specifies the URL of the page to display inside the iframe.

title – Provides an accessible title for the iframe (important for screen readers).

width – Sets the width of the iframe (in pixels or percentage).

height – Sets the height of the iframe (in pixels or percentage).

name – Assigns a name to the iframe so it can be targeted by links or scripts.

loading – Controls how the iframe is loaded (lazy or eager).

My friends, that’s what I wanted to say today. If you’ve read this far and want to know more about me, here is the link to my LinkedIn profile:
LinkedIn-Gustavo-AX