HTML ATTRIBUTE

Fazzey's world

HTML Attribute

  • Additional information about the elements is provided by attribute.
  • All HTML components are capable of having attributes.
  • Typically, attribute are expressed as name = value pairs.

The parts of html attribute:

  1. A name and a value make up an attribute. The HTML element is <element>. The attribute names are name1 and name2.
  2. An element's attribute provide it more capabilities or functionality.
  3. In the opening tag of the element, attributes are inserted.
  4. Any amount of characteristics can be applied to an element.

Syntax:

The href attribute;
<a href="https://www.gocourse.in/">Click GOCOURSE</a>

Common HTML Attributes:

1. id: 
A unique identifier for the element.

    <div id="header">Header Content</div>

2. class:
Specifies one or more class names for the element (used for CSS or JavaScript targeting).
<p class="intro">Welcome to the website</p>


3. style: Adds inline CSS styling directly to an element.

<h1 style="color: blue;">Blue Heading</h1>


4. src: 
Specifies the URL of an external resource, like an image or script.
<img src="image.jpg" alt="Sample Image">


5. href: 
Provides a URL for a link.
<a href="https://example.com">Visit Example</a>


6. alt: Provides alternative text for an image if it can't be displayed.

<img src="photo.jpg" alt="Photo of a sunset">


7. title: 
Adds a tooltip that appears when the user hovers over the element.
<button title="Click here">Submit</button>


8. target: Specifies where to open a linked document (often used with <a>).

<a href="https://example.com" target="_blank">Open in New Tab</a>


9. type: Defines the type of an input element (used in forms).

<input type="text" name="username">

10. value: 
Specifies the value of an input element (used in forms).

<input type="submit" value="Submit">


11. placeholder: Provides a hint or description in input fields before the user enters data.

<input type="text" placeholder="Enter your name">


12. disabled: Disables the element, preventing user interaction.

<button disabled>Can't Click Me</button>


12. readonly: Makes input elements non-editable.

<input type="text" value="Read Only" readonly>


13. maxlength: Limits the number of characters allowed in an input field.

<input type="text" maxlength="10">


14. data-*: Custom data attributes used to store extra information.

<div data-user-id="123">User Information</div>

Example:


  
  <!DOCTYPE html>
  <html>
  <head>
  <title>HTML Attribute</title>
  </head>
  <body>
  <h1>HTML programming language</h1>
  <p>To visit our "Gocourse" website:<p>
  <a href="https://www.gocourse.in/">Click GOCOURSE</a>
  </body>
  </html>


Output:


Our website uses cookies to enhance your experience. Learn More
Accept !

GocourseAI

close
send