HTML Attributes

By Tony 2023.3.9 • Last updated 2024.1.25

Attributes are additional information added to a tag. They provide more information about the tag's class, id, title, style, function, and more depending on what the tag is. A tag can have multiple attributes that have different usages.

Here are some examples:

<a id="link" href="https://google.com" style="color:red;">Link</a>
<img src="image.png" alt="image" width="100px" class="image">
<button title="Click me" onclick="animation()">Click</button>

To give a tag an attribute, type the attribute's name first, then type the "=" sign, and type the value (information), of the attribute in between the "" symbols. Always put attributes in the opening tag and use spaces to seperate different attributes.

• "id" attribute gives the tag a unique id that no other tags can have
• "class" assigns the tag a class that other tags can also have
• "href" tells the broswer the destination of a link
• "style" lets us style the tag with CSS syntax directly in HTML
• "src" tells the broswer the source of an element
• "alt" is alternative text
• "width" is the width of the element
• "title" shows when user hovers over the element
• "onclick" runs JavaScript functions when the element is clicked

Here is the output of the code above:

Attributes make HTML tags even more powerful. By selecting a tag's id or class attribute, you can style the tag or run JavaScript code with it! And that's not all, there are hundreds of attributes for different tags and different usages. Attribute is a really important and powerful part of HTML5. Check our references for more interesting attributes and learn more 😄!