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>

<img src=”path of your image” alt=”any message” width=”50px” height=”50px”/>

</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>

<img src=”path of image” usemap=”#mapname”>

<map name=”mapname”>

<area shape="rect" coords="34,44,270,350" alt="Computer" href="base/images.jpg">

<area shape="rect" coords="290,172,333,250" alt="Phone" href="base/markup-language.png" download>

</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:

<figure>

<img src="base/images.jpg">

<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>

<source media="(min-width:650px)" srcset="base/nf-home-beginner-friendly@2x-800x675.png">

<source media="(min-width:465px)" srcset="base/daz.png">

<img src="base/cms_solution.png" style="width:auto;">

</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 width="100" height="100">

<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />

</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 :