HTML 5 In WEB Design – New Graphic and Multimedia Elements

HTML 5’s primary objective was to standardise error handling. HTML enables the author to write incorrect code and have it automatically corrected into a valid document. There is an issue with the rules being unwritten. At the moment, the malformed document must be tested in multiple browsers and then corrected, as it will not display correctly in any of them. HTML 5 is attempting to address this issue and standardise error handling. This standardisation will save time and money by ensuring that web page elements are displayed consistently.

The second objective was to enable browsers to function in a similar fashion to an application platform. Numerous elements that had previously been handled by Flash or Java Script have been incorporated into HTML code. They pioneered a new approach to dealing with images, multimedia content, and other types of content.

 

1. Illustrations and captions

 

There has always been an option to include descriptive text alongside the image. However, it was impossible to semantically connect the two elements in a way that browsers and web readers could understand. HTML 5 resolves this issue by introducing two new elements:

 

1.1 The figure element, which enables captioned images to be correctly identified. The element is not limited to images, but may also be used for other types of figures, such as tables or graphs; even portions of text may be designated as figures.

 

As an illustration:

 

figurative>

 

img src=”photo1.jpg” alt=”The image’s title.”>

 

/figure>———————————————————

 

1.2 The figcaption element, which is used to add a text caption to a previously designated figure element.

 

figurative>

 

img src=”photo1.jpg” alt=”The image’s title.”>

 

To be displayed text.

 

/figure>———————————————————

 

After including these two elements in HTML code, they can be customised using style sheets.

 

2. Multimedia capabilities

 

HTML now includes five new elements dedicated to handling multimedia files, which previously presented difficulties for website designers due to a lack of a standardised method for including such files.

 

2.1 The audio and video elements – allow for the easy inclusion of audio and video files in HTML, just like images.

 

Examples include the following:

 

preload is controlled by the audio src=”name of the audio file.mp3″>/audio>

 

controls preload>/video>video src=”name of the video file.mp4″

 

By default, the two attributes used here should be displayed. Even before the user presses the play button, the file should be preloaded. There are numerous attributes that enable further customization of media, but we will not discuss them here.

 

2.2 The source element – in addition to specifying the source of a video or audio file via the src attribute, HTML5 allows for the embedding of multiple related sources. This circumvents the issue of different browsers supporting different types of audio and video files by allowing for the simultaneous embedding of multiple types.

 

As an illustration:

 

preload audio controls>

 

src=”filename.aac” type=”audio/mp4″>

 

src=”filename.wav” type=”audio/wav”>

 

/audio /

 

Without downloading the entire source file, the type attribute enables the browser to select the file to play. This is critical because, while the embedding methods have been standardised, the actual encoding methods have not.

 

2.3 The track element – is a description of the media content in text form. This is to ensure accessibility for users who are unable to see or hear the content.

 

As an illustration:

 

video src=”filename.mp4″>

 

a track with the type=”subtitles”

 

src=”subtitles-english.vtt” srclang=”en” src=”subtitles-english.vtt”

 

  • default label=”Subtitles in English”>
  • /tracking>
  • /audiovisual>

 

We specified English subtitles for a video file in this example. Additional language options could be added by multiplying the track element by the number of subtitles referenced.

 

There are additional track element attributes, but we will not discuss them in detail here.

Leave a Reply

Your email address will not be published. Required fields are marked *