HTML Attributes

An HTML attribute provides additional information about an HTML element and further instructs the browser.

Attributes are only placed within the opening tag directly following the element. They are separated by a space and followed by an equal (=) sign. An attribute must also include a value. The value follows the equal sign and is enclosed in quotes.

HTML Elements and Attributes

When including an attribute with an element, you must also include a value, as if you don’t, the attribute will be useless. For example, if you would like to align your paragraph, you must specify how the paragraph should be aligned – left, center, or right.

Here is how your HTML element, attribute and value might look:

There are also many HTML tags that have default attributes. For example, unless you specify how a paragraph should be aligned, as in the example above, the paragraph will automatically be aligned left.

When using the HEADING tags, you will also find that you will need to include the align attribute to specify the alignment. Otherwise, the HEADING text will automatically be aligned left.

HTML Attributes – Standard

Just as there are many HTML elements, there are many HTML attributes. And, although there are many attributes that may only be used with specific elements, there are some attributes that may be used with all elements.

HTML Attributes – Class and ID

The class and ID attributes are very similar. They aren’t used to format your element directly; however, they are used indirectly to format your content using Cascading Style Sheets, also referred to as CSS.

The class and ID attributes are used to specify or classify a certain element, such as a table element, should be formatted in a certain way via CSS. This will enable you to format two of the same elements in different ways. You will learn more about the class and ID attributes within the CSS tutorial.

This may be confusing, but once you complete the HTML tutorial and move on to the CSS tutorial, everything should fall into place.

HTML Attributes – Style

The style attribute is used to specify the style information, such as fonts, etc., for a specific element. For example, if you would like to specify how a specific paragraph should be formatted, you can do so like this:

HTML Code

HTML code viewed within an HTML document:

<p style="font-face: arial; font-size: 10pt; color: #FF0000"> Example paragraph that can be formatted using the ‘Style’ attribute.</p>

Browser View

HTML Coding viewed through a web browser:

Example paragraph that can be formatted using the ‘Style’ attribute.

If you would like to specify the style for more than one element within your webpage, you may want to use the style element, which would be placed within the HEAD section of your webpage. Or, better yet, use an external style sheet.

You can learn all about using style attributes and sheets within the CSS tutorial.

HTML Attributes – Title

The TITLE attribute is used to display little tool tips or pop up text that only displays when you place your mouse pointer over the element. When you remove your pointer, the pop up disappears.

You can use the TITLE attribute with elements, such as paragraphs, links, headings, etc.

HTML Code

HTML code viewed within an HTML document:

<p title="This is a paragraph title">This is a paragraph.</p>

Browser View

HTML Coding viewed through a web browser:

This is a paragraph.

Place your mouse pointer over the text within the ‘Browser View’ to view the title text.

HTML Code

HTML code viewed within an HTML document:

<a href="http://www.web-source.net" title="This is a link to Web-Source.net">Web-Source.net</a>

Browser View

HTML Coding viewed through a web browser:

Web-Source.net

Place your mouse pointer over the link within the ‘Browser View’ to view the title text.

We will go over the attributes used for each element throughout the rest of this tutorial.

This concludes the HTML attributes tutorial. In the next section, we will be focusing on formatting.