The Basics of HTML Attributes

Now that you're familiar with how to make a web page and the basic HTML structure of a web page using HTML elements, you will need to become familiar with another type of coded instruction that accompanies HTML elements known as attributes. To serve as an example we'll dive into some HTML font codes using —yep, you guessed it— the font element. This element can be used to set the text on your web page into different typefaces, sizes and colors.

First let's see the <font>...</font> tags in action:



To produce this effect, you place the text you wish to format as such in between the <font> start tag and the </font> end tag and then you add certain attributes to the <font> start tag. To illustrate, the source code that produces the green text in Example 1A goes like this:


In Example 1B, the parts of the code highlighted in red are the attributes and associated values applied to this particular <font> tag. Attributes are always placed within the start tag of an HTML element and normally use this syntax:

attribute="value"

In Example 1B then, face, size and color represent attributes while times new roman, 4 and green represent values. Your HTML element start tag compiled with its applicable attributes normally use this syntax:


Each instance of an HTML element start tag may contain one or more different attributes and the attributes can appear in any order. You can think of HTML elements as instructions telling a web browser what to display and the element's attributes as instructions telling a browser how to display it. Note that the element and the following attribute="value" pair is separated by a space and likewise all succeeding attribute="value" pairs are separated by a space.

Concerning attributes, the following standards are optional but highly recommended since future versions of HTML will make them mandatory and, moreover, it is simply 'good grammar':

1. Always place double quotation marks ("...") around the value.
2. Attribute names should be presented in lower-case.

Different HTML elements generally own different attributes but sometimes share the same attributes. In the case of shared attributes, how the attribute and its respective value applies depends on what element it is used in. HTML attributes, like elements, generally consist of keywords or abbreviations which tend to give a good indication as to what they are used for.

Most HTML elements used in the body of a web page may also contain the following core attributes:


Attributes are not always required to accompany HTML elements. Many times, the HTML element alone is enough to create a specific web page effect such as <p>...</p> (simple paragraph), <br> (forced line break) or <hr> (horizontal rule).


*   *   *

Now that you are familiar with HTML elements and attributes, let's move on to learn how to apply them to format text on your web page into various font colors, font sizes and font styles. You will also learn how to block text into paragraphs, create line breaks at will, align your text to the left or right and how to create hyperlinks...