DEV Community

loading...

How to add Caption to your HTML Image Tag ??

Amirul Asyraf
Musician & ProgrammΞr 🤘
・2 min read

Today I learned that HTML has a specific Tag that can help us doing caption stuff on our <img> tag.

Usually, I will do caption like this;

<div>
  <img src="https://wallpapercave.com/wp/wp6761049.png"
       alt="BigSur wallpaper">
  <center>MacOS BigSur Walpaper</center>
</div>
Enter fullscreen mode Exit fullscreen mode

BigSur wallpaper

MacOS BigSur Walpaper

This is ok tho. The caption is there below the image. But there is a problem here:

there is nothing that semantically links the image to its caption, which can cause problems for screen readers.

For example, when you have 50 images and captions, which caption goes with which image?

HTML has a special tag for this purpose. Introducing to you <figure> and <figcaption> tag 😃. These are created for exactly this purpose: to provide a semantic container for figures, and to clearly link the figure to the caption.

Cool. So, we can rewrite our above example like this;

<figure>
  <img src="https://wallpapercave.com/wp/wp6761049.png"
       alt="BigSur wallpaper">
  <figcaption>MacOS BigSur Walpaper</figcaption>
</figure>
Enter fullscreen mode Exit fullscreen mode

BigSur wallpaper


MacOS BigSur Walpaper


Super cool 🚀. Another thing that I learned is it doesn't have to be an image. A figure could be several images, a code snippet, audio, video, equations, a table, or something else.

Code Snippet

<figure>
  <pre>
class PrivateData
  def initialize
    @secret_key = [1,79,427].sample
  end
end

data = PrivateData.new
puts "Can I have your secret_key? #{data.secret_key rescue 'nope'}"

puts "BUT I WANTZ IT!!!!"

puts data.instance_variable_get(:@secret_key)
puts "MUHAHAHAHAHA"
  </pre>
  <figcaption>instance variables get</figcaption>
</figure>
Enter fullscreen mode Exit fullscreen mode

class PrivateData
def initialize
@secret_key = [1,79,427].sample
end
end

data = PrivateData.new
puts "Can I have your secret_key? #{data.secret_key rescue 'nope'}"

puts "BUT I WANTZ IT!!!!"

puts data.instance_variable_get(:@secret_key)
puts "MUHAHAHAHAHA"


instance variables get

Quotations

<figure>
  <figcaption><cite>Edsger Dijkstra:</cite></figcaption>
  <blockquote>If debugging is the process of removing software bugs,
  then programming must be the process of putting them in.</blockquote>
</figure>
Enter fullscreen mode Exit fullscreen mode

Edsger Dijkstra:

If debugging is the process of removing software bugs,
then programming must be the process of putting them in.

resources;
1 2 3 4

Discussion (0)