<!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).
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
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 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
For example, the
You write these just as you would any other attribute. For example, when someone clicks the following list, the
<ol onclick="doSomething();"> ... </ol>
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.