HTML Attributes with Examples for Beginners

HTML attributes add extra detail to elements so the browser knows how to handle them. Here you will see examples and will cover the full guide.

What are HTML Attributes?

An attribute adds detail to an element. It defines extra information about that element. It can also change the way the element behaves on the page.

The syntax looks like this:

<tagname attribute="value">content</tagname>

You write the attribute inside the opening tag. The attribute always has a name and a value.

Here are the commonly used HTML attributes:

• id sets a unique name for one element.
• class groups many elements under one style.
• href points to a web address in a link.
• src points to the file source of an image or media.

Global vs. Specific Attributes in HTML with Examples

A global attribute applies to every element in HTML. A specific attribute works only on some elements.

Here is a table to show the main difference:

Global attributes give more control across all elements. Specific attributes add detail only to certain tags.

Examples of HTML Attributes

Use of id:

<p id="intro">This is a paragraph with an id attribute.</p>

This example sets a unique name for the paragraph. The id attribute lets you target that element with CSS or JavaScript. It makes the element stand alone with a clear reference.

Use of class:

<p class="note">This is one paragraph with a class.</p>
<p class="note">This is another paragraph with the same class.</p>

This example groups two paragraphs under one class. The class attribute lets you style or script many elements at once. You can use the same class name across the page.

Use of href:

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

This example creates a link to an external page. The href attribute holds the web address. The anchor tag then uses it to send the user to that location.

Use of src:

<img src="photo.jpg" alt="Sample photo">

This example loads an image on the page. The src attribute points to the file path. The browser uses that path to fetch and display the image.

Wrapping Up

In this article you learned what attributes are and how to use them. You also saw the difference between global and specific attributes.

Here is a quick recap:

• Attributes add detail and control to elements.
• Syntax follows the pattern name="value".
• Global attributes work on every element.
• Specific attributes work on certain tags only.
• You saw examples of id, class, href, and src.

FAQs

<img src="image.jpg" alt="Example">

<div id="header">Header</div>
<div class="menu">Menu</div>

<a href="https://example.com">Visit Site</a>

<p id="para1" class="text" style="color:red;">Hello</p>

Similar Reads