HTML Elements

Welcome to the HTML Attributes tutorial on codeswithpankaj.com. In this tutorial, we will explore what HTML attributes are, how they are used, and provide examples to help you understand their functionality.

What are HTML Attributes?

HTML attributes provide additional information about HTML elements. They are always included in the opening tag of an element and usually come in name/value pairs like name="value".

Common HTML Attributes

1. The href Attribute

The href attribute is used to specify the URL of the page the link goes to.

Example:

<a href="https://www.codeswithpankaj.com">Visit codeswithpankaj.com</a>

2. The src Attribute

The src attribute is used to specify the path to the image to be displayed.

Example:

<img src="https://www.codeswithpankaj.com/images/logo.png" alt="codeswithpankaj Logo">

3. The alt Attribute

The alt attribute provides alternative text for an image, if the image cannot be displayed.

Example:

<img src="https://www.codeswithpankaj.com/images/logo.png" alt="codeswithpankaj Logo">

4. The id Attribute

The id attribute specifies a unique id for an HTML element.

Example:

<p id="intro">Welcome to codeswithpankaj.com!</p>

5. The class Attribute

The class attribute is used to specify one or more class names for an HTML element.

Example:

<p class="intro">Welcome to codeswithpankaj.com!</p>
<p class="intro">Learn HTML, CSS, and more!</p>

6. The style Attribute

The style attribute is used to add inline CSS to an element.

Example:

<p style="color: blue; font-size: 20px;">This is a styled paragraph.</p>

7. The title Attribute

The title attribute provides additional information about an element (displayed as a tooltip).

Example:

<p title="Welcome to codeswithpankaj.com!">Hover over this paragraph.</p>

8. The lang Attribute

The lang attribute specifies the language of the element's content.

Example:

<p lang="en">This is a paragraph in English.</p>

9. The target Attribute

The target attribute specifies where to open the linked document.

Example:

<a href="https://www.codeswithpankaj.com" target="_blank">Visit codeswithpankaj.com</a>

10. The data-* Attribute

The data-* attribute is used to store custom data private to the page or application.

Example:

<div data-user-id="12345">User ID: 12345</div>

Conclusion

HTML attributes are essential for defining the behavior and appearance of HTML elements. By mastering these attributes, you can create more dynamic and interactive web pages. Stay tuned to codeswithpankaj.com for more tutorials and web development tips!

---