What is figure element in html with examples?

What is the format of an image in HTML?

These are the most common image file formats used on the web. Choosing the right format depends on the image content and desired characteristics.

JPEG (Joint Photographic Experts Group)

JPEG is a common compression format used for digital photographs.
It supports a 24-bit maximum color depth, allowing for millions of colors.
JPEG uses compression, which potentially reduces file size but also image quality if it compresses too much.
It does not support transparency.
JPEG supports interleaved mode (progressive JPEG), allowing for a low-resolution version of the image to load quickly before the full image appears.
It works best for photographs, especially those that are partially transparent.

GIF (Graphics Interchange Format)

GIF is a format that uses lossless compression and is well-suited for images with few colors or large areas of the same (flat) color, such as logos, illustrations, diagrams, clipart, cartoon-style images, and small animations.
It has a restricted pallet with a maximum 8-bit color depth (256 colors).
GIF uses lossless compression, which prevents the loss of image data.
It supports transparency.
GIF supports animation.
It is best for icons, logos, diagrams (geometric shapes), clipart, cartoon-style images, and small animations.

PNG (Portable Network Graphics)

PNG is a format that uses lossless compression and supports a 48-bit maximum color depth.
It has an optional palette and uses lossless compression.
PNG supports transparency with alpha channels for varying levels of transparency.
It also supports an interlaced mode.
PNG is often a good choice for icons, logos, diagrams, and photographs where lossless compression and/or transparency are needed.

<figure> and <figcaption> Elements in HTML

The figure and figcaption elements are new in HTML5 and are used to associate figures (like images) with captions.

What is a figure element in HTML?

The <figure> element denotes a self-contained piece of content, optionally with a caption, that is referenced as a single unit from the main flow of the document. A figure can contain images (<img>), videos, data tables, code segments (<code>), or other content. The content within a <figure> should have some relation to the main content. If you can remove it and the document still makes sense, you might need to use <aside> instead. The <figure> element starts on its own line in modern browsers by default.

What is figcaption used for?

The <figcaption> element represents a caption or legend for the content within its parent <figure> element. It is optional, but if used, there can only be one <figcaption> within a <figure>. The <figcaption> must be the first or the last element inside the <figure>. The text in <figcaption> doesn’t have to start with “Figure” or “Exhibit” and can be a brief description.

Figure element in HTML example

Using <figure> and <figcaption> with an Image:

<!DOCTYPE html>
<html>
<body>
<article>
  <h1>My Article</h1>
  <p>This article discusses various topics, as illustrated in the figure below.</p>
  <figure>
    <img src="images/data_chart.png" alt="Chart showing sales data">
    <figcaption>Figure 1: Sales data for the past quarter.</figcaption>
  </figure>
  <p>As Figure 1 demonstrates, our sales have increased...</p>
</article>
</body>
</html>

In the above example, the <img> tag is placed inside the <figure> element, and the <figcaption> provides a caption for the image. The alt attribute on the <img> still provides essential alternative text for accessibility.

<figcaption> as the First Element

<!DOCTYPE html>
<html>
<body>
<figure>
  <figcaption>A photograph of the town square at sunset.</figcaption>
  <img src="images/town_square.jpg" alt="Town square at sunset">
</figure>
</body>
</html>

The above example shows that the <figcaption> can also appear as the first element within the <figure>.

<figure> Containing Other Content (e.g., Code)

<!DOCTYPE html>
<html>
<body>
<p>The following code snippet demonstrates a basic function:</p>
<figure>
  <figcaption>Listing 1: A simple JavaScript function.</figcaption>
  <pre><code>function greet(name) {
    console.log('Hello, ' + name + '!');
  }</code></pre>
</figure>
</body>
</html>

As noted, <figure> is not limited to images and can contain other types of content like code examples, along with a caption.

Using <figure> and <figcaption> provides a semantic way to group images and their captions, improving the structure and accessibility of your web pages. It also allows for easier styling of the figure and caption as a unit using CSS. For accessibility, remember that the alt attribute on the <img> tag is critical for providing text alternatives when the image cannot be seen. In some cases, the <figcaption> can supplement or even act as the entire text alternative.

HTMl5 Topics

Page Content

Posts