HTML5 - Figure Tag

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:

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

How to use <figure> and <figcaption> Tags

Syntax of <figure> Tag

Syntax of <figcaption> Tag

Example Application Test

Output

About Krishna Srinivasan