Attributes

A lot of the HTML5 elements can have attributes. The attribute provides additional information about the specific element, and they are always specified in the opening tag. Here’s an example – let’s say you want to create a link. The link element is specified by the <a> tag and the destination-address is specified in the href-attribute.

<a href="http://www.myurl.com">This is a link</a>

As you can see, the link-element consists of the opening tag <a> and the closing tag </a>. The content of the link-element is "This is a link". But inside the opening tag is an attribute, href. The href-attribute always has a value, in this case http://www.myurl.com. Every time you have an element with an attribute, the pattern for writing attributes are attribute="value".

Here you have to note, that the attribute name is followed by a = and the value of the attribute is always surrounded by "". In HTML5 you can actually omit the quotation marks as long as the value doesn’t include a restricted character (such as >, =, or a space), but this increases the risk of errors – let’s look at the image-element to exemplify this.

<img src="my-puppy.jpg" alt="This is a picture of my puppy, Bob">

Wanneer je naar het alt-attribuut kijkt (alt is een afkorting van alternatieve tekst) dan zie je meerdere woorden. Dit is geen probleem als je 'double quotes' gebruikt - de waarde van het attribuut is alles tussen de 'double quotes'. Maar omdat een spatie een speciaal karakter is kun je dat niet zo schrijven:

<img src="my-puppy.jpg" alt=This is a picture of my puppy, Bob>

If you did, the browsers would presume the value of the alt-attribute to be just "this" and the rest of your intended alt-text ("a picture of my puppy, Bob") could break the rest of your page.

What you have learned

• Some HTML elements can have attributes
• The pattern for an attributes is attribute="value"
• Attributes provide additional information about an element
• Attributes are always specified in the start tag
• You don’t have to use the quotation marks, but it is a really good idea

Hopefully you understand the basics of HTML by now, and therefore we are ready more forward to your first real webpage, which we will look at in the next chapter.