Introduction to HTML Attributes | Syntax and Common Attributes - Boolean and Custom Data Attributes - Global and Event Attributes of HTML

Introduction to HTML Attributes:

HTML attributes provide additional information about HTML elements and are always included in the opening tag. Attributes are added to an HTML element to modify or provide extra details about it. 

Here's a brief introduction to HTML attributes:

1. Syntax:

An HTML attribute is typically included in the opening tag of an element and consists of a name and a value.

     html

     <tagname attribute="value">Content</tagname>

Introduction to HTML Attributes

2. Common Attributes:

Some common attributes used in HTML include:

  `class`: Specifies one or more class names for an element (used for styling with CSS).

  `id`: Specifies a unique id for an element.

  `style`: Used to apply inline CSS styles to an element.

  `src`: Specifies the source URL for external resources like images.

  `href`: Specifies the URL of a linked resource, typically used in `<a>` (anchor) elements.

  `alt`: Specifies alternative text for an image, to be displayed if the image cannot be loaded.

  `width` and `height`: Specifies the width and height of an element, often used with images.

3. Boolean Attributes:

Some attributes are boolean, meaning they don't require a value. If present, the attribute is considered true.

     html

     <input type="text" disabled>

4. Custom Data Attributes:

HTML5 allows the use of custom data attributes, prefixed with `data-`, to store private data private to the page or application.

     html

     <div data-author="John Doe">Article Content</div>   

5. Global Attributes:

Some attributes can be used with any HTML element and are known as global attributes. Examples include `class`, `id`, `style`, `lang`, etc.

     html

     <div class="container" id="main-container" style="color: blue;">Content</div>

6. Event Attributes:

Event attributes are used to specify JavaScript to be executed when an event occurs, such as `onclick`, `onmouseover`, etc.

     html

     <button onclick="myFunction()">Click me</button>

Attributes play a crucial role in defining the behavior, appearance, and structure of HTML elements. They enhance the functionality and presentation of web pages.