Wikipedia:Image markup with HTML

The markup gallery page is still under construction.

right-floating image with caption

<div style="float:right;margin:0 0 1em 1em;font-style:italic;">[[Image:Sunflowers thumbnail.jpg|alt text]] Caption</div>

column of images, floated

(see Floppy disk for example)

Markup for images is quite complicated. This may be improved in the future: see meta:image pages. Here are some examples of typical markup ("image" for an image in the page, "media" for just a link):

left float, no caption	`<div style="float:left;margin:0 1em 1em 0;">[[Image:NAME\|Alt text]]</div>`
right float, no caption	`<div style="float:right;margin:0 0 1em 1em;">[[Image:NAME\|Alt text]]</div>`
left float, with caption	`<div style="float:left;margin:0 1em 1em 0;font-style:italic;text-align:center;">[[Image:NAME\|Alt text]]<br>Caption</div>`
right float, with caption	`<div style="float:right;margin:0 0 1em 1em;font-style:italic;text-align:center;">[[Image:NAME\|Alt text]]<br>Caption</div>`
left float, with larger	`<div style="float:left;margin:0 1em 1em 0;text-align:center;">[[Image:SMALL\|Alt text]]<br>[[Media:LARGE\|larger version]]</div>`
right float, with larger	`<div style="float:right;margin:0 0 1em 1em;text-align:center;">[[Image:SMALL\|Alt text]]<br>[[Media:LARGE\|larger version]]</div>`
large central picture	`<center>[[Image:NAME\|Alt text]]<br>''Caption''</center>`

If your caption is longer than a few words, you may need to explicitly set the div width. Some browsers adjust the width of the div based on the width of the text, and if there is a large caption, the div may become too large. To solve this problem, simply set the width of the div to the width (in pixels) of the image, like so:

<div style="width: 250px; float:right; margin:0 0 1em 1em; text-align: center;">[[image:NAME|alt text]]<br>''Caption''</div>

(replacing width: 250px; with the correct width of your image. The inclusion of this specification is optional, but recommended if you have a caption longer than a few words. For large amounts of caption text, use text-align:left; to make it left-justified.

Alternate text is optional but recommended. See Alternate text for images for hints on writing good alternate text.

To have some text to the left of an image, and then some more text below the image, then put in a single <br clear="all">. This will force following text down until the margins are free of floating images.

Some recommend using <small> for captions, so they appear like this.