[an error occurred while processing this directive]
Go to Bottom Nav - June 18, 2018 - No exercises at this time - ERRORblah Happy Holidays and Semester Break!

Most if not all of these html attributes are deprecated, that is, superseded by new and improved styling. Find out more in the revised edition of this page.

There are many more attributes you will need for images besides the minimum src, height, width, and alt. This page shows some of the more useful ones.

Align

The align attribute controls the spacial relationship of the image, the text it is grouped with, and the web page. You may only use one align attribute/value pair per image tag.

Images are inline elements, they can fit inside of paragraphs (and table cells) and flow along with the text like this small blue square small blue square graphic. Notice that the bottom of the image aligns with the baseline of the text, and the height of the image increases the line spacing for that line.

a generic image, 200 pixels wide and 100 pixels high

When left to its own devices, i.e. not in a paragraph or table, images line up on the left side of the page like the one above.

This image has the attribute align="left". Image with text align=left It aligns to the left of the page and text wraps on its right.

Succeeding paragraphs and other page elements will continue wrapping around the image unless a special version of the break tag is used.

To clear the side of the image, use <br clear="left" /> or <br clear="all" />.


As you might expect, align="right" image with align equals right moves the image to the right; text and other elements wrap around the left. Similar special break tags are used to clear the image; <br clear="right" /> or <br clear="all /">.


This image uses the align="top" image for text, align=top attribute to give this result.

align="middle" gives graphic text align=middle what you might expect.

Finally, align="bottom" graphic text, align=bottom looks like this.

hspace and vspace

Sometimes your image may seem crowded by the text, losing some if its impact. Use the hspace and vspace attributes in the image tag to give the image "breathing room." hspace stand for horizontal space, vspace for vertical space. The value is expressed in pixels. Here are some examples.

An image using hspace="20". This give twenty pixels of breathing room on both sides of the image. For demonstration purposes: Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah small blue graphic square blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah.

An image using vspace="20". This give twenty pixels of breathing room top and bottom of the image. For demonstration purposes: Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah small blue graphic square blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah.

An image using hspace="20" and vspace="20". This give twenty pixels of breathing room all around the image. For demonstration purposes: Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah small blue graphic square blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah.

An image using hspace="20" and vspace="20" and align="left". Combine the attributes as needed. For demonstration purposes: Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah small blue graphic square blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah.

border

The border attribute allows you to specify the size of the border around your image or eliminate it if you use an image as a hyperlink.

Here are a few examples: border="10" small square blue graphic, border="5" small square blue graphic, and border="1" small square blue graphic.

When you use an image as a link, the browser adds the border around the image much like the underlining for text links. An example is this top graphic used as a link to the top of this page, it has no border attribute: graphic text, top

Use border="0" to eliminate the tell tale link border: graphic text, top

Heading One
Ut pharetra, ante eget imperdiet ullamcorper, tortor nunc sollicitudin orci, non cursus neque nisl eget ligula. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vestibulum, nibh in suscipit interdum, velit magna volutpat turpis, at ornare sem magna et tellus. Sed pulvinar facilisis ligula, id vehicula eros sollicitudin a. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Heading Two
Vivamus vestibulum, augue id iaculis sodales, odio odio feugiat arcu, scelerisque congue nisi ipsum vitae orci. Nunc sed ligula quam. Cras sed iaculis neque. Proin ultricies consectetur tortor, eu pulvinar sapien commodo ac. Cras diam arcu, lacinia id mattis ut, convallis sed massa. Nullam ut arcu lacus. Suspendisse ultricies elementum arcu ut dictum.
Heading Three
Sed aliquet augue ut ligula porta gravida pellentesque sapien semper. Duis mauris massa, semper pulvinar eleifend id, tincidunt fermentum nulla. Proin ipsum neque, imperdiet in vestibulum non, hendrerit ac nisi. Maecenas eleifend libero quis urna lacinia elementum. Etiam mi massa, sollicitudin nec accumsan in, aliquet in dui. Pellentesque consequat diam quis felis luctus a vehicula lectus mollis.
Pull Down Menu Close Menu