Sunday, December 25, 2016

Semantic way of giving caption to an image in HTML5

Whenever there is an image on our website, it's always a great idea to have a relevant and appropriate image caption. If we check websites where images play an important role as a part of the main content, then image caption is a compulsory element for such websites.

News websites, magazine sites, modeling, art and photography related websites have lots of image contents. An Image caption is equally important element for such websites to help users understand the details of image very quickly.

Difference between <img> & <figure> elements

So how do we do it in HTML?
An old & unstructured way of giving a caption to an image does not have any disadvantages as such but it was not a semantic way. Following is one of the old ways of creating image element with a caption. Developers usually give some class to an image and DIV tag so it will get proper alignment and finally appears as an image caption.
  <img src="imagename.jpg" class="classname" />
  <div>This is image caption</div>

Improved & Semantic way to give image caption in HTML5.
So is there any standard way to write these elements to your browser? Yes, HTML5 is the answer to your question. All of us know that HTML5 have really come up with lots of new tags and features, but it's still not completely adapted and many of its newly added elements and attributes are not used. <figure> - Yes I am talking about this newly added element which is used for adding captions to images in an semantic way. So lets take a look at new way of writing this element.
    <img src="imagename.jpg" class="someClass" />
        <p>This is an image caption in Semantic way :)</p>

The sameple above shows the use of newly created HTML5 elements <figure> & <figcaption>. Use of these two elements is collectively called as semantic way of integrating image captions. You can use above code sample in your next projects.
Happy HTML5:)

No comments:

Post a Comment