HTML CSS - Attributes

Using attributes in HTML elements

HTML attributes provide additional information about HTML elements. They are always included in the opening tag of an element and usually come in name/value pairs like name="value". This tutorial explores the usage of attributes in HTML elements.

Common HTML Attributes

Here is a list of some common HTML attributes and their usage:

• href: Specifies the URL of a link (used with <a>).
• src: Specifies the path to an image (used with <img>).
• alt: Provides alternative text for an image (used with <img>).
• id: Specifies a unique identifier for an element.
• class: Specifies one or more class names for an element, allowing CSS and JavaScript to target the element.
• style: Specifies inline CSS styles for an element.
• title: Provides additional information about an element, often displayed as a tooltip when the mouse hovers over the element.

Examples of Using Attributes

Here are some examples of using attributes in HTML elements:

<!-- Using the href attribute in an anchor tag -->
<a href="https://example.com">Visit Example.com</a>

<!-- Using the src and alt attributes in an img tag -->
<img src="logo.png" alt="Website Logo" width="200">

<!-- Using the id and class attributes in a paragraph tag -->
<p id="intro" class="swf-lsn-text-large">Welcome to my website!</p>

<!-- Using the style attribute to apply inline CSS -->
<p style="color: blue; font-size: 18px;">This is a styled paragraph.</p>

<!-- Using the title attribute to provide a tooltip -->
<a href="https://example.com" title="Visit Example.com">Example.com</a>
            

Global Attributes

Global attributes can be used with any HTML element. Here are some common global attributes:

• accesskey: Specifies a shortcut key to activate or focus an element.
• contenteditable: Specifies whether the content of an element is editable.
• data-*: Used to store custom data private to the page or application.
• draggable: Specifies whether an element is draggable.
• hidden: Specifies that an element is not yet, or is no longer, relevant.
• lang: Specifies the language of the element's content.
• spellcheck: Specifies whether the element is to have its spelling and grammar checked.
• tabindex: Specifies the tab order of an element.
• title: Specifies extra information about an element (displayed as a tooltip).

Here is an example of using global attributes:

<p contenteditable="true">This paragraph is editable.</p>
<div draggable="true">Drag me!</div>
<p hidden>This paragraph is hidden.</p>
            

Data Attributes

Data attributes allow you to store extra information on standard HTML elements. The data attributes are named using the data- prefix. Here is an example:

<div data-user-id="12345" data-role="admin">
    User Info: John Doe
</div>

<script>
    // Accessing data attributes in JavaScript
    const userDiv = document.querySelector('div[data-user-id]');
    const userId = userDiv.getAttribute('data-user-id');
    const userRole = userDiv.getAttribute('data-role');
    console.log(`User ID: ${userId}, Role: ${userRole}`);
</script>
            

Boolean Attributes

Boolean attributes are attributes that can only have one value, which is generally the same as the attribute name. Here are some common boolean attributes:

• checked: Used with <input> elements to indicate whether an option is selected.
• disabled: Indicates that the element is disabled.
• readonly: Specifies that the element is read-only.
• required: Specifies that the element must be filled out before submitting the form.

Here is an example of using boolean attributes:

<input type="checkbox" checked> Checked checkbox
<input type="text" disabled> Disabled input
<input type="text" readonly value="Read-only text">
<input type="text" required> Required input
            

Summary

In this tutorial, you learned about using attributes in HTML elements. Attributes provide additional information and functionality to HTML elements. You explored common attributes, global attributes, data attributes, and boolean attributes. Understanding how to use attributes is essential for creating rich and interactive web pages.