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

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 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.

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.

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

<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 Attributes Example Output

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

<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 Attributes Example Output

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.

HTML

<!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 Attributes Example Output

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.

HTML

<!DOCTYPE html>
<html>

<head>
    <style>
        #Beginner {
            color: green;
        }
    </style>
</head>

<body>
    <h1 id="Beginner">Welcome to w3wiki</h1>
</body>

</html>

Output:

HTML Attributes Example Output

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

<html> 
<head> 
    <title>title Attribute</title> 
</head> 
<body> 
    <h3 title="Hello w3wiki">Hover to see the effect</h3> 
</body> 
</html>

Output:

HTML title attribute Example Output

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.

HTML

<!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:

href attribute Example Output

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.

HTML

<!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 style Attribute Example Output

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.

HTML

<!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:

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.

Components of Attribute

Meta Tag Attributes

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

Contact Us