The most common HTML attributes in an overview
IONOS editorial team6 mins
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>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.
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!
