All HTML tags can have one ore more attributes which provide information about an element and sets their property. Attributes can also be used to identify one element from another and to classify them into various groups called classes.
The attributes are written as name value pair, in the above image the attr-name is the name of the attribute and the text inside the double quotation is its value. All the attributes must be written after the tag-name and not before it.
Example of a name-value attribute pair
Lets consider an example of the ‘<img>’ tag. The image tags is used to display images in an HTML page. It is an empty tag so there is no content section and the end tag in it.
<img src="http://www.cleantutorials.com/Images/logo.png" alt="Cleantutorials Logo">
As you can see there are 2 attributes used in the above line of code, the src and the alt attributes. Lets see what they do
If you want to display an image in a HTML page, you need to specify the location where that image is stored. The “src” attribute’s value contains the location where the image is stored, so the image stored on the address “http://www.cleantutorials.com/Images/logo.png” (value) will be displayed.
Sometimes one can put a wrong location in the src attribute, or the Image format is not supported by the browser, In that case the value of alt attribute is displayed instead of the image.
You can copy and paste the above code in a text editor and save it as a html file and run it. The img tag and its attributes will be explained in details in future posts.
Properties of HTML attributes
- Attributes are optional name-value pair.
- The sequence in which attributes are written has no affect on the result, in the above example ‘alt’ can be placed before ‘src’ also.
- A tag can have more than one attributes. Attributes are optional, so you can have elements with 0 attributes.
- Attributes are only specified in the start tag.
- Some attributes are global which means they can be used with any HTML tag, example the ‘id’ attribute.
- Some attributes are only defined for specific tags. For example the ‘alt’ attribute which can only be used with image (<img>) tag and not with say the <p> or other tags.
Three ways to write HTML Attribute’s value.
This is the most commonly used way of writing attribute values and it is recommended you write attribute values inside double quotes. The reason is explained below.
Format : <tag-name attribute-name=“value“>
You can use single quotes as well, it is highly useful if you want to put something in double quotes inside the value. for example
<img src=”www.xyz.com/pqr.png” alt=‘you can put “double quote“ inside a single quote‘>
You should avoid this way as it could lead to unexpected results. Character such as “,’,<,>, = and blank spaces are not allowed and if used will cause some error. As demonstrated below
<img alt=Cleantutorials> Logo src="http://www.cleantutorials.com/Images/logo.png">
In the above output The image is not shown because, in the alt attribute’s value we used a “>” after Cleantutorials, which makes the browser think that the <img> tag has been closed. As ‘>’ signifies the end of a tag. If we had used double quotation in the alt’s value then this error would not have occurred.
This is the reason you must use either single quotes or double quotes.