HTML attributes provide additional information about HTML elements.
- All HTML elements can have attributes
- Attributes provide additional information about elements
- Attributes are always specified in the start tag
- Attributes usually come in name/value pairs like: name=”value”
The href Attribute
The <a>
tag defines a hyperlink. The href
attribute specifies the URL of the page the link goes to:
<a href="https://firstenquiry.com/blogs/">Visit FirstEnquiry</a>
The src Attribute
The <img>
tag is used to embed an image in an HTML page. The src
attribute specifies the path to the image to be displayed:
<img src="##">
There are two ways to specify the URL in the src
attribute:
1. Absolute URL – Links to an external image that is hosted on another website.
2. Relative URL – Links to an image that is hosted within the website. Here, the URL does not include the domain name. If the URL begins without a slash, it will be relative to the current page.
The width and height Attributes
The <img>
tag should also contain the width
and height
attributes, which specify the width and height of the image (in pixels):
<img src="img.jpg" width="500" height="600">
The alt Attribute
The required alt
attribute for the <img>
tag specifies an alternate text for an image, if the image for some reason cannot be displayed. This can be due to a slow connection, or an error in the src
attribute, or if the user uses a screen reader.
<img src="img.jpg" alt="This is particular image">
The style Attribute
The style
attribute is used to add styles to an element, such as color, font, size, and more.
<p style="color:red;">This is a red paragraph.</p>
The lang Attribute
You should always include the lang
attribute inside the <html>
tag, to declare the language of the Web page. This is meant to assist search engines and browsers.
<!DOCTYPE html>
<html lang="en">
<body>
...
</body>
</html>
The title Attribute
The title
attribute defines some extra information about an element.
The value of the title attribute will be displayed as a tooltip when you mouse over the element:
<p title="I'm a tooltip">This is a paragraph.</p>