Wikipedia:Image markup with HTML

Note: this page is deprecated – never format images like this! It is provided purely for historical interest. For a quick guide to adding images, see Help:Pictures. For a comprehensive guide, see Wikipedia:Extended image syntax.
alt text Caption

Right-floating image with caption

<div class="floatright">[[Image:image name|alt text]]

Caption</div>


Column of images, floated

See the 2003 version of Floppy disk for an 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 class="floatleft">[[Image:NAME|Alt text]]</div>
right float, no caption <div class="floatright">[[Image:NAME|Alt text]]</div>
left float, with caption <div class="floatleft">[[Image:NAME|Alt text]]<br>Caption</div>
right float, with caption <div class="floatright">[[Image:NAME|Alt text]]<br>Caption</div>
left float, with larger <div class="floatleft">[[Image:SMALL|Alt text]]<br>[[Media:LARGE|larger version]]</div>
right float, with larger <div class="floatright">[[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 class="floatright" style="width: 250px">[[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.

Link to the image description page

If you want to make a link to the description page for an image, use a leading colon before "image:" in an intra-wiki link, like this: [[:image:STS-32 crew.jpg|STS-32 crew]] which yields: STS-32 crew

Blank line after image code

Always put a blank line after the image code to avoid an ugly indentation of the text with Internet Explorer.

See also

Content Disclaimer

Informasi ini disarikan dari Wikipedia dan disajikan kembali untuk tujuan edukasi. Konten tersedia di bawah lisensi CC BY-SA 3.0. Kami tidak bertanggung jawab atas ketidakakuratan data yang bersumber dari kontribusi publik tersebut.

  1. The information displayed on this website is sourced in part or in whole from Wikipedia and has been adapted for the purpose of restating it. We strive to provide accurate and relevant information, however:
  2. There is no guarantee of absolute accuracy. Wikipedia is an open, collaborative project that can be edited by anyone, so information is subject to change.
  3. It is not intended to constitute professional advice. The content displayed is for informational and educational purposes only. For important decisions (e.g., medical, legal, or financial), please consult a professional.
  4. Content copyright. Wikipedia is licensed under the Creative Commons Attribution-ShareAlike License (CC BY-SA). This means that content may be reused with appropriate attribution and shared under a similar license.
  5. Responsible use. Any risk arising from the use of information from this website is entirely the responsibility of the user.