Attributes
- In HTML Attributes provide additional information about an element.
- It is always specified in the start tag.
- Attributes come in Name value pairs like Name="value".
Example:
<!doctype html>
<html>
<head>
<title>Quipo House</title>
</head>
<body>
<p title="description">This is a paragraph</p>
</body>
</html>
Output:
![](https://s3.ap-south-1.amazonaws.com/public-quipoin-userimages/tutorial/HTML_HTML-TUTORIAL__ATTRIBUTES.png)
Different Attributes Used in HTML Elements
The href Attribute:
- The href attribute specifies the link or URL for the <a> anchor tag to link that page to the current one.
Example:
<!doctype html>
<html>
<head>
<title>Href</title>
</head>
<body>
<h1>Example of href Attribute</h1>
<a href="https://www.google.com">Google</a>
</body>
</html>
Output:
![](https://s3.ap-south-1.amazonaws.com/public-quipoin-userimages/tutorial/HTML_Introduciton_Attribute_ahref.png)
The src Attribute:
- The <src> attribute specifies the path to the image to be displayed inside the <img> tag.
Example:
<!doctype html>
<html>
<head>
<title>src</title>
</head>
<body>
<h1>Example of src Attribute</h1>
<img src="https://quipoin.com/assets/img/logo.png" />
</body>
</html>
Output:
![](https://s3.ap-south-1.amazonaws.com/public-quipoin-userimages/tutorial/HTML_Introduciton_Attribute_src.png)
The width and height Attribute:
- The width and height attributes are used to adjust the size of the image under the <img> tag.
Example:
<!doctype html>
<html>
<head>
<title>src</title>
</head>
<body>
<h1>Example of src Attribute</h1>
<img src="https://quipoin.com/assets/img/logo.png" height="100" width="100"/>
</body>
</html>
Output:
![](https://s3.ap-south-1.amazonaws.com/public-quipoin-userimages/tutorial/HTML_Introduciton_Attribute_height_width.png)
The Alt Attribute:
- The alt attribute provides alternate text for images. If the image cannot be displayed or is unavailable, the text in the alt attribute will be shown instead.
Example:
<!doctype html>
<html>
<head>
<title>src</title>
</head>
<body>
<h1>Example of src Attribute</h1>
<img src="https://quipoin.com/assets/img/loo.png" alt="Logo" height="100" width="100"/>
</body>
</html>
Output:
![](https://s3.ap-south-1.amazonaws.com/public-quipoin-userimages/tutorial/HTML_Introduciton_Attribute_alt.png)
The style Attribute:
- The style attribute adds styles to the element like color,background-color etc.
Example:
<!doctype html>
<html>
<head>
<title>style</title>
</head>
<body>
<h1>Example of style Attribute</h1>
<p style="color:blue">This is a paragraph in blue color</p>
</body>
</html>
Output:
![](https://s3.ap-south-1.amazonaws.com/public-quipoin-userimages/tutorial/HTML_Introduciton_Attribute_style.png)
The lang Attribute:
- The lang attribute is used to declare the language of the web pages.it is declared inside the <HTML> tag.
Example:
<!doctype html>
<html lang="en">
<body>
</body>
</html>
The title Attribute:
- The title attribute is used to declare extra information about an element
Example:
<!doctype html>
<html>
<head>
<title>title</title>
</head>
<body>
<h1>Example of title Attribute</h1>
<p title="paragraph">This is a paragraph in blue color</p>
</body>
</html>
Output:
![](https://s3.ap-south-1.amazonaws.com/public-quipoin-userimages/tutorial/HTML_Introduciton_Attribute_title.png)