HTML Tags - Part:2 – What are HTML Image tags, LinkTags, List Tags and Audio/VideoTags?

HTML Tags Part II

What are HTML Image Tags, Link Tags, List Tags & Audio/Video Tags?

As we already discussed about HTML Tags earlier. Now we are going to discuss each of Tags step by step in details with practical.

Here you can check the format of HTML code which looks likes:

Format of Code:

<!DOCUMENT HTML>
<html>
<head>
<title></title>
</head>
<body>
----rest document code----
</body>
</html>

In this HTML Tags Part II we are going to discuss about very interesting tags which are important to design a Web Page in HTML. These tags will help us to working with images, formatting in documents, create lists and tables.

In this post we will describe 4 types of HTML tags:

HTML Image Tags
HTML Link Tags
HTML List Tags
HTML Audio/Video Tags

So let’s start.

HTML IMAGE TAGS

Images are very useful to design a Web Page. A Web Page without images feels like reading a book without pictures. There are several tags which introduce you to insert images and working with them.

Tag	Tag Name	Description
<img>	Image Tag	Use to define an Image.
<map>	Image-Mapping Tag	Use to define a client-side Image Map.
<area>	Area Tag	Define an area inside an Image-map
<canvas>	Canvas Tag	Used to draw graphics,via scripting.
<figcaption>	Figure Caption Tag	Define a caption for <figure> element.
<figure>	Figure Tag	Specifies self-contained content.
<picture>	Picture Tag	Define a container for multiple image resources
<svg>	SVG Graphics Tag	Define a container for SVG graphics.

<img> Tag:

An Image Tag is used to insert an Image to your Web Page.
You can set Width, Height, alt, border etc as their attributes.
You can add image tag inside <body> section of your HTML code.
To specify the image path you have to use “src” attribute.
There is no closing element for Image Tag.

Ex:

<body>

</body>

<map> and <area>Tags:

<map> tag will helps you to divide your image in area part for link each area to different pages or images or path. You can say that it’s just like a simple image in which you will get different clickable area for redirect to different page.
You have to use “usemap” attribute in your image to define map name (target mapping).
It’s contains a number of <area> elements, that defines the clickable areas in the image map.
The <area> tag will define under <map> tag. Area will indicate the part of image you want to link.
The “usemap” inside <img> tag and “name” attribute inside <map> tag are used to make relation between each other. You have to provide a “name” to your map element and call it from “usemap” attribute.

There are some important attributes present in <area> tag which are used to divide your image in area and linking with other pages, those are:

coords: coordinates specify the coordinates of your image area.
download: if you wants to use download any img or page you can use this attribute where you have to define the target path.
href: used to define the target path of your image or page.
shape: “default/rect/circle/poly” are shapes which can specify the shape of area.

Ex:

<body>

</map>

</body>

<canvas> Tag:

The canvas is used to draw graphics; it’s just a container like <div> tag in html for graphics. Canvas is used by scripting languages.

So we will discuss about it more in our scripting tutorials.

<figure> and <figcaption> Tag:

The figure tag act as a image container which contains self-contained, like illustrations, diagrams, photos, code, listing etc.
The <figcaption> element is used to add a caption for the figure element.
The <figcaption> element can be placed as the first or last child of the <figure> element.

Ex:

<figcaption>Fig.3 - Phone Image.</figcaption>

</figure>

<picture> Tag:

This will help developers to write more flexible code by specifying image resources.
If you have a big image for desktop and the same page you wants to open in mobile, in that case you have to choose small screen.
<picture> tag specify different size of images for different devices.
It is very helpful to make your page responsive.

Ex:

</picture>

<svg> Tag:

The <svg> tag defines a container for SVG graphics.
SVG has several methods for drawing paths, boxes, circles, text, and graphic images.

Example:

<body>

</svg>

</body>

Let’s See the Code and Result with explanation:

Code:

Result:

Code Explain:

When you reduce the size of your web browser, the image will change accordingly when its reach to 465px. See result 2:

HTML Link TAGS

HTML links are basically a method to move your page location to another page or different tab for target path. Path can be a website path or server path or directory path where any data is saved. There are basically three types of link tags available:

Tag	Tag Name	Description
<a>	<a> tag	Sets hyperlink for target path from text present inside tag.
<link>	Link tag	Defines rerlationship between a document and and external resource.
<nav>	Navigation tag	Defines navigation links

Description:

The <a> tag is small but very powerful tag. This is use to hyperlink an object on your document. Without hyperlink attribute (href) it just act like a placeholder.
The <link> tag is defining relationship between current document and an external resource. Like if you have coded your CSS or script to some another document, refers to current document, you can link them by using this tag.
<nav> tag is use to create a navigation link set for your document. But you cannot include all your links inside <nav> tag, its intended only for major block elements.

Let’s See the Code and Result with explanation:

Code:

Result:

Explanation:

When you click on first blue text or image you will redirect to :

Once you click on next blue text you will redirect to :

As you can see now image is open to new browser window.

The paragraph in red background and white text is done by a external CSS file which is link in <head> section of code.

As you can see we have one external file which we linked to document with the help of <link> tag, under <head> tag.

HTML List TAGS

List tags are used to create list in your document which can be in order or unordered. Let’s start.

Tag	Tag Name	Description
<ul>	Unorderd list tag	It use to define Unorderd list.
<ol>	Orderd list tag	It use to define orderd list.
<li>	List tag	It use to define list items.
<dl>	Description list tag	It use to define description of list.
<dt>	Description term tag	It use to define description of term/name.
<dd>	Description of description tag	It use to define description of description list.

Description:

The UL tag is define unordered list which are not in serial, these are specifies by bullets.
OL tag is define ordered list which are specify by numbers or alphabets. You can change the type of ordered list by define “type” attribute inside <ol> tag, values are: 1,A,a,I,i.
Li tags are defining list items under ordered or unordered list.

Let’s See the Code and Result with explanation:

Code:

Result:

HTML Audio/Video TAGS

These tags commonly use to embed Multimedia files like mp3, mp4, .wav etc. so lets start.

Tag	Tag Name	Description
<audio>	Audio Tag	Its define sound content.
<source>	Source Tag	Define multimedia resource.
<track>	Track Tag	Define text track.
<video>	Video Tag	Define Video track.

Description:

Audio tag is use to embed sound system to your document such that music or audio stream.
<audio> tag will not support any text between it.
Video tag is use to embed sound system to your document such that music or audio stream.
<video> tag will not support any text between it.
<source> tag is element comes under <audio>/<video> tag which define location of your file to be play. It can be multiple but browser will play only one which can be supported by it.
<track> tag specifies text for your <audio>/<video> tag. This is used to specify subtitles, caption files or other files containing text that should be visible when the media is playing.
Tracks are formatted in WebVTT format (.vtt files).

Let’s See the Code and Result with explanation:

Code:

Result:

In next article we will learn more about HTML Tags.

Reference:

https://www.w3schools.com/tags/ref_byfunc.asp