Audio tag:-
— HTML5 defines a new element which specifies a standard way to embed an audio file on a web page: the <audio> element.
— Before HTML5, there was no standard for playing audio files on a web page.
BROWSER SUPPORT:-
— Internet Explorer 9+, Firefox, Opera, Chrome, and Safari support the <audio> element.
— Internet Explorer 8 and earlier versions, do not support the <audio> element.
Tag
|
Description
|
<audio>
|
Defines sound content
|
<source>
|
Defines multiple media resources for media elements, such as <video> and <audio>
|
Attributes of Audio Tag:
Attribute
|
Value
|
Description
|
Autoplay
|
autoplay
|
Specifies that the audio will start playing as soon as it
is ready
|
controls
|
controls
|
Specifies that audio controls should be displayed (such as
a play/pause button etc)
|
loop
|
loop
|
Specifies that the audio will start over again, every time
it is finished
|
muted
|
muted
|
Specifies that the audio output should be muted
|
preload
|
auto
metadata none |
Specifies if and how the author thinks the audio should be
loaded when the page loads
|
src
|
URL
|
Specifies the URL of the audio file
|
Video Tag:
— The <video> tag specifies video, such as a movie clip or other video streams.
— Currently, there are 3 supported video formats for the <video> element: MP4, WebM, and Ogg
Attribute
|
Value
|
Description
|
autoplay
|
autoplay
|
Specifies that the video will start playing as soon as it
is ready
|
Controls
|
controls
|
Specifies that video controls should be displayed (such as
a play/pause button etc).
|
Height
|
pixels
|
Sets the height of the video player
|
Loop
|
loop
|
Specifies that the video will start over again, every time
it is finished
|
Muted
|
muted
|
Specifies that the audio output of the video should be
muted
|
Poster
|
URL
|
Specifies an image to be shown while the video is
downloading, or until the user hits the play button
|
Preload
|
auto
metadata none |
Specifies if and how the author thinks the video should be
loaded when the page loads
|
Src
|
URL
|
Specifies the URL of the video file
|
width
|
pixels
|
Sets the width of the video player
|
Label tag:
— The <label> tag defines a label for an <input> element.
— The <label> element does not render as anything special for the user. However, it provides a usability improvement for mouse users, because if the user clicks on the text within the <label> element, it toggles the control.
— The for attribute of the <label> tag should be equal to the id attribute of the related element to bind them together.
Attributes:
Attribute
|
Value
|
Description
|
for
|
element_id
|
Specifies which form element a label is bound to
|
Form
|
form_id
|
Specifies one or more forms the label belongs to
|
Span Tag:
— The HTML <span> tag is used for grouping and applying styles to inline elements.
— There is a difference between the span tag and the div tag. The span tag is used with inline elements whilst the div tag is used with block-level content.
Difference between label & span:
— label is used for labeling form controls in html. It also has for attribute where you can set id of the control which this label related to. span used in case when you need to display some literal data.
— A label is used when you have a form or input elements - the label is associated with an input element. Span is a general container for any inline content.