HTML at­trib­utes store ad­di­tion­al in­form­a­tion in an HTML tag. They are simply added to the code. There are several other in­di­vidu­al at­trib­utes in addition to universal, event, and data at­trib­utes.

What are HTML at­trib­utes used for?

HTML at­trib­utes are used to store ad­di­tion­al in­form­a­tion about elements in an HTML tag. They consist of a name and a value. The HTML at­trib­utes are located in the opening tag and are case insensitive. Although their values do not ne­ces­sar­ily have to be written in inverted commas, this style is still re­com­men­ded to avoid errors. The examples below il­lus­trate how HTML at­trib­utes 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 at­trib­utes.

What HTML at­trib­utes are there?

There are several different HTML at­trib­utes, although some options are no longer usable since HTML5 was in­tro­duced. The HTML at­trib­utes are divided into five different groups:

  • Classic universal at­trib­utes can be used in almost all elements and keep a constant role. However, they have no effect for some elements.
  • Specific at­trib­utes affect in­di­vidu­al elements and define their para­met­ers.
  • At­trib­utes that apply since the in­tro­duc­tion of HTML5 can partly create new options or replace older HTML at­trib­utes.
  • Event at­trib­utes trigger a defined event for an element when users perform a certain action.
  • Data at­trib­utes may contain in­form­a­tion which is not re­cog­nis­able to users.

Classic Universal At­trib­utes

Classic universal at­trib­utes are allowed in most HTML tags. The examples below are the most common:

HTML at­trib­utes De­scrip­tion Example
id Iden­ti­fies 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 ad­di­tion­al in­form­a­tion about the content of an element; this is displayed in a separate window when the mouse hovers over the element. title="ex­ample­text"
lang De­term­ines 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 at­trib­utes

There are several specific HTML at­trib­utes for defining in­di­vidu­al elements. The examples below are the most common ones:

HTML at­trib­utes De­scrip­tion Example
old Displays an al­tern­at­ive 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.ex­amples­ite.com" title="Learn more">
hreflang Sets the language of the linked document. <a href="https://www.ex­amples­ite.com" lang="en" hreflang="en">In­form­a­tion in English</a>
target De­term­ines where a link should be opened. <a href="https://www. ex­amples­ite.com" target="_blank">
rel Defines the re­la­tion­ship between the target and the linked documents. <a rel="nofollow" href="https://www. ex­amples­ite.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 auto­mat­ic­ally; 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 at­trib­utes since HTML5

There are several HTML at­trib­utes which have been added since HTML5 and HTML 5.1 were in­tro­duced. These include the following:

HTML at­trib­utes De­scrip­tion Example
con­ten­ted­it­able Defines whether the content of an element may be edited; the possible values are true and false. <p con­ten­ted­it­able="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 con­ten­ted­it­able="true" spellcheck="false">

Event at­trib­utes

There are many different HTML at­trib­utes which trigger an event in a browser. Therefore, the following HTML at­trib­utes are only a small selection of the different events which can be triggered with JavaS­cript in HTML.

HTML at­trib­utes De­scrip­tion Example
onclick Triggers an event in JavaS­cript with a mouse click. <button onclick="sample­func­tion ( )">click here</button>
onscroll Triggered when the element is scrolled. <div onscroll="ex­ample­func­tion ( )">
onkeydown Triggered when a button is pressed. <input type="text" onkeydown=example function ( ) ">
onsearch Triggers a JavaS­cript as soon as a search is entered in the search form. <input type="search" onsearch="ex­ample­func­tion ( )">
onerror Executes a JavaS­cript in the event of an error. <img src="https://www.ionos.co.uk/digitalguide/redcar.jpg" onerror="ex­ample­func­tion ( ) ">
oncopy Triggered when a text is copied. <input type="text" oncopy="ex­ample­func­tion ( ) " value="copy this text">
onselect Triggers a JavaS­cript as soon as you have selected a text in the input element. <input type="text onselect="ex­ample­func­tion ( ) " value="ex­ample­text">

Data at­trib­utes

In addition to the HTML at­trib­utes listed above, there are some at­trib­utes which can only be evaluated with a script or used with CSS. This allows in­form­a­tion to be included which is not presented visually. These HTML at­trib­utes always start with data-. You can set them with setAt­trib­ute and read them with get­At­trib­ute. Search engines also do not evaluate these HTML at­trib­utes. Only lowercase letters, numbers, hyphens, periods, and colons are allowed for the data at­trib­utes.

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

Con­clu­sion: HTML at­trib­utes are important for almost every website

If you decide to learn HTML, you’ll notice that HTML at­trib­utes are an important step­ping­stone to an optimal and fully func­tion­al website. The HTML at­trib­utes are the best and safest way to employ functions which deviate from everyday use. The stored in­form­a­tion will ensure that all aspects of your new website work in con­junc­tion with each other. It is es­pe­cially 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. Al­tern­at­ively, our experts can create your website according to your in­di­vidu­al wishes. Choose the right model for your re­quire­ments!

Go to Main Menu