Using HTML Attributes: List of the Most Common Attributes Explained

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):

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

HTML attributes come in four basic types:

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.

Pros

• Easy to use with a learn-by-doing approach
• Offers quality content
• Gamified in-browser coding experience
• The price matches the quality
• Suitable for learners ranging from beginner to advanced

Main Features

• Free certificates of completion
• Focused on data science skills
• Flexible learning timetable

GET 25% OFF

Pros

• Simplistic design (no unnecessary information)
• High-quality courses (even the free ones)
• Variety of features

Main Features

• Nanodegree programs
• Suitable for enterprises
• Paid Certificates of completion

UP TO 70% OFF

Pros

• A wide range of learning programs
• University-level courses
• Easy to navigate
• Verified certificates
• Free learning track available

Main Features

• University-level courses
• Suitable for enterprises
• Verified certificates of completion

FREE COURSES

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:

<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:

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

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

<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:

<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:

<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:

<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:

<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:

<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.