How to use label Tag In HTML

Using the figure and figcaption Elements

In this approach, we are using the <label> tag with the for attribute to associate it with the video element, creating a styled label above the video.

Syntax:

<label for="video">w3wiki Video</label>

Example: The below example uses a label tag to add the Label above the Video in HTML5.

HTML

<!DOCTYPE html>
<html>
  
<head>
    <title>Using label Tag</title>
    <style>
        .video-container {
            position: relative;
            width: 100%;
            max-width: 400px;
            margin: 0 auto;
        }

        video {
            width: 100%;
        }

        label {
            color: green;
            font-weight: bold;
            display: block;
            text-align: center;
            margin-bottom: 10px;
            font-size: 18px;
        }
    </style>
</head>

<body>
    <h1 style="text-align:center;">Using label Tag</h1>
    <div class="video-container">
        <label for="video">w3wiki Video</label>
        <video id="video" controls>
            <source type="video/mp4" src=
"https://media.w3wiki.org/wp-content/uploads/20240311140158/mem.mp4">
            Your browser does not support the video tag.
        </video>
    </div>
</body>

</html>

Output:

How to add Label above Video in HTML5 ?

In HTML5, putting a label above a video is important for helping users understand and interact with the content better. There are two easy ways to do this: using the figure and figcaption elements, or just the label tag itself. By using these methods, you can easily add informative labels above your videos, making them more accessible and improving the overall user experience on your web page.

These are the following approaches to add Label above the video:

Table of Content