How To Add A Caption To An Image In Html

Web Style Sheets CSS tips & tricks

Figures & captions

Scale model of the Eiffel tower in Parc Mini-French republic

HTML5 introduced an element to insert a figure with a caption. (We'll show a convention to do the same with HTML4 below.)

          <figure>          <p><img src="eiffel.jpg"     width="136" height="200"     alt="Eiffel belfry">          <figcaption>Scale model of the     Eiffel tower in     Parc Mini-French republic</figcaption>          </figure>

For example, to float the figure to the right, in a space equal to 30% of the width of the surrounding paragraphs, these rules will practice the trick:

figure {   bladder: correct;   width: xxx%;   text-marshal: center;   font-manner: italic;   font-size: smaller;   text-indent: 0;   edge: thin argent solid;   margin: 0.5em;   padding: 0.5em; }

In fact, but the get-go two declarations (float and width) are essential, the residuum is only for decoration.

Scaling the image

In that location is 1 trouble here, and that is that the prototype may exist too wide. In this case, the image is always 136 px broad and the figure is thirty% of the surrounding text. So if you make the window narrower, it may be that the epitome overflows the figure (try information technology!).

If you know the width of all images in the document, you can add a minimum width to figure, like this:

figure {   min-width: 150px; }

St. Tropez — Saint Tropez and its fort in the evening dominicus

Another way is to calibration the image itself. That's what we have done with the image on the correct here. As you can possibly see if you make the window very broad, JPEG images don't scale very well. But if the paradigm is a diagram or a graph in SVG format, scaling in fact works beautifully. Hither is the marker-upwards we used:

<figure>   <p><img          course=scaled          src="st-tropez.jpg"     alt="St. Tropez">   <figcaption>Saint Tropez and its     fort in the evening sunday</figcaption> </effigy>

And this is the style sheet:

figure {   float: right;   width: 30%;   text-align: middle;   font-manner: italic;   font-size: smaller;   text-indent: 0;   border: thin silvery solid;   margin: 0.5em;   padding: 0.5em; }          img.scaled {   width: 100%; }

The only addition is the final rule: it makes the image as broad equally the inside of the figure (the expanse inside the border and the padding).

Putting the caption on top

The Mediterranean Bounding main well-nigh Cap Ferrat

HTML allows the figcaption element to be either the first or the terminal element within the figure and, without whatever CSS rules to the contrary, that volition crusade the caption to be at the top or the bottom of the figure, respectively.

But, no thing what the mark-up, you can also specify in CSS whether the caption should appear to a higher place or below the image. Y'all do that past telling the browser that the effigy should exist formatted every bit a table, with the epitome as its only cell and the caption as the table'due south caption. Only add these rules to the style sheet from the previous sections:

figure {   display: table; } figcaption {   brandish: table-caption;   caption-side: top; }

The style we used on this page includes a gray edge around the figure. Unfortunately, when we use table layout to put the caption on the acme or bottom, nosotros demand to specify the border differently, because the explanation is put exterior the edge of the tabular array. We set that by putting a part of the border on the explanation itself:

effigy {   edge-top: none;   padding-top: 0; } figcaption {   padding: 0.5em;   border: thin silvery solid;   border-bottom: none; }

Figures & captions in HTML4

Eiffel tower

Calibration model of the Eiffel belfry in Parc Mini-France

HTML4, unlike HTML5, doesn't take an element that inserts a figure with a caption. Information technology was proposed (see HTML3), only didn't fabricated it into HTML4. Hither is one way to simulate a figure element:

<div class=figure>   <p><img src="eiffel.jpg"     width="136" height="200"     alt="Eiffel belfry">   <p>Scale model of the     Eiffel tower in     Parc Mini-French republic </div>

Then in the mode sail you use the class "figure" to format the figure the way you lot want. For example, to float the figure to the right, in a space equal to xxx% of the width of the surrounding paragraphs, these rules will exercise the trick:

div.effigy {   float: right;   width: xxx%;   text-align: middle;   font-mode: italic;   font-size: smaller;   text-indent: 0;   edge: thin silver solid;   margin: 0.5em;   padding: 0.5em; }

As earlier, only the first two declarations (bladder and width) are essential, the rest is only for ornamentation.

Scaling the image in HTML4

To avoid that wide images overflow the effigy, and if yous know the width of all images in the document, y'all can add a minimum width to the DIV, east.chiliad., like this:

div.figure {   min-width: 150px; }

St. Tropez

Saint Tropez and its fort in the evening sun

To calibration the image to the width of the effigy instead (every bit nosotros have done with the image on the right), you can add a CLASS attribute and a CSS rule, very similar to the HTML5 instance to a higher place. Here is the marker-upwardly we used:

<div class=figure>   <p><img class=scaled src="st-tropez.jpg"     alt="St. Tropez">   <p>Saint Tropez and its     fort in the evening sun </div>

And this is the fashion sheet:

div.figure {   bladder: right;   width: 30%;   border: thin silver solid;   margin: 0.5em;   padding: 0.5em;   text-align: center;   font-style: italic;   font-size: smaller;   text-indent: 0; } img.scaled {   width: 100%; }

The just improver is the final dominion: information technology makes the paradigm every bit wide as the within of the DIV (the surface area inside the border and the padding).

Putting the caption on tiptop in HTML4

Cap Ferrat

The Mediterranean Ocean nearly Cap Ferrat

To put the explanation on top, add together these rules to the style sheet from the previous sections:

div.figure {   brandish: table; } div.figure p + p {   display: tabular array-caption;   caption-side: top; }

The '+' causes the rule to match a P that follows another P. Which means in this example that it matches the second P of the effigy, the 1 that contains the caption.

(This technique may expose bugs in some browsers from earlier 2003, especially when combined with scaling the paradigm, as I did here.)

Equally earlier, the grayness border that we chose to put around the figures on this page will only be around the image itself with this technique. To put it around the image and the caption, add these rules:

div.effigy {   border-top: none;   padding-height: 0; } div.figure p + p {   padding: 0.5em;   border: thin silver solid;   border-lesser: none; }