HTML Attributes

There is a wide availability of attributes in HTML. Each element can have one or a few characteristics that define various properties of a particular HTML element. There are several types of HTML elements. Let us now understand HTML attributes.

Table of Contents

Understanding HTML Attributes

HTML attributes are unique keywords that provide additional information about an HTML element. They are added to HTML elements in the form of name-value pairs and control the behavior and appearance of the elements on a web page.

For example, the src attribute is used in an HTML img element to specify the source of the image, while the class attribute is used to assign a style to a group of elements. HTML attributes provide additional information about elements on a web page, allowing web developers to create a dynamic, interactive user experience.

The syntax for an HTML attribute is as follows:

Syntax:

<element_name attribute_name="attribute_value">

For example, the src attribute specifies the image's source in the HTML img element. An example of the src attribute would be something like this:

Example:

<img src="image.jpg">

It's important to note that some HTML attributes do not require a value; in these cases, the value can be omitted. For example, the disabled attribute can be added to the form elements to disable it:

Example:

<input type="text" disabled>

In the above example, the attribute name is disabled, and there is no need to assign a value.

Common HTML Attributes

There are many HTML attributes available, but some of the most commonly used include:

class Attribute

The class attribute allows web developers to reuse CSS styles across multiple HTML elements, making it easier to maintain a consistent look and feel for a website. Here's an example of using the class attribute in HTML:

Example:

<!DOCTYPE html>
<html>
  <head>
    <style>
      .highlight {
        background-color: yellow;
      }
    </style>
  </head>
  <body>
    <p class="highlight">This paragraph is highlighted in yellow.</p>
    <p>This is a normal paragraph.</p>
  </body>
</html>

In the example above, the class "highlight" is assigned to the first paragraph using the class attribute. Then, in the style section of the code, the "highlight" class is declared and given a background color of yellow. As a result, the first paragraph will be highlighted in yellow, while the second paragraph will remain normal.

id Attribute

The id attribute in HTML specifies a unique identifier for an HTML element. This identifier can then be used as CSS ID Selector to select and style specific elements. Here's an example of using the id attribute in HTML:

Example:

<!DOCTYPE html>
<html>
  <head>
    <style>
      #highlight {
        background-color: yellow;
      }
    </style>
  </head>
  <body>
    <p id="highlight">This paragraph is highlighted in yellow.</p>
    <p>This is a normal paragraph.</p>
  </body>
</html>

It is important to note that the id attribute must have a unique value in an HTML document. Therefore, while class names can be reused, ID names can only be used once.

src Attribute

The src attribute in HTML specifies the source URL of various HTML elements, including audio, video, embed, iframe, image, input, script, source, and track. The source URL indicates the location of the resource being referenced. For example:

Example:

<audio src="music.mp3" controls></audio>

In this example above, the src attribute specifies the URL of an audio file that the browser will play. The controls attribute displays audio controls, such as play/pause and volume, for the user to interact with the audio.

alt Attribute

The alt attribute in HTML specifies the alternative text for an HTML element, especially for images. Alternative text describes an element's content when it cannot be displayed, such as when an image file is missing or the user is using a screen reader.

Example:

<img src="image.jpg" alt="An example image">

In this example above, the alt attribute specifies the alternative text for the image element. If the image cannot be displayed for any reason, the alternative text "An example image" will be shown instead.

href Attribute

The href attribute in HTML specifies the URL of a linked resource, such as a web page, email address, or file. The linked resource may be opened in the same tab, a new tab, or a new window, depending on the browser and user's settings.

Example:

<a href="https://www.example.com">Visit Example.com</a>

width and height Attributes

The width and height attributes in HTML specify the width and height of an HTML element, such as an image.

Example:

<img src="image.jpg" alt="An example image" width="400" height="300">

In the example above, the width attribute is set to 400, and the height attribute is set to 300, which means the image will be displayed with a width of 400 pixels and a height of 300 pixels.

Found This Page Useful? Share It!
Get the Latest Tutorials and Updates
Join us on Telegram