Layout Options

  • Fixed Header
    Makes the header top fixed, always visible!
  • Fixed Sidebar
    Makes the sidebar left fixed, always visible!
Html 5 Media
Navigation menus are one of the basic building blocks for any web or mobile app.

Overview

Media is a broad category that can include images, audio, video, and plug-in content.

HTML4 included support for displaying images, but it wasn't until HTML5 that native support was included for audio, video, and plug-in content. Before HTML5, audio and video was typically handled by Adobe's Flash player.

Image Related

The following table lists the image related HTML tags:

Tag Description
<img> Defines an image
<map> Defines an image-map
<area> Defines a clickable area inside an image-map

<img>

In HTML, images are defined with the <img> tag. The <img> tag is an empty tag, therefore it has no closing tag.

To display an image on a web page, specify the URL of the image to be displayed in the src attribute as shown in the example below:

<img src="smiley.gif" alt="Smiley face" />

This produces the following result:

Smiley face

The alt attribute is required and specifies alternate text for an image, if the image cannot be displayed.

HTML5 Media Related

HTML5 includes a new standard for media content.

The following table lists the media related HTML tags:

HTML5   = New for HTML5

Tag Description
<audio>HTML5 Includes support for multimedia content, sounds, music or other audio streams
<video>HTML5 Includes support for video content, such as a movie clip or other video streams
<embed>HTML5 Includes support for embedded content, such as a plug-in
<source>HTML5 Defines media resources for media elements, defined inside video or audio elements

<audio>

The <audio> tag allows the embedding of sound content in an HTML document. The following example shows the basic use of this tag: 

<audio src="audio.ogg"
  controls="controls">
Audio element not supported
</audio>

At this time, different browsers support various audio formats, but the most common formats are ogg, mp3, and wav.

The <source> tag can be used to specify the media with the media type. The <audio> element allows multiple source elements and the browser will use the first recognized format. The following example shows the basic use of this tag: 

<audio controls="controls">
  <source src="audio.ogg" type="audio/ogg" />
  <source src="audio.wav" type="audio/wav" />
Audio element not supported
</audio>

Note: More information about the audio tag can be found under the <audio> element entry.

<video>

The <video> tag allows the embedding of video content in an HTML document. The following example shows the basic use of this tag: 

<video src="video.mp4" width="300" height="200" controls="controls">
Video element not supported
</audio>

At this time, different browsers support various video formats, but the most common formats are:

  • ogg - Ogg files with the Thedora video codec and Vorbis audio codec
  • mpeg4 - MPEG4 files with the H.264 video codec and the AAC audio codec

Note: More information about the video tag can be found under the <video> element entry.

logo