Skip to content
html tutorial
Menu
  • About us
  • Disclaimer
  • Privacy Policy
Menu
HTML Attributes

HTML Attributes

Posted on January 16, 2023

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.
HTML Attributes

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.

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Recent Posts

  • HTML Text Formatting

    HTML Text Formatting

    January 28, 2023
  • HTML Images Tag

    HTML Images Tag

    January 27, 2023
  • <strong>HTML a tag- Anchor Tag</strong>

    <strong>HTML a tag- Anchor Tag</strong>

    January 27, 2023
  • HTML Paragraphs: The building blocks of web content

    HTML Paragraphs: The building blocks of web content

    January 17, 2023
  • HTML Heading tags

    HTML Heading tags

    January 17, 2023
  • HTML Elements

    HTML Elements

    January 16, 2023
  • All HTML code editors and how to use it.

    All HTML code editors and how to use it.

    January 14, 2023
  • HTML Introduction (What is HTML?)

    HTML Introduction (What is HTML?)

    January 8, 2023
©2023 HTML TUTORIAL | Design: Newspaperly WordPress Theme