HTML attributes provide additional information about HTML elements and help to define their properties and behavior. They are used to control the appearance and behavior of HTML elements, such as images, links, forms, and more. They are always specified in the opening tag of an element and are written in the form of name-value pairs. Some common examples of HTML attributes include:
- The “id” attribute, which can be used to give a unique name to an HTML element, which can be used to reference it in JavaScript or CSS.
- The “class” attribute, which can be used to apply CSS styles to an element.
- The “style” attribute, which can be used to define inline CSS styles for an element.
- The “src” attribute, which is used to specify the URL of an image or media file in the <img> and <source> elements.
- The “href” attribute, which is used to specify the URL of a link in the <a> element.
- The “alt” attribute, which is used to provide alternative text for an image in the <img> element.
- The “width” and “height” attributes, which can be used to specify the dimensions of an image or other element.
- The “value” attribute, which is used to define the initial value of an input element, such as a text input or a checkbox.
- The “placeholder” attribute, which can be used to provide a hint or a placeholder text for an input element.
- The “disabled” attribute, which can be used to disable an input element and prevent the user from interacting with it.
- The “name” attribute, which is used to give a name to an input element, which can be used to reference it in JavaScript or in a form submission.
- The “type” attribute, which is used to specify the type of an input element, such as text, password, checkbox, radio, etc.
- The “data” attribute, which can be used to store custom data private to the page or application, which can be used in JavaScript or CSS.
- The “role” attribute, which can be used to define the role of an element in an HTML document, such as “navigation”, “main”, “header”, “footer”, etc.
Example of an HTML element with attributes:
<img src="image.jpg" alt="A beautiful sunset" width="500" height="300" class="featured-image">In this example, the <img> element is used to display an image. The “src” attribute is used to specify the URL of the image file, “image.jpg”. The “alt” attribute provides a text description of the image, “A beautiful sunset”, which will be displayed if the image cannot be loaded. The “width” and “height” attributes are used to specify the dimensions of the image in pixels. The “class” attribute is used to apply a CSS class to the image, “featured-image”. This class can be used to define styles for the image in a separate CSS file.
Another example:
<a href="https://www.htmltutorial.xyz" target="_blank" class="link-style"> Visit our website </a>In this example, the <a> element is used to create a hyperlink. The “href” attribute is used to specify the URL of the link, “https://www.htmltutorial.xyz“. The “target” attribute is used to specify where the link should open, in this case it opens in a new tab. The “class” attribute is used to apply a CSS class to the link, “link-style”. This class can be used to define styles for the link in a separate CSS file.