HTML Attributes List with Example

HTML (HyperText Markup Language) attributes are special keywords used within tags to modify the behavior or appearance of elements. These attributes define properties such as links, styles, dimensions, and interactivity. In this comprehensive guide by GeeksHelp, we will explore essential HTML attributes along with practical examples to help you enhance your web development skills.

Essential HTML Attributes with Examples

1. The href Attribute

Defines the URL that a hyperlink points to within an <a> tag.

Example:

<a href="https://www.geekshelp.org">Visit Geeks Help</a>

2. The src Attribute

Defines the source file for images, audio, and video elements.

Example:

<img src="image.jpg" alt="Sample Image">

3. The alt Attribute

Provides descriptive text for an image if it fails to load.

Example:

<img src="logo.png" alt="Geeks Help Logo">

4. The style Attribute

Allows inline CSS styling within an element.

Example:

<p style="color: blue; font-size: 18px;">Welcome to Geeks Help!</p>

5. The title Attribute

Adds a tooltip that appears when a user hovers over an element.

Example:

<p title="Additional Information">Hover over this text.</p>

6. The width and height Attributes

Specify dimensions for images and other media elements.

Example:

<img src="banner.jpg" width="500" height="300">

7. The id Attribute

Assigns a unique identifier to an element for scripting or styling.

Example:

<p id="intro">This is an introduction paragraph.</p>

8. The class Attribute

Groups multiple elements under a common CSS class for styling.

Example:

<p class="highlight">This is highlighted text.</p>

9. The Placeholder Attribute

Displays a hint inside input fields.

Example:

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

10. The readonly Attribute

Prevents users from editing the content of an input field.

Example:

<input type="text" value="GeeksHelp" readonly>

11. The disabled Attribute

Disables form elements such as input fields and buttons.

Example:

<button disabled>Submit</button>

12. The checked Attribute

Pre-selects a checkbox or radio button.

Example:

<input type="checkbox" checked> I agree to the terms

13. The selected Attribute

Pre-selects an option in a dropdown menu.

Example:

<select>

    <option value="html">HTML</option>

    <option value="css" selected>CSS</option>

    <option value="js">JavaScript</option>

</select>

14. The autofocus Attribute

Automatically sets focus on an input field when the page loads.

Example:

<input type="text" autofocus>

15. The required Attribute

Ensures that an input field must be filled before submitting a form.

Example:

<input type="email" required>

Conclusion

Understanding and utilizing HTML attributes effectively enhances web page functionality and user experience. These attributes play a crucial role in defining elements and improving interactivity. Geeks Help is committed to providing quality learning resources to help you master web development.

For more expert tutorials and development tips, visit Geeks Help.