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
- HTML Global Attributes
- HTML src Attribute
- HTML alt Attribute
- HTML width and height Attribute
- HTML id Attribute
- HTML title Attribute
- HTML href Attribute
- HTML style Attribute
- HTML lang attribute
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.
<html>
<head>
<title>src Attribute</title>
</head>
<body>
<img src=
"https://media.w3wiki.net/wp-content/cdn-uploads/Geek_logi_-low_res.png">
</body>
</html>
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.
<html>
<head>
<title>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.w3wiki.net/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 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.w3wiki.net/wp-content/cdn-uploads/Geek_logi_-low_res.png"
width="300px"
height="100px">
</body>
</html>
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>
#Beginner {
color: green;
}
</style>
</head>
<body>
<h1 id="Beginner">Welcome to w3wiki</h1>
</body>
</html>
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.
<html>
<head>
<title>title Attribute</title>
</head>
<body>
<h3 title="Hello w3wiki">Hover to see the effect</h3>
</body>
</html>
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.w3wiki.net/">
Click to open in the same tab
</a><br>
<a href="https://www.w3wiki.net/"
target="_blank">
Click to open in a different tab
</a>
</body>
</html>
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 w3wiki.
</h2>
<h3 style="font-size:20px;">
Hello w3wiki.
</h3>
<h2 style="color:#8CCEF9;">
Hello w3wiki.
</h2>
<h2 style="text-align:center;">
Hello w3wiki.
</h2>
</body>
</html>
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>w3wiki</h1>
<h2>lang attribute</h2>
<p lang="en">
A computer science portal for Beginner
</p>
<p lang="fr" class="lang-info">
A computer science portal for Beginner
</p>
<p lang="es" class="lang-info">
A computer science portal for Beginner
</p>
</body>
</html>
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.