How to use figure tag in html5? ~ MyBlogHelp– A Blog for Digital Marketing, Affiliate Marketing, Organic Lead Generation.

HTML5-FIGURE-TAG

<figure> Tag in HTML5

1. Introduction of <figure> tag

2. Syntax of <figure> tag

3. Attributes of <image> tag

4. Example of <figure> tag

Introduction to HTML5 <figure> Tag

Before HTML5, there was no specific tag to insert a diagram, example, and code in a web page. For this, other common tags such as <div>, <p>, <img> and <table> were used. By doing this, search engines were unable to find that this is a content code or diagram.

These were used to handle it like content of <div>, <p>, <img> and <table> etc. HTML5 provides you with <image> tag to solve this problem.

<figure> tag of HTML5 represents a unit of content, which is self-contained and independent of the main content flow of the page. Along with this, you can also use the caption (title) optionally. Removing this unit does not affect the main content flow. Mainly, examples, diagrams, photos, and code are included in the <figure> tag.

Advantages of HTML5 <figure> Tag

The advantages of the <figure> tag are given below.

1. <figure> tag is used with <figcaption> tag.
2. This tag is used to give the title, diagram, code, and an example etc.
3. This increases the engagement and readability of the user.
4. Before HTML5 There was no mechanism to give titles to images etc.
5. By using <figure> tag, it is easy for search engine to read the page.
6. It is considered better for SEO.
7. <Div> or <p> is not needed to include code in the web page.

Difference Between <img> and <figure> Tags

Many times developers consider the <img> and <figure> tags to be identical. There are some points which will clear the difference between these.

1. Image included by the <img> tag is only linked to the web page. It is not included in it.

2. <img> tag creates an empty space that is filled with the image given on the URL when the page is loaded. On the other hand, the content of the <figure> tag is included on the webpage itself.

3. To give the title of images linked by <img> tag, you need to use <p> and other tags. This title can’t be read by any search engines. On the other hand, in the <figure> tag you can use the <figcaption> tag to give a diagram, code and examples etc. which is easily readable by search engines. <figcaption> tag can be used before or after anywhere inside <figure> tag.

Syntax of HTML5 <figure> Tag

The syntax of <figure> tag is being given below.

<figure>

code, diagram, example etc.

</figure>

As you can see the syntax above, this is the standard syntax of <figure> tag. If you want to give the title of diagrams or examples included in the <figure> tag, you can use the <figcaption> tag for it. Its syntax is given below.

<figure>

code, diagram, example etc.

<figcaption>
... Caption Here ...
</figcaption>

</figure>

Attributes of HTML5 <figure> Tag

There is no element specific attribute available with <figure> tag. <figure> supports all global attributes such as class, id etc.

<figure id = "html-code">

// Content Here

</figure>

// Other tags here

<figure class = "javascript-code">

// Content Here

</figure>

Styling HTML5 <Figure> Tag

With CSS you can style <figure> tag. An example of this is given below.

figure

{

display: block;

color: red;

}

Events related to HTML5 <figure> tag

HTML5 <figure> tag supports all global event attributes. These events can be used in many ways with <figure> tags. For example, by handling the onclick event, you can show the diagram in the full screen when you click on the user's diagram.

<figure onclick = "script-code">

// Content Here

</figure>