Figure and figure caption are two elements that were introduced in HTML5. Figure is used to reference something in the article for example images, graphs, videos, diagrams, and e.tc. Figure Caption goes hand in hand with figure element. Every time the figure element is used anywhere; a figure caption with an explanation of the figure should always follow. The way images with “captions” on the page looked before the figure and figure caption were introduced was slightly different, but they made a huge change. Images with captions on HTML pages now days look more like they do in print media like magazines, books, and newspapers. Figure and figure caption helped bridge the gap between the print media images and HTML pages images. Now, before understanding how the figure and figure caption work, and how they changed the way images are used in on HTML pages, it is important to understand how the elements came about.
In the Haas article “On the Relationship Between Old and New Technologies” she states, “understanding twentieth-century literacy means understanding the multiple technologies that support it, have supported it, and continue to support it.” (Pg. 213) Before the introduction of the figure and figure caption, there were other ways images, videos, graphs, and diagrams etc. could be used in HTML. For example, every time an image was introduced in an HTML page, the img element was used. The image element was not completely replaced when the figure and figure caption were introduced. HTML5 just introduced what most people consider better ways to use it in a page that makes it look better, and perform other tasks that were not possible before. Figure and figure caption were introduced to help improve the image element and how it is used. Image element is still an important part of the figure element. When the figure element is introduced, the img element comes next, and the caption that follows the image. There is still no way the figure element can be used without the image element.
This project emphasizes the ways in which figure and figure caption helped improve how images look on HTML pages, and how the two elements are important in bridging the gap between print media and HTML pages. With the use of captions, the difference is not much (if any at all). Therefore, this project helps to show how the evolution from the way images were added to an HTML pages has changed for the better. The project shows how the images are supported in the HTML pages compared to how they were supported before the figure and figure caption elements were introduced.
Exigence
There are ongoing debates on whether the figure and figure caption elements were really necessary, and the different ways to use them. There have been arguments and suggestion of how they can be used, and how some features can be improved in order to fully maximize them. When it comes to how they can be used, there have been suggestions from different sides. For example, in one of the email discussions about the two elements, someone suggests using “
How it works
Lake Victoria Serena Hotel Uganda
Above is an example of how to use the figure and fig caption. As noted in the history, figure element can be used to reference different things like images (as seen above), graphs, etc. A caption usually follows every time the figure element is introduced. In previous versions of HTML, people usually just wrote the line that starts with img.... without introducing the figure element. The image would sometimes be followed with a paragraph explaining what the image represents. For example below is how I would write the same code without the figure and figure caption tags.
Lake Victoria Serena Hotel Uganda
In terms of semantics, the figure and figure captions looks a lot better than the one with out them. “Figure” is a semantic way of grouping all things you will need for an image together. Instead of nesting an image and a caption you’ve put in a paragraph within a div with a class of “image” or something similar, you can group all image like things together in figure” (Digital Tutors blog) Figure helps us to have less tags and more readable code. There is no need to explicitly state the class for whatever we are using, and to introduce a paragraph to talk about the image. Just just using the figure tag can do all this information.
In addition to the semantics, there is quite a difference in the way the images appear on the page. One that uses figure and figure caption is closely attached to the image, whereas the paragraph for the image element, kind of comes out as a paragraph. Therefore, there is no doubt that the figure improved the way images appear on a web page when a caption is added to them. The one with the figure is identical to what would be seen in something like a book, or magazine. Therefore, if a reader goes from reading a magazine, or book, to an HTML page, there will not be any difference in the way images appear with captions
It is important to note that there should only be one figure caption in the figure block. Therefore, if more than one image is used in the figure block, the figure caption should use things like “fig 1, fig 2, etc.” to talk about each image.
Figure vs Img tags
Before exploring the differences between figure element and image tags, it is important to note, “the figure and image tags are not interchangeable.” (Blog from Digital Tutors website) This simply means that you cannot opt to use one in the place of the other. The blog also goes on to say, “images tags are still absolutely necessary in HTML, and the figure tag is really just a different way to organize the content.” Figure did not replace the image tag; it just brought better ways the images can be organized in the article. In other words figure helps in cases where one might need to use more than one image in article in different places.
Some of the differences between figure and img include:
Images are linked to HTML pages. The img tag creates a holding space for the referenced image. If removed from where it was placed, it affects the flow of the document. In the stackoverflow discussion, someone explained it better by stating that, “Images are not technically inserted into an HTML page, images are linked to the HTML page.”(Stackoverflow discussion). Therefore, the image tag is really used to link an image to an HTML page.
Content of figure element is related to the main flow. Its position is independent from the main flow. If removed from anywhere, it shouldn’t affect the flow of the article. Duckett states “It is important to note that the article should still make sense if the content were moved (to another part of the page, or even to a different page altogether). (Duckett Pg. 439) Therefore, what this means is that although the position of the figure element is independent, it is important for the element to have some meaning wherever it is used in the article.
Img is one of the things that go inside the figure. Therefore, the img was not completely replaced. It comes with the figure and enables the designer to do different things.
Figure allows the designer to add other things like audio files, code, and graphs to the pages. Therefore, “figure element represents self contained content…” (Mozilla developer website). The self-contained content could range from things like audio files, code, and graphs to pages. This makes it different from the image because that content can now be independent from other things in the HTML page.
Figurecaption vs text explanation
Figure Caption “represents a caption or legend for the contents of its parent figure element” (W3C website). It enables the designer to add a brief explanation of whatever figure is introduced without necessarily writing a paragraph to explain something. “In traditional printed material like books, and magazines an image, chart, or code example would be accompanied by a caption. Before now, we didn’t have a way of semantically marking this content directly in our HTML, instead resorting to CSS class names…” (HTML5 Doctor website). With the introduction of the figure caption in HTML5, this problem has been solved. We can now have a caption the way other print sources like books would have captions. The caption helped bridge the gap that existed between other print medias, and the HTML pages. Both now have the ability to use caption without looking drastically different. Therefore, HTML pages can now look like books, and magazines by using captions too.
For the question phrased about whether it is necessary to use the figure caption each time, the same article explains that, “the fig caption element is optional and can appear before or after the content of the figure” (HTML5 Doctor website). There is no need to have a caption after every image. However, I think although it is not completely necessary to have a caption after every figure, for good practice (especially academic purposes). It is a good idea to have the caption every time the figure caption is used.
Text explanation is something that was suggested where every time someone used img tag and wanted to explain what it meant, they started a paragraph and wrote something about it. This is quite different from how other print medias would add text to an image.
Conclusion
From all the information collected about the figure and figure caption, it is evident that the two tags are necessary. They help people to do things that were not possible before. For example adding captions to images, graphs, etc. Figures and figure caption may not necessarily be better than the img tag that used before, but the differences show that they improved how images appear on pages. There are still a few similarities between the ways both are supported. Figure still needs the img inside every time it is used. Img continues to support the figure element even with the different change that continues to happen within the two elements.
