The most common HTML attributes in an overview

HTML attributes store additional information in an HTML tag. They are simply added to the code. There are several other individual attributes in addition to universal, event, and data attributes.

What are HTML attributes used for?

HTML attributes are used to store additional information about elements in an HTML tag. They consist of a name and a value. The HTML attributes are located in the opening tag and are case insensitive. Although their values do not necessarily have to be written in inverted commas, this style is still recommended to avoid errors. The examples below illustrate how HTML attributes are included in the code:

<element attribute name="attribute value"/>

The <a> tag and the attribute href are required to include a link on a website. This looks like this:

<!DOCTYPE html>
<html>
<head>
<title>sample title</title>.
</head>
<body>
<a href="https://www.example.com">this link will take you to the example site.</a>
</body>
</html>
Tip

Read our detailed article on a href for more on internal and external linking with HTML and its attributes.

What HTML attributes are there?

There are several different HTML attributes, although some options are no longer usable since HTML5 was introduced. The HTML attributes are divided into five different groups:

  • Classic universal attributes can be used in almost all elements and keep a constant role. However, they have no effect for some elements.
  • Specific attributes affect individual elements and define their parameters.
  • Attributes that apply since the introduction of HTML5 can partly create new options or replace older HTML attributes.
  • Event attributes trigger a defined event for an element when users perform a certain action.
  • Data attributes may contain information which is not recognisable to users.

Classic Universal Attributes

Classic universal attributes are allowed in most HTML tags. The examples below are the most common:

HTML attributes Description Example
id Identifies a HTML element. id="example"
class Assigns an element to one or more classes. class="cars"
style Defines the style of an HTML element and can determine the colour, font, font size, etc. style="color: blue; font-size: 2em"
title Contains additional information about the content of an element; this is displayed in a separate window when the mouse hovers over the element. title="exampletext"
lang Determines the language of a document. <html lang="en">
dir Defines the text’s running direction from left to right or vice versa. <html dir="ltr"> example</html>

Specific HTML attributes

There are several specific HTML attributes for defining individual elements. The examples below are the most common ones:

HTML attributes Description Example
old Displays an alternative text if an image cannot be loaded or displayed. <img src="https://www.ionos.co.uk/digitalguide/redcar.jpg" alt="Red sports car at a traffic light.">
height Sets the height of an element in px. <img alt="the red car" height="220">
width Sets the width of an element in px. <img alt="the red car" width="220">
href Defines the URL for a link. <a href="https://www.examplesite.com" title="Learn more">
hreflang Sets the language of the linked document. <a href="https://www.examplesite.com" lang="en" hreflang="en">Information in English</a>
target Determines where a link should be opened. <a href="https://www. examplesite.com" target="_blank">
rel Defines the relationship between the target and the linked documents. <a rel="nofollow" href="https://www. examplesite.com/">sample site</a>
src Defines the origin of an element. <img src="https://www.ionos.co.uk/digitalguide/redcar.jpg" alt="the red car>
autoplay Ensures that specific media content is played automatically; however most browsers can override this setting. <video autoplay>
poster Sets a preview image when you embed video into HTML. <video controls poster="preview.png">

New attributes since HTML5

There are several HTML attributes which have been added since HTML5 and HTML 5.1 were introduced. These include the following:

HTML attributes Description Example
contenteditable Defines whether the content of an element may be edited; the possible values are true and false. <p contenteditable="false">
hidden Universal attribute which can hide an element. <p hidden> This text is hidden </p>
dropzone Defines whether an element is copied, linked or moved during drag and drop. <p dropzone="move">
draggable Universal attribute which defines whether the content of an element can be dragged and dropped. <p draggable="false">
loading Specifies how external media is loaded; the allowed values are auto, eager, and lazy. <img src="https://www.ionos.co.uk/digitalguide/redcar.jpg" alt="the red car" loading="lazy"
spellcheck Specifies whether spell checking can be enabled; allowed values are true and false. <p contenteditable="true" spellcheck="false">

Event attributes

There are many different HTML attributes which trigger an event in a browser. Therefore, the following HTML attributes are only a small selection of the different events which can be triggered with JavaScript in HTML.

HTML attributes Description Example
onclick Triggers an event in JavaScript with a mouse click. <button onclick="samplefunction ( )">click here</button>
onscroll Triggered when the element is scrolled. <div onscroll="examplefunction ( )">
onkeydown Triggered when a button is pressed. <input type="text" onkeydown=example function ( ) ">
onsearch Triggers a JavaScript as soon as a search is entered in the search form. <input type="search" onsearch="examplefunction ( )">
onerror Executes a JavaScript in the event of an error. <img src="https://www.ionos.co.uk/digitalguide/redcar.jpg" onerror="examplefunction ( ) ">
oncopy Triggered when a text is copied. <input type="text" oncopy="examplefunction ( ) " value="copy this text">
onselect Triggers a JavaScript as soon as you have selected a text in the input element. <input type="text onselect="examplefunction ( ) " value="exampletext">

Data attributes

In addition to the HTML attributes listed above, there are some attributes which can only be evaluated with a script or used with CSS. This allows information to be included which is not presented visually. These HTML attributes always start with data-. You can set them with setAttribute and read them with getAttribute. Search engines also do not evaluate these HTML attributes. Only lowercase letters, numbers, hyphens, periods, and colons are allowed for the data attributes.

<article
id="example elements"
data-columns="5"
data-index-number="1385"
data-parent="html5">
</article>

Conclusion: HTML attributes are important for almost every website

If you decide to learn HTML, you’ll notice that HTML attributes are an important steppingstone to an optimal and fully functional website. The HTML attributes are the best and safest way to employ functions which deviate from everyday use. The stored information will ensure that all aspects of your new website work in conjunction with each other. It is especially easy to use with one of the HTML editors.

Tip

A perfect website — just the way you like it. You have access to all the tools you need to build your online presence from the get-go with the Website Builder from IONOS. Alternatively, our experts can create your website according to your individual wishes. Choose the right model for your requirements!

Was this article helpful?