Cyber Week

Save big!

All courses under $5 - for a limited time!

Code has been added to clipboard!

Using HTML Attributes: List of the Most Common Attributes Explained

Reading time 3 min
Published Mar 27, 2019
Updated Sep 30, 2019

TL;DR – HTML attributes are additional values used to customize HTML elements.

What is an Attribute in HTML

In HTML, attributes can be applied to basically any element. They modify the default behavior of the element or specify certain characteristics (e.g., dimensions):

Example
<img src="image.png" alt="HTML Image height" height="100px">

HTML attributes come in four basic types:

Type Function Supported by
Required Required for an element to work as intended One or multiple specific elements
Optional Changes the element's default functionality One or multiple specific elements
Global Changes the element's default functionality All elements
Event Specifies conditions for a script to run All elements

How to Write HTML Attributes

HTML attributes are always included in the opening tag. The syntax is rather simple:

<tag name="value">

As you can see, attributes are specified in name-value pairs:

  • name defines the name for the HTML attribute
  • value specifies the value you wish to set for it

HTML attributes are case-insensitive. However, World Wide Web Consortium recommends to write them in lowercase for a neater look.

Note: don't forget to encase the value in quotes.

Most Common HTML Attributes: a List

The HTML id attribute helps you to add a unique ID for an element to be used for identification:

Example
<nav id="faq">
 <a href="https://www.bitdegree.org/faq">Your questions answered</a>
</nav>

The HTML class attribute creates a relation between the element and a stylesheet:

Example
<p class="paragraph1">This is paragraph text.</p>

The HTML style attribute allows you to provide inline styling for an element:

Example
<div style="background-color: black; color: white;">
  This text was styled using the style attribute
</div>

The HTML title attribute adds information related to the element. Hovering on it will cause a tooltip with the title you created to appear:

Example
<h1 title="This will show up after hovering the mouse over this element">Some random text</h1>

Note: id, class, style and title attributes are suported globally.

The alt attribute sets up some alternative text to be displayed in case an element (e.g., an image) cannot be loaded:

Example
<img src="image.png" alt="Space Doggo">

Note: you can use alt with <applet>, <area>, <img> and <input> elements.

The HTML href attribute adds an URL destination for a link, creating a hyperlink which can take you to any other webpage:

Example
<a href="https://www.bitdegree.org/">Click this link to start learning.</a>

Note: you can use HTML href with <a>, <area>, <base> and <link> elements.

Using HTML width and height attributes, you can change the element's dimensions:

Example
<img src="image.png" width="100" height="100">

Note: size is usually defined in pixels (px).

src is an abbreviation for source. By using this HTML attribute, you can define an external source for an element:

Example
<img src="image.png" alt="Space Doggo" width="50" height="50">

Note: you can use src with <frame>, <iframe>, <img>, <input> and <script> elements.

HTML Attributes: Useful Tips

  • When using multiple HTML attributes, you can list them in any order - just make sure to separate them with spaces.
  • alt helps to make your website accessible for disabled users who use screen readers. When assistive technologies have an alternative text to read, people with disabilities can understand the content better.
  • The HTML title attribute can help to optimize your website for search engines, as this supplementary information can also contain keywords.