HTML Attributes

Attributes provide additional information to HTML elements. For example, you can use the ID and class attributes to provide a unique ID for an element or a class so you can customize it. There are many types of attributes available; some are global and can be used on all HTML elements, while some are for specific elements. In this tutorial we will focus on ID, style and class attributes.

ID

The ID attribute is used to provide an element with a unique ID. It can only be used once on that page.

Sponsored Links

Example – ID

<div id="maincontent"></div>

<style type="text/css">
#maincontent{
width:150px;
background-color:#000;
}
</style>

Output

Class

Unlike ID you can use classes several times on one page.

Example

<div class="maincontent"></div>

<style type="text/css">
.maincontent {
width:150px;
background-color:#333;

}
</style>

Output

Style Attribute

The style attribute allows you to style an element inline without an external style sheet. Strictly speaking, it is best to use style sheets instead of inline styles, but we will provide an example nonetheless.

<div style="border: 1px solid #000;padding: 10px;margin:10px">This is some styling to a div tag.</div>

Output

This is some styling to a div tag.

Global Attributes

Class, dir, ID, lang, style, title: These attributes can be used on the majority of elements, but not all. For a list see the 4.01 documentation.