HTML Attributes
HTML attributes provide additional information about elements within an HTML document. Every HTML element can have attributes. Attributes are always defined in the start tag. They are specified using a name/value pair format, where the attribute name defines the property, and its value provides specific details, like name=”value”. These attributes impact content display and interaction on web pages.
Let’s explore the key aspects of HTML attributes:
Table of Content
Components of Attribute
An HTML attribute consists of two primary components:
| Attribute Name | Description |
|---|---|
| id | A unique identifier for an HTML element, used for styling or JavaScript interaction. |
| class | Defines one or more class names for an element, used for styling and applying CSS rules. |
| src | Specifies the source URL for external resources like images, audio, or video. |
| href | Specifies the URL of the linked resource, typically used in anchor (a) elements for hyperlinks. |
| alt | Provides alternative text for images, displayed if the image cannot be loaded or is unavailable. |
| any_custom_attr | Describes any custom attribute name and its purpose in the HTML document. |
Syntax:
<element attribute_name= "attribute_value">Meta Tag Attributes
Meta tags provide essential information about HTML documents. They are self-closing tags and significantly impact browser functionality, search engine optimization (SEO), character set declaration, and viewport control. Here are some commonly used meta tag attributes:
| Attribute | Description |
|---|---|
| charset | Defines 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 | Sets an HTTP header for the content, typically used for backward compatibility. |
| scheme | Specifies the format used to interpret the content value, often for data formats. |
HTML Global Attributes
Global attributes apply to all types of HTML tags. Some commonly used global attributes include:
| Attribute | Description |
|---|---|
| class | Groups elements and allows styling. |
| style | Inline CSS styles. |
| src | Specifies the source of various resources, such as image URLs for the img element, video URLs for the video element, and audio URLs for the audio element. |
| contenteditable | Determines whether the content within the element is editable. |
| role | Specifies the element’s accessibility role. |
| tabindex | Determines the order of focus during keyboard navigation. |
| id | Assigns a unique identifier to an element, allowing targeting with CSS or JavaScript. |
| href | Defines the hyperlink destination within the a element, enabling navigation. |
| alt | Provides alternative text for images, essential for accessibility and SEO. |
| title | Creates a tooltip that appears when a user hovers over the element. |
| lang | Specifies the language of the element’s content, aiding with translation and accessibility. |
HTML src Attribute
The src attribute in HTML specifies the URL of a resource (such as an image, audio, or video) to be embedded or included in the webpage.
Example: This example explains the HTML src Attributes to specify the source address of the file.
<!DOCTYPE html>
<html>
<head>
<title>HTML img src Attribute</title>
</head>
<body>
<img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/Geek_logi_-low_res.png">
</body>
</html>
Output:
HTML Attributes Example Output
HTML alt Attribute
The alt attribute in HTML provides alternative text for an image if the image cannot be displayed. It improves accessibility and provides context for screen readers.
Example: This example explains the HTML alt Attributes to specify the name of the file when the image is not loaded properly.
<!DOCTYPE html>
<html>
<head>
<title>HTML img alt Attribute</title>
</head>
<body>
<!--If the image is not found or the img field
is left blank the alt value gets displayed-->
<img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/Geek_logi_-low_res.png"
alt="The Logo"><br>
<img src=""
alt="Since the src value is blank,the alt value is displayed">
</body>
</html>
Output:
HTML Attributes Example Output
HTML width and height Attribute
The width and height Attribute is used to adjust the width and height of an image(in pixels).
Example: This example explains the HTML width & height Attributes to specify the different sizes of the images.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Width and Height</title>
</head>
<body>
<img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/Geek_logi_-low_res.png"
width="300px"
height="100px">
</body>
</html>
Output:
HTML Attributes Example Output
HTML id Attribute
The id attribute in HTML assigns a unique identifier to an element, allowing it to be targeted by CSS and JavaScript for styling and manipulation purposes.
Example: This example explains the HTML id Attribute to specify the unique value for the specific element.
<!DOCTYPE html>
<html>
<head>
<style>
#geeks {
color: green;
}
</style>
</head>
<body>
<h1 id="geeks">Welcome to GeeksforGeeks</h1>
</body>
</html>
Output:
HTML Attributes Example Output
HTML title Attribute
The title attribute is used to explain an element by hovering the mouse over it. The behavior differs with various elements but generally, the value is displayed while loading or hovering the mouse pointer over it.
Example: This example explains the HTML title Attributes to specify the metadata for the element by hovering the mouse over it.
<!DOCTYPE html>
<html>
<head>
<title>HTML title Attribute</title>
</head>
<body>
<h3 title="Hello GeeksforGeeks">
Hover to see the effect
</h3>
</body>
</html>
Output:
HTML title attribute Example Output
HTML href Attribute
The href attribute in HTML, used with the <a> tag, specifies a link destination. Clicking the linked text navigates to this address. Adding `target=”_blank”` opens it in a new tab.
Example: This example explains the HTML href Attributes specify the link address of the file.
<!DOCTYPE html>
<html>
<head>
<title>link Attribute</title>
</head>
<body>
<a href="https://www.geeksforgeeks.org/">
Click to open in the same tab
</a><br>
<a href="https://www.geeksforgeeks.org/"
target="_blank">
Click to open in a different tab
</a>
</body>
</html>
Output:
href attribute Example Output
HTML style Attribute
The style attribute is used to provide various CSS effects to the HTML elements such as increasing font-size, changing font-family, coloring, etc.
Example: This example explains the HTML style Attributes to specify the style properties for the HTML element.
<!DOCTYPE html>
<html>
<head>
<title>style Attribute</title>
</head>
<body>
<h2 style="font-family:Chaparral Pro Light;">
Hello GeeksforGeeks.
</h2>
<h3 style="font-size:20px;">
Hello GeeksforGeeks.
</h3>
<h2 style="color:#8CCEF9;">
Hello GeeksforGeeks.
</h2>
<h2 style="text-align:center;">
Hello GeeksforGeeks.
</h2>
</body>
</html>
Output:
HTML style Attribute Example Output
HTML lang attribute
The language is declared with the lang attribute. Declaring a language can be important for accessibility applications and search engines.
Example: This example explains the HTML lang Attributes that specify the language of the HTML page.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<title>lang attribute</title>
<style>
body {
text-align: center;
}
h1 {
color: green;
}
.lang-info {
font-style: italic;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2>lang attribute</h2>
<p lang="en">
A computer science portal for geeks
</p>
<p lang="fr" class="lang-info">
A computer science portal for geeks
</p>
<p lang="es" class="lang-info">
A computer science portal for geeks
</p>
</body>
</html>
Output:
HTML lang attribute Example Output
Please refer to the HTML Attributes Complete Reference for all the attributes in detail.
Understanding HTML attributes is essential for creating well-structured and accessible web pages. By using these attributes effectively, you can enhance user experience and optimize your content for search engines.
HTML Attributes – FAQs
What is an HTML attribute?
An HTML attribute provides additional information about an HTML element. Attributes are always included in the opening tag and usually come in name/value pairs like name=”value”.
What are some common HTML attributes?
Some common attributes include id, class, src, href, alt, title, style, and data-*.
What is the id attribute used for?
The id attribute is used to uniquely identify an HTML element. Example: <div id=”header”>.
What is the class attribute used for?
The class attribute is used to define one or more class names for an element, allowing CSS and JavaScript to select and manipulate groups of elements. Example: <p class=”intro”>.
How is the src attribute used?
The src attribute specifies the URL of an image, script, or other external resource. Example: <img src=”image.jpg” alt=”Description”>.
