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.

Contents

What are HTML attributes used for?
What HTML attributes are there?
Classic Universal Attributes
Specific HTML attributes
New attributes since HTML5
Event attributes
Data attributes
Conclusion: HTML attributes are important for almost every website

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 recognizable 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 color, 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.com/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.com/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.com/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.com/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!