HTML Attributes

HTML attributes can be added to HTML elements to provide further information about that element.

HTML tags can contain one or more attributes. Attributes are added to a tag to provide the browser with more information about how the tag should appear or behave. Attributes consist of a name and a value separated by an equals (=) sign.

Example

Consider this example:

OK, we've already seen the <p> tag in previous lessons, but this time we can see that something extra has been added to the tag - an attribute. This particular attribute statement, style="background-color:orange", tells the browser to style the <p> element with a background color of orange.

The browser knows to make the background color orange because we are using standard HTML tags and attributes (along with standard CSS code) for setting the color.

Another Example

Here's another example of adding an attribute to an HTML tag. In this example, we use the <a> tag to create a hyperlink to a web page at another website.

Many attributes are available to HTML elements, some are common across most tags, others can only be used on certain tags. Some of the more common attributes are:

AttributeDescriptionPossible Values
classUsed with Cascading Style Sheets (CSS)(the name of a predefined class)
styleUsed with Cascading Style Sheets (CSS)(You enter CSS code to specify how the way the HTML element is presented)
titleCan be used to display a "tooltip" for your elements.(You supply the text)

Some attributes can be used on every HTML element (full list here), some are available on many (but not all) elements, while other attributes are only available on one specific element.

There are a lot of attributes and you don't need to memorize them just yet. The good thing about attributes is that, in most cases, they are optional.

Many HTML elements assign a default value to its attributes — meaning that, if you don't include that attribute, a value will be assigned anyway. Having said that, some HTML tags do require an attribute (such as the hyperlink example above).

You will see more attributes throughout this tutorial.

Code Assist

Many HTML editors will provide a "code assist" feature, which presents all available attributes when you begin to enter an HTML tag. This can help tremendously, and saves you from having to memorize every single attribute available for every single element.

Screenshot of Brackets Code Assist