Free Online Courses for Software Developers - MrBool
× Please, log in to give us a feedback. Click here to login
×

You must be logged to download. Click here to login

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

HTML 5 figure tag and figcaption element - Creating more interactive web pages and good user experiences

In this article I will cover the HTML 5 figure tag and figcaption element. Using the figure tag you can create more interactive and good user experience web pages.

Introduction:

In this article I will discuss about HTML 5 <figure> tag. As you know image tag is already available with HTML to display the pictures on web page. The HTML 5 introduces the new tag to handle the group of diagrams, photos, code listings etc. along with some embedded content. The figure element is used along with optional <figcaption> element.

Description:

The <figure> tag is generally used with images and <figcaption>. <figcaption> is not mandatory but it is good if used with it. <figure> tag supported by almost all the major browsers but not all the versions. Mainly latest version of browsers supports this tag.

Figure Tag:

Lets explore the <figure> tag and write some HTML 5 code to understand this tag. Starting with a simple one, the below example only have the <figure> tag and an <img> tag in it with some image properties.

Listing 1: Script to use Figure Tag

<!DOCTYPE html>
<html>
<head>
    <title>MrBool.com Tutorials - Figure & figcaption Tag</title>
</head>
<body>
 <figure id="red-figure">
  <img class='imagem_artigo' src="Red.png" alt="Figure 1: A red color image">
</figure>
</body>
</html>

 
Above figure is output of red color image displaying using the <figure> tag

Figure 1: Above figure is output of red color image displaying using the <figure> tag

Let’s understand that how <figure> tag works. Figure is use the <img> tag inside it to display the images on page. You can group number of images inside this. I will demonstrate this by an example later in this tutorial. <figure> tag behaves like other tags and support the common properties.

Figure Tag- FigCaption:

<figcaption> tag used to give a caption for an image or group of images. The <figcaption> also supports some other tag in it. For example <a> tag and <code> tag.

Listing 2: Script to use Figure Tag with FigCaption Tag

<!DOCTYPE html>
<html>
<head>
    <title>MrBool.com Tutorials - Figure & figcaption Tag</title>
</head>
<body>
  <figure>
  <img class='imagem_artigo' src="Pink.png" width=100 height=100 alt="Figure with Pink Image" border="0">
  <figcaption>HTML Figcaption with Figure tag.</figcaption>
</figure>
</body>
</html>

 
The above figure is output of Figure tag with FigCaption

Figure 2: The above figure is output of Figure tag with FigCaption

Add <figcaption> in <figure> tag to display the caption for one or more images. You can add single <figcaption> tag for multiple images. Image tag works as usual and supports same properties.

Figure Tag- Multiple Images:

<figure> tag supports multiple images in it. The below example demonstrate the use of multiple images with one caption.

Listing 3: > Figure Tag with Multiple Images

<!DOCTYPE html>
<html>
<head>
    <title>MrBool.com Tutorials - Figure & figcaption Tag</title>
</head>
<body>
   <figure id="figureID">
  <figcaption>Figure 1: Green and Blue images</figcaption>
  <img class='imagem_artigo' src="Green.png" alt="My Green image example">
  <img class='imagem_artigo' src="Blue.png" alt="My Blue image example">
</figure>
</body>
</html>

Above figure is output of Figure tag with two images with caption

Figure 3: Above figure is output of Figure tag with two images with caption

Figure Tag- Figcaption with Link:

The <figcaption> also support links in it. Write the <figcaption> tag and inside this write <a> tag. <a> tag in <figure> tag has normal behavior and supports same properties. You can specify the href property and give a link.

Listing 4: Script of Figcaption with Link

<!DOCTYPE html>
<html>
<head>
    <title>MrBool.com Tutorials - Figure & figcaption Tag</title>
</head>
<body>
  <figure id="mrbool-Figure">
  <img class='imagem_artigo' src="http://mrbool.com/portal2/mrbool_img/logo.jpg" alt="Mrbool"> 
  <figcaption>This Mrbool logo displaying as image. You can visit site for more info: <a href="http://mrbool.com">Mrbool.com</a></figcaption>
</figure>
</body>
</html>
 
Above figure is output of figure tag with an figcaption which have an mrbool site link

Figure 4: Above figure is output of figure tag with an figcaption which have an mrbool site link.

Figure Tag- Figcaption with Code:

<figcaption> tag also supports the <code> tag in it. Use this tag and write your code block in it. The below example will help you to understand the concept.

Listing 5: Script of Figcaption with Code Tag

<!DOCTYPE html>
<html>
<head>
    <title>MrBool.com Tutorials - Figure & figcaption Tag</title>
</head>
<body>
 <figure>
<img class='imagem_artigo' src="Red.png" alt="Figure 1: An red color image">
<figcaption>Using <code><B></code> around a <a href="http://mrbool.com/" title="Choose a License">Visit Mrbool website</a> to check the License info. <code>rel="license"</code></figcaption>
</figure>
</body>
</html> 
Above figure is output of Figcaption with a code element

Figure 5: Above figure is output of <Figcaption> with a code element

Conclusion:

<figure> is new tag which solve the problem to relate the image with a rich content. By using this tag you can create more interactive and good user experience web pages. Understand the examples and let us know if you have any questions.



I am having total 7+ years of experience in developing applications using C#, VB.NET, ASP.NET, Silverlight, WCF, SQL Server and Oracle. I am holding a M.Tech degree in Intelligent systems. For more information, visit my Linkedin p...

What did you think of this post?
Services
[Close]
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually – in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits – in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!


> More info about MrBool Credits
[Close]
You must be logged to download.

Click here to login