Unit-3.14 HTML5-New-Aside-Audio-Video

O-LEVEL-M2-R5 UNIT-3
HTML BASICS
HTML 5 NEW ELEMENTS
NEW HTML5 ELEMENTS
The elements covered

in this are
•aside (<aside>)
•audio (<audio>)
•video (<video>)
SEMANTIC<ASIDE> TAG
• <aside>…</aside>
• The HTML <aside> tag provides information about the main
content aside from the content it is placed in.
• According to W3C definition, the <aside> element represents
content that forms the main textual flow of a document.
• The <aside> tag is used to describe the main object of the web
page like a highlighter.
• It basically identifies the content that is related to the primary
content of the web page but does not constitute the main
intent of the primary page.
• The aside content should be indirectly related to the
surrounding content.
• The <aside> content is frequently presented as sidebars or call-
out boxes.
• For example:
• The <aside> tag contains mainly author information, links,
related content and so on.
• The permitted content is flow content
• Both the starting and the ending tag are necessary
• Permitted parents are any tag that accepts the flow content
• Note that an <aside> element must not be a descendant
of an <address> element.
( Note: The <aside> element does not render as

anything special in a browser. CSS can be used to
style the <aside> element)
COMPARISON OF <ASIDE> WITH <DIV>
• <aside> Vs <div>:
• Both tags have same behavior with different
meaning.
• <div>: It define or create division or section in the web
page.
• <aside>: It does the same job by creating section or division
but it contains only the content that is related to the main
web page.
• The <aside> tag makes easy to design the page and it
enhances clarity of html document. It let us easily recognize
the main text and subordinate text. In both the time <div>
and <aside> need CSS to specific design.
SYNTAX:
• Syntax:
<aside>
<h3>Contents...</h3>
<p>Contents...</p> </aside>
• Example:
<p>I live in Chandigarh, the city beautiful</p>
<aside>
<h3>Chandigarh</h3>
<p>Chandigarh is the capital of Haryana and
Punjab</p>
</aside>
• This example will not display anything special but
<aside> elements can be customized using CSS to
display as a side bar or using different colors.
ATTRIBUTES
• HTML aside tag also supports

• Global Attributes of HTML
• Event Attributes of HTML
EXAMPLE:
• This example uses <aside> to mark up a paragraph

in an article. The paragraph is only indirectly related
to the main article content:
EXAMPLE: SAVE AS ASIDE1.HTML
<article>
<p>
The Disney movie <b>The Little Mermaid</b> was
first released to theatres in 1989.
</p>
<aside>
<p>
The movie earned $87 million during its initial release.
</p>
</aside>
<p>
More info about the movie...
</p>
</article>
<body>
<div class = "gfg">ASIDE ELEMENT EXAMPLE</div>
<article>
<h1>Heading . . .</h1>
<p>Aside tag is use to display important information
about the primary page.</p>
</article>
<aside>
<h1>Aside tag example</h1>
<p>Aside tag content. . .</p>
</aside>
</body>
</html>
<html>
<head>
</head>
<body>
<h1>The aside element</h1>
<p>My family and I visited The Epcot center this summer. The weather was nice, and
Epcot was amazing! I had a great summer together with my family!</p>
<aside>
<p>The Epcot center is a theme park at Walt Disney World Resort featuring exciting
attractions, international pavilions, award-winning fireworks and seasonal special
events.</p>
</aside>
</body>
</html>
<p>Salamanders are a group of amphibians with a lizard-

like appearance, including short legs and a tail in both
larval and adult forms.</p>
<aside>
<p>The Rough-skinned Newt defends itself with a deadly
neurotoxin.</p>
</aside>
<p>Several species of salamander inhabit the temperate

rainforest of the Pacific Northwest, including the Ensatina,
the Northwestern Salamander and the Rough-skinned
Newt. Most salamanders are nocturnal, and hunt for
insects, worms and other small creatures.</p>
• Most browsers will display the <aside> element with
the following default values:
• aside {
display: block;
}
USAGE NOTES
• Do not use the <aside> element to tag parenthesized text, as

this kind of text is considered part of the main flow.
• Valid use of <aside> elements are
• bibliography or endnotes
• Comments
• pull quotes
• editorial sidebars
• additional information
• website sidebars unrelated to the content
• The following are most likely not good uses of
the <aside> element:
• article post data (byline, publication date, etc.)
• post-specific navigation, such as next and previous or related pos
EXAMPLE: ASIDE5.HTML
<body>
<main>
<article>
<header>
<h1>Title of Article</h1>

</header>
<main>

<aside></aside>
</main>
<aside>

</aside>
<footer>

</footer>
</article>
</main>
<aside>

</aside>
</body>
<AUDIO> TAG
• <audio>…</audio>
• HTML5 supports <audio> tag which is used to embed sound
content in an HTML or XHTML document without the use of
flash
• It is used to play an audio file on the web page
• The <audio> tag defines sound, such as music or other audio
streams.
• The current HTML5 draft specification does not specify which
audio formats browsers should support in the audio tag.
• But most commonly used audio formats are ogg,
mp3 and wav.
• You can use <source&ggt; tag to specify media along with
media type and many other attributes.
• An audio element allows multiple source elements and browser
will use the first recognized format
• The Flash, Silverlight and similar technologies were used to
play the multimedia items.
• Before HTML5, there was no standard for playing audio
records on a site page and audio records must be played
with a module (like flash). Then again, diverse programs
backed distinctive modules.
• Any text that is written between <audio> and </audio> will
be displayed in browsers that do not support
the <audio> tag.
• The attributes are to specified along with the opening tag
to play an audio file
SYNTAX:
<audio controls>
<source src="Place your audio file here with full path"
type="audio/mpeg"/>
<source src="Place your audio file here with full path"
type="audio/ogg"/>
Your browser does not support the <audio> element.
</audio>
ATTRIBUTES
Attribute Description
autoplay This Boolean attribute if specified, the audio will
automatically begin to play back as soon as it is
ready without stopping to finish loading the
data.
autobuffer If specified, the audio will automatically begin
buffering even if it's not set to automatically play.
controls This will add audio controls like play, pause and
volume
loop It specifies that the audio file will start over again,
every time when it is completed.
muted It is used to mute the audio output.
preload It specifies the author view to upload audio file
when the page loads.
src=“…” It specifies the source URL of the audio file with
<source> tag
MIME TYPES FOR HTML AUDIO
FORMAT
• <type=“…”>
• MIME types for HTML audio formats are :
• mp3-> type=“audio/mpeg”
• ogg -> type=“audio/ogg”
• wav -> type=“audio/wav”
(Note: Multipurpose Internet Mail Extensions (MIME) is

an Internet standard that extends the format of email
messages to support text in character sets other than
ASCII, as well as attachments of audio, video, images,
and application programs.)
EXAMPLE:SAVE AS AUDIO.HTML
<audio controls autoplay >

<source src="test.mp3" type="audio/mpeg">
Browser does not support mp3</audio>
OUTPUT OF AUDIO.HTML
EXAMPLE:SAVE AS AUDIO-LOOP.HTML
<audio controls autoplay loop>

Browser does not support mp3</audio>
EXAMPLE: SAVE AS AUDIO-
MUTED.HTML
<audio controls autoplay loop muted>
Browser does not support mp3
</audio>
(Note: If muted attribute is used than the audio will not

play even by pressing the play button. First unmute it
and the play)
<VIDEO> TAG
• <video>
• The HTML <video> element is used to show a video on a
web page without the use of Flash
• The HTML video tag is used for streaming video files such as
a movie clip, song clip on the web page.
• The video can be added by adding src attribute in
<source> tag to identify the media source and include a
controls attribute so the user can play and pause the
media.
• The current HTML5 draft specification does not specify
which video formats browsers should support in the video
tag. But most commonly used video formats are −
• Ogg − Ogg files with Thedora video codec and Vorbis audio
codec.
• mpeg4 − MPEG4 files with H.264 video codec and AAC audio
codec.
• The <source> tag is used to specify media along with media
type and many other attributes. A video element allows
multiple source elements and browser will use the first
recognized format
SYNTAX:
<video controls>
<source src="movie.mp4" type="video/mp4">
Your browser does not support the html video tag.
</video>
ATTRIBUTES
controls It will allow the user to control video playback, including
volume, seeking, and pause/resume playback.
height It is used to set the height of the video player in pixels
width It is used to set the width of the video player in pixels
autoplay The video will automatically begin to play back as soon as
it is ready and can do so without stopping to finish loading
the data.
loop will allow video automatically seek back to the start after
reaching at the end.
preload the video will be loaded at page load, and ready to run.
Ignored if autoplay is present.
poster This is a URL of an image to show when the video is not
played
src The URL of the video to embed. This is optional; you may
instead use the <source> element within the video block
to specify the video to embed.
MIME TYPES FOR HTML VIDEO FORMAT
• <type=“…”> attribute
• MIME types for HTML video formats are :
• mp4-> type=“video/mp4”
• ogg -> type=“video/ogg”
• webM -> type=“video/webM”
(Note: Multipurpose Internet Mail Extensions (MIME) is

an Internet standard that extends the format of email
messages to support text in character sets other than
ASCII, as well as attachments of audio, video, images,
and application programs.)
SYNTAX WITH ATTRIBUTES
• <video width=“no inpixels" height=“no in

pixels" controls autoplay loop>
<source src=“url of video file“ type="video/file type of
video file">
</video>
• <video= width=“200” height=“200” controls autoplay

loop>
<source src=“video.mp4” type=“video/mp4”>
Your browser does not display the html video tag
</video>
THE TEXT DISPLAYED IF BROWSER
DOES NOT SUPPORT VIDEO TAG
EXAMPLE:SAVE AS VIDEO1.HTML
<video >
<source src=“takeoff.mp4" type="video/mp4">
</video>
(Note: in “src” give name of any video file on your

system)
OUTPUT OF VIDEO1.HTML WHEN NO
ATTRIBUTE IS MENTIONED
EXAMPLE:SAVE AS VIDEO-
CONTROLS.HTML
<video controls height=“500” width=“300” loop>
<source src=“takeoff.mp4" type="video/mp4">
</video>

Unit-3.14 HTML5-New-Aside-Audio-Video

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Unit-3.14 HTML5-New-Aside-Audio-Video

Uploaded by

Copyright:

Available Formats

O-LEVEL-M2-R5 UNIT-3

The elements covered

( Note: The <aside> element does not render as

• HTML aside tag also supports

• This example uses <aside> to mark up a paragraph

<p>Salamanders are a group of amphibians with a lizard-

<p>Several species of salamander inhabit the temperate

• Do not use the <aside> element to tag parenthesized text, as

(Note: Multipurpose Internet Mail Extensions (MIME) is

<audio controls autoplay >

<audio controls autoplay loop>

(Note: If muted attribute is used than the audio will not

(Note: Multipurpose Internet Mail Extensions (MIME) is

• <video width=“no inpixels" height=“no in

• <video= width=“200” height=“200” controls autoplay

(Note: in “src” give name of any video file on your

You might also like