• Menu
  • Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

JavaBeat

Java Tutorial Blog

  • Java
    • Java 7
    • Java 8
    • Java EE
    • Servlets
  • Spring Framework
    • Spring Tutorials
    • Spring 4 Tutorials
    • Spring Boot
  • JSF Tutorials
  • Most Popular
    • Binary Search Tree Traversal
    • Spring Batch Tutorial
    • AngularJS + Spring MVC
    • Spring Data JPA Tutorial
    • Packaging and Deploying Node.js
  • About Us
    • Join Us (JBC)
  • Java
    • Java 7
    • Java 8
    • Java EE
    • Servlets
  • Spring Framework
    • Spring Tutorials
    • Spring 4 Tutorials
    • Spring Boot
  • JSF Tutorials
  • Most Popular
    • Binary Search Tree Traversal
    • Spring Batch Tutorial
    • AngularJS + Spring MVC
    • Spring Data JPA Tutorial
    • Packaging and Deploying Node.js
  • About Us
    • Join Us (JBC)

HTML5 – Figure Tag

March 8, 2014 //  by Krishna Srinivasan//  Leave a Comment

The <figure> tag usually represents the independent content such as images, diagrams, code content and more. The position of <figure> element is independent of the main page flow, though it being part of the web page.

The <figure> tag is supported by almost all latest browsers used today such as Internet Explorer 9, Mozilla Firefox, Opera, and Google Chrome. It is used with <figcaption> element which provides caption for the content. It allows designers to insert image in the web page.

The <figcaption> tag is used inside the figure tag. The <figcaption> element used to associate figures with captions which represents <figure> element. We must use only one <figcaption> element within <figure> tag. It contains other child tags such as <img> or <code>.

How to use <figure> and <figcaption> Tags

The <figure> element can be written as follows :

<figure>
    <img src="amazing.jpg" alt="Figure: Sunset image">
</figure>

Syntax of <figure> Tag

<figure> some text here</figure>

The <figcaption> element can be written as follows :

<figure>
   <img src="amazing.jpg" alt="Figure: Sunset image">
   <figcaption>Beautiful Sunset</figcaption>
</figure>

Syntax of <figcaption> Tag

<figcaption> some text here</figcaption>

This tag should come under the <figure> tag. The following example shows use of <figure> and <figcaption> element tags.

<!DOCTYPE html>
<html>
<body>
	<figure>
		<img src="amazing.jpg" alt="Figure:Sunset " width="304" height="228">
		<br>
		<figcaption>
			<b> Beautiful Sunset </b>
		</figcaption>
	</figure>

</body>
</html>
  • <figure> tag is used to mark up the photo in the document.
  • <img src=”amazing.jpg” alt=”Figure:Sunset ” width=”304″ height=”228″> tag is used to insert image in HTML page which takes two attributes ,src attribute specify URL of the image and alt attribute specifies alternate text for the image.
  • <figcaption> Beautiful Sunset </figcaption> tag is used to provide caption for <figure> element.

Example Application Test

  • Save the file as figure_example.html in your system.
  • Just open the file in the browser, you will see the below picture in the browser. Note that the browser must support HTML5 specification.

Output

After successful execution of the program we will get the following result:
amazing

Previous Tutorial : HTML5 Events  :: Next Tutorial : HTML5 Video and Audio Tags

Category: HTMLTag: HTML5

About Krishna Srinivasan

He is Founder and Chief Editor of JavaBeat. He has more than 8+ years of experience on developing Web applications. He writes about Spring, DOJO, JSF, Hibernate and many other emerging technologies in this blog.

Previous Post: « Java Exception Handling
Next Post: EclipseLink – DDL Schema Generation in JPA 2.1 »

Reader Interactions

Leave a Reply Cancel reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Primary Sidebar

Follow Us

  • Facebook
  • Pinterest

FEATURED TUTORIALS

New Features in Spring Boot 1.4

Difference Between @RequestParam and @PathVariable in Spring MVC

What is new in Java 6.0 Collections API?

The Java 6.0 Compiler API

Introductiion to Jakarta Struts

What’s new in Struts 2.0? – Struts 2.0 Framework

JavaBeat

Copyright © by JavaBeat · All rights reserved
Privacy Policy | Contact