Learn with us

HTML attributes provide additional information or modify the behavior of HTML elements. Here are some commonly used HTML attributes with examples:

1. class attribute: Specifies one or more class names for an element, which can be used for CSS styling or JavaScript manipulation.

<p class="highlight">This paragraph has a class applied to it.</p>

2. id attribute: Specifies a unique identifier for an element, which can be used for JavaScript manipulation or linking to a specific element within a page.

<h1 id="page-title">Welcome to My Website</h1>
<a href="#page-title">Go to Page Title</a>

3. src attribute: Specifies the source URL of an image or media file to be displayed.

<img src="image.jpg" alt="Description of the image">

4. href attribute: Specifies the target URL for a hyperlink.

<a href="https://www.example.com">Visit Example Website</a>

5. alt attribute: Provides alternative text for an image when it cannot be displayed.

<img src="image.jpg" alt="Description of the image">

6. style attribute: Specifies inline CSS styles to apply to an element.

<p style="color: blue; font-size: 18px;">This paragraph has some inline styles applied.</p>

7. disabled attribute: Disables an input, button, or other form elements.

<input type="text" disabled>
<button type="submit" disabled>Submit</button>

8. placeholder attribute: Provides a temporary hint or example text within an input field.

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

9. value attribute: Specifies the initial value of an input element.

<input type="text" value="John Doe">

10. colspan and rowspan attributes: Defines the number of columns or rows a table cell should span.

<table>
  <tr>
    <th>Header 1</th>
    <th colspan="2">Header 2</th>
  </tr>
  <tr>
    <td rowspan="2">Cell 1</td>
    <td>Cell 2</td>
    <td>Cell 3</td>
  </tr>
  <tr>
    <td>Cell 4</td>
    <td>Cell 5</td>
  </tr>
</table>

These examples showcase the usage of various HTML attributes that enhance the functionality, styling, or behavior of HTML elements. Attributes can be combined and customized to meet specific requirements within your web pages.