What are HTML Attributes ?
Last Updated :
08 Feb, 2024
HTML attributes are the entities that provide the extra information about the tags. Attributes are specified using name and value pair. Some HTML tags are used without attributes while for some tags it’s important to specify attributes along with them. In paired tags attributes are specified in the opening tag. The value of the attribute is specified between the quotes. They are used to add extra effects to the element.
Syntax:
<tag_name attribute_name='attribute value'> Content of the tag </tag_name>
Meta tags provide important meta information about HTML documents. They are self-closing tags. Attributes of the meta tag are crucial for browser functionality, including search engine optimization, character set declaration, and viewport control.
|
Attribute
|
Description
|
|
charset
|
Specifies the character encoding for the HTML document.
|
|
name
|
Specifies the name of the metadata attribute.
|
|
content
|
Provides information associated with the specified name.
|
|
http-equiv
|
Defines an HTTP header for the information in the content.
|
|
scheme
|
Specifies the format used to interpret the content value.
|
Example:
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Meta Tag Attribute</title>
</head>
<body>
<h2>Welcome To GFG</h2>
<p>Some attribute of the meta tag</p>
<ol>
<li> charset="UTF-8"</li>
<li> name="description" content="Description "</li>
<li> name="keywords" content="GFG,GeeksforGeeks"</li>
<li>
name="viewport"
content="width=device-width, initial-scale=1.0"
</li>
</ol>
</body>
</html>
|
Output:
Global Attributes in HTML
This type of attribute are applied on all types of HTML tags.Some of the commonly used global attributes are class ,id,style. “class” attribute is used to group elements and to style the grouped element and “id” attribute must be unique. It is used to apply functionality or styles to unique element.
Example:
HTML
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
body {
text-align: center;
}
h2 {
color: green;
}
.Paragraph {
background-color: aqua;
}
#container {
background-color: red;
}
</style>
</head>
<body>
<h2>Welcome to GFG</h2>
<p class="Paragraph">
Class Attribute with value as
Paragraph (class="Paragraph")
</p>
<div id="container">
id Attribute with value as
container (id="container")
</div>
</body>
</html>
|
Output:
Event-handling Attributes
Event handling attributes are used to add the functionality to the HTML document.The Value of the event handler attribute is the javascript function.The function gets executed as the event occurs.Some of the commonly used event handler attributes are onclick,onchange,onsubmit,ondblclick.
Example:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Event handler Attribute</title>
<style>
body {
text-align: center;
}
h2 {
color: green;
}
#container {
cursor: pointer;
}
</style>
<script>
const changeColor = () => {
const element = document.getElementById("container");
element.style.color = "red";
};
</script>
</head>
<body>
<h2>Welcome to GeeksforGeeks</h2>
<div id="container" onclick="changeColor()">
Click to change the text color\
</div>
</body>
</html>
|
Output
Boolean Attribute
Boolean attributes in HTML are attributes that, when present, are considered “true” and don’t require a value. They are commonly used for toggling certain behaviors or states, such as the `disabled` attribute for form elements.
Example:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Boolean Attribute Example</title>
<style>
body {
text-align: center;
}
h2 {
color: green;
}
button {
padding: 10px;
font-size: 16px;
}
</style>
<script>
const toggleButton = () => {
const buttonElement =
document.getElementById("myButton");
buttonElement.disabled = !buttonElement.disabled;
};
</script>
</head>
<body>
<h2>Welcome to Boolean Attribute Example</h2>
<button id="myButton" onclick="toggleButton()">
Click me (Toggle disabled attribute)
</button>
</body>
</html>
|
Output:
Share your thoughts in the comments
Please Login to comment...