HTML Attributes

This section will learn about HTML Attributes

HTML attributes are special words used inside the opening tag of an HTML element to control the element's behavior or provide additional information about it. Attributes are written as name="value" pairs and are always included within the opening tag.

Common HTML Attributes

  1. id: Uniquely identifies an element in a document.
<div id="header">...</div>
  1. class: Specifies one or more class names for an element, which can be used by CSS or JavaScript.
<p class="intro">This is an introductory paragraph.</p>
  1. style: Adds inline CSS to an element.
<h1 style="color: blue;">Hello, World!</h1>
  1. href: Specifies the URL of the page the link goes to (used in <a> tags).
<a href="https://www.example.com">Visit Example</a>
  1. src: Specifies the URL of the image or other media file (used in <img>, <audio>, <video> tags).
<img src="image.jpg" alt="A beautiful scenery" />
  1. alt: Provides alternative text for an image, which is displayed if the image cannot be loaded.
<img src="image.jpg" alt="A beautiful scenery" />
  1. title: Provides additional information about an element, often displayed as a tooltip.
<button title="Submit the form">Submit</button>
  1. disabled: Disables an element, making it unclickable or uneditable (used in form elements like <input>, <button>).
<input type="text" disabled />
  1. placeholder: Provides a short hint that describes the expected value of an input field.
<input type="text" placeholder="Enter your name" />
  1. name: Specifies the name of an input element, which is used when sending form data.
<input type="text" name="username" />
  1. value: Specifies the initial value of an input element.
<input type="text" value="Default Text" />
  1. required: Makes an input field mandatory to fill out before form submission.
<input type="email" required />
  1. type: Specifies the type of an input element (e.g., text, password, submit).
<input type="password" />
  1. data-\*: Used to store custom data that can be used by JavaScript.
<div data-user-id="12345">User Information</div>
  1. role: Defines the role of an element in a web application, often used for accessibility.
<nav role="navigation">...</nav>