How to add Caption to your HTML Image Tag ??

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>

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>

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>

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"

  

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>

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

resources;
1 2 3 4