HTML Attributes

<!DOCTYPE html>
<html>
<head>
	<title>Fruit</title>
</head>
<body>
	<h1>Favorite Fruit</h1>
	<p>In order of preference:</p>
	<ol start="10">
		<li>Bananas</li>
		<li>Oranges</li>
		<li>Lychees</li>
	</ol>
</body>
</html>

In the above example, the <ol> tag has had an attribute added to it. The attribute is called start and its value is 10. This attribute allows us to specify what number to start the list at. In this case, we've told it to start at the number 10.

How Attributes Work

Attributes are extra pieces of code that can be inserted inside an HTML tag. They allow you to define how an HTML element should be presented or how it should behave.

Attributes are inserted into the start tag, between the tag name and the closing greater than sign (>). Like this:


<tagname attributename="value">
	 ...
</tagname>

Attributes are usually written as name value pairs. So in the example start="10", start is the attribute name, and 10 is its value. By changing the value we can change how the element is displayed. For example, we could change it to start="5" and the output would be different (i.e. the list would start from 5 instead of 10).

Boolean Attributes

Some attributes can be written without a value. These are called boolean attributes. For example, you could add reversed to the above list without specifying a value.


<ol reversed>
	...
</ol>

Simply by adding the attribute name is enough to set its value to true (and it will perform its expected function—in this case, to reverse the order of the markers on the list). Therefore, there is no need to add a value—you either omit it or include its name.

Having said that, you can also use reversed="reversed" or even reversed="" as these are both equivalent to simply using reversed.

Required vs Optional

Most HTML attributes are optional—you can choose whether to include them or not. However, some HTML tags require that certain attributes are present. This is usually because the tag cannot function without the added parameter provided by one or more attributes. Embedded images work like this—you must use an attribute to provide the location of the image to display. We cover images later in this tutorial.

Not all attributes can be used on all HTML tags. Some attributes are only allowed on certain tags. But there are some attributes that can be used on all HTML elements.

Global Attributes

Global attributes are a set of attributes that can be used on any HTML tag. Other attributes can only be used on selected tags but global attributes are available to all tags.

If you're interested, here is a complete list of global attributes that are supported in HTML5.

Event Handler Content Attributes

Event handler content attributes are a special type of attribute that allows you to incorporate JavaScript code within your HTML document. JavaScript can provide a huge improvement in the functionality of a web page.

For example, the onclick attribute allows you to run JavaScript code whenever the user clicks the element. The JavaScript code could be a simple script or a complex program that could do all sorts of weird and wonderful things.

You write these just as you would any other attribute. For example, when someone clicks the following list, the onclick event handler content attribute will call a JavaScript function called doSomething():


<ol onclick="doSomething();">
	...
</ol>

Of course, you would then need to write a JavaScript function called doSomething() but that's another tutorial…

If you're interested, here is a complete list of event handler content attributes that are supported in HTML5.

But let's not get ahead of ourselves. All you need to know for now is that these types of attributes are available.