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
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
tags in action:
To produce this effect, you place the text you wish to format as such in between the
start tag and the
end tag and then you add certain attributes
start tag. To illustrate, the source code that produces the green text in Example 1A goes like this:
face="times new roman" size="4" color="green">
This text is using the 'times new roman' font face. It's relative size is '4' and the color is 'green'.
In Example 1B, the parts of the code highlighted in red are the attributes
and associated values
applied to this particular
tag. Attributes are always placed within the start tag of an HTML element and normally use this syntax:
In Example 1B
times new roman
. 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
and the following
pair is separated by a space and likewise all succeeding
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':
- Always place double quotation marks ("...") around the value.
- 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
|Used as a unique identifier for CSS|
|Used to associate content with a specific CSS class|
|Used to create an inline CSS style|
|Used to create a tool-tip (especially useful for hyperlinks)|
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)
<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...