HTML Attributes

By Tony 2023.3.9

Attributes are extra information added to a tag. They provide more information about the tag's class, id, title, style, function, and more depending on what tag it 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>

Type the attribute's name first, then type the "=" sign, and type the value, or information, of the attribute in between the "" symbols. Always put attributes in the open tag and use space to seperate different attributes.

• "id" attribute gives the tag an unique id that no other tags can have
• "class" attribute gives the tag a class that other tags can have
• "href" tells broswer the destination of a link
• "style" lets us style the tag with CSS syntax
• "src" tells 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 tags even more powerful. By selecting a tag's id or class attribute, you can style the tag or run JavaScript code! And that's not all! There are hundreds of attributes for different tags and different usages. Attribute is a really important and powerful syntax in HTML5. Check our reference for more interesting attributes and learn more 😄!