HTML Attributes - Syntax, Global & Event Attributes
Introduction to HTML Attributes:
HTML attributes play a crucial role in defining the behavior and appearance of elements within an HTML document. They provide additional information to browsers, assistive technologies, and search engines. Understanding how to use attributes correctly is essential for effective web development.
- HTML Attribute Syntax:
- class: Specifies one or more CSS classes to apply to an element
- To use this attribute, add class="classname" within the opening tag of an element.
id: Specifies a unique identifier for an element.
To use this attribute, add id="element_id" within the opening tag of an element. - onclick: Executes a JavaScript function when an element is clicked.
To use this attribute, add onclick="functionName()" within the opening tag of an element.
onload: Executes a JavaScript function when the page finishes loading.
To use this attribute, add onload="functionName()" within the opening <body> tag. - align: Specifies the alignment of an element.
- Instead of using this attribute, use CSS properties like text-align or flexbox for alignment.
- bgcolor: Sets the background color of an element.
- Instead of using this attribute, use CSS properties like background-color for background styling.
- border: Specifies the border size of an element.
- Instead of using this attribute, use CSS properties like border-width or border-style for border styling.
HTML attributes are specified within the opening tags of HTML elements using the attribute name and value pairs. The syntax is as follows:
Global Attributes:
Global attributes are those that can be used with any HTML element. They provide common functionalities across different elements. Some commonly used global attributes include:
HTML Attribute Syntax 1
HTML Attribute Syntax 2
Let's say we have an HTML element, such as an image (), and we want to specify the source URL for the image and provide alternative text. We can use the src and alt attributes, respectively.
HTML Attribute Syntax 3
In this example, the src attribute specifies the source URL of the image, which in this case is "image.jpg". The alt attribute provides alternative text that will be displayed if the image cannot be loaded or for accessibility purposes. The value for the alt attribute is "A beautiful sunset".
HTML Attribute Syntax 4
In this example, the border attribute sets the border width of the table to "1". This attribute adds a border around the table to visually separate its contents.
style: Defines inline CSS styles for an element.
To use this attribute, add style="property: value;" within the opening tag of an element.
Event Attributes:
Event attributes enable interactivity by allowing JavaScript functions to be triggered when certain events occur. Some commonly used event attributes include:
Deprecated Attributes:
Deprecated attributes are those that are no longer recommended for use in HTML. It is advised to avoid using them and opt for more modern alternatives. Some deprecated attributes include:
