If you want to include links on your website, you can use the HTML attribute target to specify where the link should open. In doing so, you decide whether users should stay on your online presence or be sent on to the next website. In our article, you will learn how to use _target and what you should keep in mind when doing so.How to define link targets with _target in HTML
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>
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:
Identifies a HTML element.
Assigns an element to one or more classes.
Defines the style of an HTML element and can determine the color, font, font size, etc.
style="color: blue; font-size: 2em"
Contains additional information about the content of an element; this is displayed in a separate window when the mouse hovers over the element.
Determines the language of a document.
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:
Displays an alternative text if an image cannot be loaded or displayed.
<img src="https://www.ionos.com/digitalguideredcar.jpg" alt="Red sports car at a traffic light.">
Sets the height of an element in px.
<img alt="the red car" height="220">
Sets the width of an element in px.
<img alt="the red car" width="220">
Defines the URL for a link.
<a href="https://www.examplesite.com" title="Learn more">
Sets the language of the linked document.
<a href="https://www.examplesite.com" lang="en" hreflang="en">Information in English</a>
Determines where a link should be opened.
<a href="https://www. examplesite.com" target="_blank">
Defines the relationship between the target and the linked documents.
<a rel="nofollow" href="https://www. examplesite.com/">sample site</a>
Defines the origin of an element.
<img src="https://www.ionos.com/digitalguideredcar.jpg" alt="the red car>
Ensures that specific media content is played automatically; however most browsers can override this setting.
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:
Defines whether the content of an element may be edited; the possible values are true and false.
Universal attribute which can hide an element.
This text is hidden
Defines whether an element is copied, linked or moved during drag and drop.
Universal attribute which defines whether the content of an element can be dragged and dropped.
Specifies how external media is loaded; the allowed values are auto, eager, and lazy.
<img src="https://www.ionos.com/digitalguideredcar.jpg" alt="the red car" loading="lazy"
Specifies whether spell checking can be enabled; allowed values are true and false.
<p contenteditable="true" spellcheck="false">
<button onclick="samplefunction ( )">click here</button>
Triggered when the element is scrolled.
<div onscroll="examplefunction ( )">
Triggered when a button is pressed.
<input type="text" onkeydown=example function ( ) ">
<input type="search" onsearch="examplefunction ( )">
<img src="https://www.ionos.com/digitalguideredcar.jpg" onerror="examplefunction ( ) ">
Triggered when a text is copied.
<input type="text" oncopy="examplefunction ( ) " value="copy this text">
<input type="text onselect="examplefunction ( ) " value="exampletext">
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!