HTML tags and attributes

Attributes

Attributes are the way authors have to define properties for an element. These properties usually change the way a browser interpret the element, by changing its meaning or presentation. For example, the a element inserts a link in the document, but the rel attribute states the relationship between the current document (the one containing the link) and the destination resource (the one the link is pointing to).

Many of the attributes in HTML5, the ones known as global attributes, are available for all elements in the standard. But most elements have also a set of specific attributes that are only available or specifically adapted for them.

As we already saw in previous examples, attributes are declared by stating their name, followed by an equal sign ("=") and the assigned value enclosed by quotes. But some attributes, which can only take boolean values (true or false), apply their value just with their presence. In these cases, attributes can be declared just by stating their name.

In the following example, the button element has three attributes present: id and acceskey, which are global attributes, and disabled (boolean), which isn't global but is shared by a particular group of elements.

<button id="button-ok-1" acceskey="O" disabled>Ok</a>

Events

Events are a mechanism provided by the HTML standard, designed to allow authors to execute scripts in their web pages in response to user or system interaction. The purpose of an event is to associate an action, performed by the user or by the system (like, for example, when the user clicks an element or the document has finished loading), with a function or script, written in a client-side language.

The syntax used to declare an event is very similar to the attributes' syntax and consists of: the name of the event followed by an equal sign ("=") and the function or script enclosed by quotes.

In the following example, we'll insert a run of text with emphasis (em element) with a couple of events: onmouseover, which calls its function when the mouse pointer gets over the element, and onmouseout, that calls its function when the mouse moves out of the area occupied by the element. The functions declared in the events will change the color of the element's background so you can better appreciate the functionality.

The functions provided in this example are outside the scope of this website and won't be explained in this document.

<em onmouseover="changeColor(this.parentNode)" onmouseout="changeColor(this.parentNode)">HTML tags and attributes</em>

In HTML5 there's just one set of events, known as global events. Each event in this group can be used with any element in the standard, regardless if the element can trigger the event or not. In other words, there are some events, like oncanplay or onautocomplete, that, despite being global, are specifically designed for a particular group of elements and won't be triggered by elements outside that group.

In the reference about global events you'll find a list with all events available in HTML5, with descriptions and information about the elements that are capable of triggering them.

Examples

In this section we're going to see some examples, so you can better understand the structure of elements. First, let's start by inserting a paragraph (p element) where the first few words are higlighted to attract the user's attention. We do this by enclosing those words with the b element.

<p><b>To continue with the process</b>, don't forget to renew you license!</p>

Now let's try something more complex, by adding a link. Links aren't links (this is, they don't point to another resource) if they don't have the href attribute declared. So this time we're inserting a link, using the a element, with a URI in the href attribute (these concepts will be treated subsequently).

<p>You can also access the <a href="../../tutorials.html">HTML tutorials</a> for free.</p>

Lastly, we're adding an image with the img element. This element requires the src attribute to be present in order to display an image. Additionally, we're declaring the alt attribute as a textual alternative of the image purpose.

<p>Nationaly: <img src="/assets/images/canada-flag-icon.gif" alt="Canada"></p>

As you may have noted, img is an empty element, reason why there's no closing tag for it in the previous example.