Archive for January, 2021

HTML 5 In WEB Design – New Graphic and Multimedia Elements

January 5th, 2021

The primary goal of HTML 5 was to introduce a consistent error handling process. HTML allows the ability to write malformed code and have it corrected afterwards into a valid document. There is an issue with the rules not being written down anywhere. At the moment the malformed document has to be tested in different browsers and then corrected, otherwise they will not display correctly. HTML 5 is trying to address the problem and codify this error handling. This standardization will reduce time and money spent on displaying web pages elements consistently.

The second aim was to allow browsers to serve almost as an application platform. Many elements previously handled by Flash or Java Script were now added into HTML code. They introduced a way of dealing with images, multimedia content and more.

1. Figures and Captions

There has always been an option to add descriptive elements of text next to the image. However, it was impossible to connect both elements semantically, so that browsers and web readers could understand the connection. HTML 5 solves the problem by adding two elements:

1.1 The figure element, which allows correctly identify the images to which captions are connected. The element is not limited to images only, but can be used for any figures, such as tables or graphs; even parts of text can be designated as a figure.

Example:

Name of the image.

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

Name of the image.

Text to be displayed.

After these two elements have been added to HTML code, they can be customized in style sheets.

2. Multimedia options

There are five new elements in HTML designed specifically to handle multimedia files, which used to create problems for website designers, a there wasn’t a clear method for including such files.

2.1 The audio and video elements – enable to insert audio and video files as easily as images in HTML.

Examples:

The two attributes used here should be displayed by default. The file should be preloaded even before the user presses play button. There are plenty attributes that allow to customized media further, but we are not going to mention them here.

2.2 The source element – apart from identification of source of video or audio file with the src attribute, HTML5 gives an option to embed multiple related sources. This solves the problem of different browsers supporting different types of audio and video files as several different types can be embedded at once.

Example:

The type attribute allows the browser to choose the file to play without downloading the entire source file. This is important as even though the embedding methods have been regulated, the actual encoding methods are still to be standardized.

2.3 The track element – is a text explanation of the media content. The reason for that is to make it accessible for users that are not able to see or hear the content.

Example:

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

default label="English subtitles">

In this example, we specified English subtitles for a video file. More language options could be added by multiplying the track element to reference additional subtitles.