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">

If you look at the alt-attribute (alt is an abbreviation of alternate text) there is several words. This is no problem when you are using quotation marks Ė the quotation marks indicate that everything in between is the value of the alt-attribute. But because space is a restricted character you cannot write it like this:

<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 so far:

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.