Nothing is for sale here. Freewill tips keep the site running. Want to help? → Tip via Paypal
HTML Attributes and Values
If you've read the Introduction to HTML tutorial, you’ve already learned what HTML tags are and the you’ve learned the basic HTML skeleton.
In this tutorial you’ll learn about HTML attributes and values. HTML attributes and values provide additional instructions to the browser. For example, suppose you want to put an image on your web page. An image tag is written as follows:
<img>
That’s the basic image tag, but it doesn’t tell the browser which image to display or where to find it. We give the browser that information by adding the source attribute and the value of the source attribute.
The source attribute is written as src for short. If the image you wanted to add was a picture of your new bicycle and the picture was saved as bike.jpg, and it was kept in the same folder as your HTML page, then the attribute and value you’d add to the image source tag are:
src="bike.jpg"
In that example, "src" is the attribute and "bike.jpg" is the value of the attribute.
An attribute has a value attached to it by the equal sign (=), with the actual value enclosed in quotation marks. The entire code so far, would then be written as:
<img src="bike.jpg">
If the image is not keep in the same directory as the web page it’s placed on, then you also have to include the path to the image in the value so the browser can find it. For example, if you keep your website images in a directory (folder) called images, the code would be:
<img src="images/bike.jpg">
Sometimes a visual helps to learn new concepts, so below is a depiction of an image tag that shows the HTML element, attribute, and value.
For a tutorial about server paths, see this server paths tutorial.
There are other attributes and values that go with an image tag. Please see this images tutorial for a complete look at using images in web pages.
Most HTML elements have a corresponding closing tag, but there isn’t a closing tag for the image element. In XHTML tags without corresponding closing tag require they self-close, but it's optional in HTML. Self-closing example: <br /> ...a space and forward slash self-close the tag.
