Attribute in HTML
- Attributes in HTML are special words that tell you more about an element. Attributes change the way an HTML element works.
Attributes can be added to all HTML elements. - Each element or tag can have attributes that tell how that element should act.
- Attributes should be used only with the start tag.
- Attributes give elements more information about themselves.
- The name and value of the attribute should always be used together.
- The Attributes name and values are sensitive to capitalization, and W3C suggests that only lowercase letters should be used.
- You can add more than one attribute to a single HTML element, but you must leave a space between each attribute.
Syntax
<element attribute_name=”attribute_value”>Your content</element>
The href Attribute
The <a> tag defines a hyperlink. The href attribute specifies the URL of the page the link goes to:
Example
<a href=”https://www.coderazaa.com”>Visit Coderazaa</a>
Our HTML Links chapter has more information about links.
The src Attribute
The src attribute says where the image came from.
With the <img> tag, you can add a picture to an HTML page. The src attribute tells the browser where to find the image to be shown:
Example
<img src=”https://www.coderazaa.com/img/your_img.png”>
There are two ways to tell the src attribute where the URL is:
Absolute URL: This is a link to an image that is hosted on a different website. Example: src=”https://www.coderazaa.com/img/your_img.png”.
Notes: Images on other sites may be protected by copyright laws. If you don’t ask for permission to use it, you might be breaking the law. Also, you have no control over external images; they can be removed or changed at any time.
2. Relative URL: This is a link to an image on the same website. In this case, the domain name is not part of the URL. If the URL starts with a letter other than a slash, it is relative to the page you are on. Example: src=”your_img.png”. The URL is relative to the domain if it starts with a slash. Example: src=”/img/your_img.png”.
Tip: Relative URLs are almost always the best way to go. If you change domains, they won’t break.
The width and height Attributes
The width and height attributes of the img> tag tell the computer how wide and tall the image is (in pixels):
In our HTML Images chapter, you can find out more about images.
Example
<img src=”https://www.coderazaa.com/img/your_img.png” width=”500″ height=”300″ />
The alt (alternative) attribute
If an image can’t be shown for some reason, the alt attribute of the img> tag tells what text should be shown instead. This can happen if the connection is slow, if there is a mistake in the src attribute, or if the user is using a screen reader.
Example
<img src=”https://www.coderazaa.com/img/your_img.png” alt=”image alternative name”>