What is an HTML Attribute?
In HTML, an attribute provides additional information about an HTML element. Attributes are always specified in the opening tag and usually come in name-value pairs like name="value".
Examples of HTML Attributes:
1. src Attribute (Image Source)
The src attribute specifies the source of an image:
Basic Code Examples
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Welcome To My Attributes Page</title>
</head>
<body>
<img src="Rose.jpg" width="400" height="300" alt="Description">
</body>
</html>
Output
2. href Attribute (Hyperlink Reference)
The href attribute defines the URL of a link:
Basic Code Examples
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Welcome To My Attributes Page</title>
</head>
<body>
<a href="http://aitaurangabad.com/">Click here to visit Aitaurangabad</a>
</body>
</html>
3. alt Attribute (Image Alternative Text)
The alt attribute provides a text description of an image for accessibility:
Basic Code Examples
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Welcome To My Attributes Page</title>
</head>
<body>
<img src="logo.png" alt="Ait Logo">
</body>
</html>
Output
4. type Attribute (Input Type)
The type attribute specifies the type of input field in forms:
Basic Code Examples
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Welcome To My Attributes Page</title>
</head>
<body>
<input type="text" placeholder="Enter your name">
</body>
</html>
Output
5. id Attribute (Element Identifier)
The id attribute uniquely identifies an element on the page:
Basic Code Examples
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Welcome To My Attributes Page</title>
</head>
<body>
<div id="header">This is the header section</div>
</body>
</html>
Output
This is the header section
6. class Attribute (Element Class)
The class attribute assigns a class to an element, allowing you to apply styles to multiple elements:
Basic Code Examples
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Welcome To My Attributes Page</title>
</head>
<body>
<div class="container">Content inside a container</div>
</body>
</html>
Output
Content inside a container
7. style Attribute (Inline CSS)
The style attribute allows you to apply inline CSS styles to an element:
Basic Code Examples
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Welcome To My Attributes Page</title>
</head>
<body>
<p>HTML (HyperText Markup Language) is the standard language for creating web pages.
It provides the structure and layout of web content by using various elements and tags.</p>
</body>
</html>
Output
HTML (HyperText Markup Language) is the standard language for creating web pages.
It provides the structure and layout of web content by using various elements and tags.
Conclusion
Attributes are essential in HTML as they provide extra functionality and control over the behavior and styling of elements. You will often see attributes like id, class, src, and href used in various tags to enhance web pages.