HTML at­trib­ut­es store ad­di­tion­al in­for­ma­tion in an HTML tag. They are simply added to the code. There are several other in­di­vid­ual at­trib­ut­es in addition to universal, event, and data at­trib­ut­es.

What are HTML at­trib­ut­es used for?

HTML at­trib­ut­es are used to store ad­di­tion­al in­for­ma­tion about elements in an HTML tag. They consist of a name and a value. The HTML at­trib­ut­es are located in the opening tag and are case insensitive. Although their values do not nec­es­sar­i­ly have to be written in inverted commas, this style is still rec­om­mend­ed to avoid errors. The examples below il­lus­trate how HTML at­trib­ut­es 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­ut­es.

What HTML at­trib­ut­es are there?

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

  • Classic universal at­trib­ut­es can be used in almost all elements and keep a constant role. However, they have no effect for some elements.
  • Specific at­trib­ut­es affect in­di­vid­ual elements and define their pa­ra­me­ters.
  • At­trib­ut­es that apply since the in­tro­duc­tion of HTML5 can partly create new options or replace older HTML at­trib­ut­es.
  • Event at­trib­ut­es trigger a defined event for an element when users perform a certain action.
  • Data at­trib­ut­es may contain in­for­ma­tion which is not rec­og­niz­able to users.

Classic Universal At­trib­ut­es

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

HTML at­trib­ut­es 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 color, font, font size, etc. style="color: blue; font-size: 2em"
title Contains ad­di­tion­al in­for­ma­tion about the content of an element; this is displayed in a separate window when the mouse hovers over the element. title="ex­am­ple­text"
lang De­ter­mines 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­ut­es

There are several specific HTML at­trib­ut­es for defining in­di­vid­ual elements. The examples below are the most common ones:

HTML at­trib­ut­es De­scrip­tion Example
old Displays an al­ter­na­tive text if an image cannot be loaded or displayed. <img src="https://www.ionos.ca/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­am­ple­site.com" title="Learn more">
hreflang Sets the language of the linked document. <a href="https://www.ex­am­ple­site.com" lang="en" hreflang="en">In­for­ma­tion in English</a>
target De­ter­mines where a link should be opened. <a href="https://www. ex­am­ple­site.com" target="_blank">
rel Defines the re­la­tion­ship between the target and the linked documents. <a rel="nofollow" href="https://www. ex­am­ple­site.com/">sample site</a>
src Defines the origin of an element. <img src="https://www.ionos.ca/digitalguide/redcar.jpg" alt="the red car>
autoplay Ensures that specific media content is played au­to­mat­i­cal­ly; 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­ut­es since HTML5

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

HTML at­trib­ut­es De­scrip­tion Example
con­tente­d­itable Defines whether the content of an element may be edited; the possible values are true and false. <p con­tente­d­itable="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.ca/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­tente­d­itable="true" spellcheck="false">

Event at­trib­ut­es

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

HTML at­trib­ut­es De­scrip­tion Example
onclick Triggers an event in JavaScript with a mouse click. <button onclick="sam­ple­func­tion ( )">click here</button>
onscroll Triggered when the element is scrolled. <div onscroll="ex­am­ple­func­tion ( )">
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="ex­am­ple­func­tion ( )">
onerror Executes a JavaScript in the event of an error. <img src="https://www.ionos.ca/digitalguide/redcar.jpg" onerror="ex­am­ple­func­tion ( ) ">
oncopy Triggered when a text is copied. <input type="text" oncopy="ex­am­ple­func­tion ( ) " value="copy this text">
onselect Triggers a JavaScript as soon as you have selected a text in the input element. <input type="text onselect="ex­am­ple­func­tion ( ) " value="ex­am­ple­text">

Data at­trib­ut­es

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

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

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

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

Go to Main Menu