HTML Attributes

HTML attributes provide additional information about HTML elements and help define their properties, behavior, and characteristics. They are added to HTML tags using attributes and values.

The src attribute

Purpose: Specifies the source URL for external resources, such as images, videos, or scripts.
Used with: <img>, <script>, <iframe> , etc.

Example
Try yourself 
        
            
<img src="/images/common/cutecat.png" alt="description of the image">
Try yourself 
        
            
<script src="script.js"></script>
Try yourself 
        
            
<iframe src="https://www.example.com" width="500" height="300"></iframe>

The alt attribute

Purpose: The alt attribute in HTML is used to provide alternative text for images. This text is displayed when the image cannot be displayed, such as when the user is using a text-only browser or when the image is blocked by a filter. It is also used by search engines to index images, so it can help improve your website's search engine ranking.
Used with: <img>

Example
Try yourself 
        
            
<img src="/images/common/cutecat.png" alt="description of the image">

The href attribute

Purpose: The href attribute in HTML is used to define the destination of a hyperlink, specifying the URL or file path that the link should navigate to.
Used with: <a>

Example
Try yourself 
        
            
<a href="https://www.lets-coding.com">Click here</a>

The class attribute

Purpose: Specifies one or more class names for an element, used for styling or JavaScript manipulation.
Used with: Any HTML element

Example
Try yourself 
        
            
<!DOCTYPE html>
<html>
   <head>
      <title>Class Attribute Example</title>
      <style>
         .highlight {
         color: red;
         font-weight: bold;
         }
      </style>
   </head>
   <body>
      <h1 class="highlight">Hello, World!</h1>
      <p>This is an example paragraph.</p>
      <p class="highlight">This paragraph is highlighted.</p>
   </body>
</html>

The id attribute

Purpose: Assigns a unique identifier to an element, used for targeting specific elements in CSS or JavaScript.
Used with: Any HTML element

Example
Try yourself 
        
            
<!DOCTYPE html>
<html>
   <head>
      <title>ID Attribute Example</title>
      <style>
         #special {
         color: blue;
         font-style: italic;
         }
      </style>
   </head>
   <body>
      <h1 id="special">Hello, World!</h1>
      <p>This is an example paragraph.</p>
      <p id="special">This paragraph is special.</p>
   </body>
</html>

The style attribute

Purpose: Defines inline CSS styles for an element.
Used with: Any HTML element

Example
Try yourself 
        
            
<span style="color: red; font-size: 18px;">This text is red and has a font size of 18 pixels.</span>

The width attribute

Purpose: Sets the width of an element, such as an image or table cell.
Used with: <img>, <table>, <iframe>, <video>, etc.

Example
Try yourself 
        
            
<!DOCTYPE html>
<html>
   <head>
      <title>Width and Height Example</title>
   </head>
   <body>
      <img src="/images/common/cutecat.png" alt="Image" width="400" height="300">
      <iframe src="https://www.lets-coding.com" width="500" height="300"></iframe>
      <video src="/media/video/sample_video_720x480_2mb.mp4" width="800" height="400" controls></video>
   </body>
</html>

The height attribute

Purpose: Sets the height of an element, such as an image or table cell.
Used with: <img>, <table>, <iframe>, <video>, etc.

Example
Try yourself 
        
            
<!DOCTYPE html>
<html>
   <head>
      <title>Width and Height Example</title>
   </head>
   <body>
      <img src="/images/common/cutecat.png" alt="Image" width="400" height="300">
      <iframe src="https://www.lets-coding.com" width="500" height="300"></iframe>
      <video src="/media/video/sample_video_720x480_2mb.mp4" width="800" height="400" controls></video>
   </body>
</html>

The target attribute

Purpose: Specifies the browsing context for a hyperlink, such as opening a link in a new tab or window.
Used with: <a>

Example
Try yourself 
        
            
<a href="https://www.lets-coding.com" target="_blank">Open in a new tab</a>

The disabled attribute

Purpose: Disables an input element or button, preventing user interaction.
Used with: <input> <select> <textarea> <button>

Example
Try yourself 
        
            
<input type="text" disabled>
<button disabled>Click Me</button>
<select disabled>
  <option>Option 1</option>
  <option>Option 2</option>
  <option>Option 3</option>
</select>
<textarea disabled>This is a disabled textarea.</textarea>

The placeholder attribute

Purpose: Provides a short hint or example text within an input element.
Used with: <input>

Example
Try yourself 
        
            
<input type="text" placeholder="Enter your name">

The required attribute

Purpose: Specifies that an input element must be filled out before submitting a form.
Used with: <input>, <select>, etc.

Example
Try yourself 
        
            
<input type="text" required>
<textarea required></textarea>
<select required>
  <option value="">Select an option</option>
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
</select>

The checked attribute

Purpose: Pre-selects a checkbox or radio button.
Used with: <input type="checkbox">, <input type="radio">, etc.

Example
Try yourself 
        
            
<input type="checkbox" checked> Checkbox

<input type="radio" name="gender" value="male" checked> Male
<input type="radio" name="gender" value="female"> Female

The data-* attribute

Purpose: Allows custom data attributes to be added to HTML elements, used for storing extra information or JavaScript manipulation.
Used with: Any HTML element

Example
Try yourself 
        
            <input type="range" min="0" max="100" step="5" data-slider-label="Slider Value">

<input type="date" data-min-date="2023-01-01" data-max-date="2023-12-31">

<input type="color" value="#ff0000" data-color-label="Selected Color">

<div data-user-id="123" data-user-name="John Doe" data-user-role="admin">User Information</div>

<button data-action="delete" data-target-id="456">Delete</button>

<img src="/images/common/cutecat.png" alt="Product Image" data-product-id="789">

<a href="#" data-tooltip="Click here for more information">Hover Me</a>