The form Element

A form is a section of a document that contains blank areas that can be filled by a user and submitted to be processed. In (X)HTML the form element is used to create a form. It contains various form controls. It is a block element and can have only block elements and the script element as children. form elements cannot be nested within each other.

These are the allowed child elements of form:

• p
• h1 to h6
• ul and ol
• pre
• dl
• div
• noscript
• blockquote
• hr
• table
• fieldset
• address
• script

Attributes

Core Attributes

The core attributes can be applied to this element.

accept

The value of this attribute is a comma-separated list of MIME types which the server can process. Browsers should not allow a user to upload files of a type that is not listed. However, none of the major browsers support this feature.

Example: <form action="" accept="image/gif, image/jpeg">

accept-charset

This attribute specifies the character encodings of the user input that the form processing server must accept in order to process the form. The value of this attribute is a comma-separated or space-separated list of IS0 character set names. The default value is unknown, which the browser will interpret as the same character encoding that the page that contains the form is in. Based on this attribute, a browser may restrict the characters that are entered by the user in the form. However, none of the major browsers impose this restriction. The character encoding of the user input can be any one of those that are listed in the accept-charset attribute.

Here is a list of character encodings http://www.w3schools.com/TAGS/ref_charactersets.asp

Example: <form action="" accept-charset="ISO-8859-1,ISO-8859-2">

action

This is a required attribute. Its value is the URL of the web page or application that will process the form. If the value is left blank, then the browser submits the form to the current page.

Example: <form action="contact.php">…</form>

enctype

This attribute specifies the content type used to submit the form to the server when the form uses post to submit the form to the server (method=post). There are three possible values for the enctype attribute:

application/x-www-form-urlencoded

This is the default content type for post and the only encoding of get. With URL encoding, and the get method, the following ASCII characters get encoded as shown in the table:

Symbol	URL-Encoded
space	+
@	%40
#	%23
$	%24
%	%25
&	%26
-	%2B
+	%3D
:	%3A
;	%3B
,	%2C
?	%3F
/	%2F

If the method is post, in addition to the above mentioned characters, the following characters are encoded:

Symbol	URL-Encoded
~	%7E
`	%60
!	%21
^	%5E
(	%28
)	%29
|	%7C
\	%5C
{	%7B
[	%5B
}	%7D
]	%5D
"	%22
<	%3C
,	%2C
>	%3E

text/plain

This encoding only converts spaces to "+" characters. This value has an effect only for post requests. get requests are URL-encoded regardless of the enctype value.

multipart/form-data

This Content Type is required when the form has a file upload form control. With this value, the form data is not encoded at all.

method

This attribute specifies the method that will be used to submit the form data. It can take the following values:

get

This is the default when there is no method attribute or when it is blank. With get, a question mark (?) is appended to the end of the URL of the form application and then the form data is appended. The form data consists of the value of the name attribute followed by an equals sign and the data of the form control. Subsequent name-value pairs are separated by ampersands (&). The value of the form controls are URL-encoded.

post

With this method the form data is sent as an HTTP post request. When the enctype is application/x-www-form-urlencoded, the form data is encoded as described earlier. When the enctype is text/plain the data is not encoded except for the space character which is encoded as the plus (+) character. When the enctype is multipart/form-data, the form data is not encoded at all.

target

Transitional DTDs allow the form tag to have the target attribute. With this attribute, you can specify the name of the window in which the form result should open.

The target attribute is also useful in frame documents. Using this attribute, a form in one frame can show its results in another.

Special Targets

There are four special target values:

_blank

This target causes the form results to always open in a new window. The new window will not have an internal name.

_self

This target causes the form results to always load in the same window or frame as the form. This is the default behavior of forms.

_parent

This causes the form results to open in the parent of the document that contains the link. This is useful when using iframes.

_top

This causes the form results to open in the topmost frame in the hierarchy.

The font Element

This is a deprecated element that was formerly used to specify the font-family, font size, and the color of the text within it. The CSS properties font, font-family, font-size, and color should be used instead of the font element.

Attributes

Core Attributes

The core attributes can be applied to this element.

color

The color of the text can be specified in hexadecimal notation or by color name.

face

The typeface (font-family) can be specified as a list of comma separated names.

size

A number between 1 and 7.

The fieldset and legend Elements

The fieldset element is used to group related form elements together. It is a block element. Therefore its parent elements can be div, form etc. It can contain both block and inline elements as child elements. fieldset elements can be nested within each other.

The legend element is a required child element of fieldset. It is an inline element that contains a name for the group of elements contained by fieldset. A fieldset element can contain only one legend element.

Example: <form action=""> <p>One form Element: <input type="text" id="test1"></p> <p>Two form element: <input type="text" id="test2"></p> <p>Three form element: <input type="text" id="test3"></p> <fieldset> <legend>test 2</legend> <p>Oneone form element: <input type="text" id="test21"></p> <p>Onetwo form element: <input type="text" id="test22"></p> <p>Onethree form element: <input type="text" id="test23"></p> </fieldset> <p><input type="submit" id="submit1"></p> </form>

The above image shows how the code is rendered in Firefox. Note how the text of the legend element appears at the top left side of the grouped form elements.

Internet Explorer Conditional Comments

With Internet Explorer Conditional Comments, one can hide HTML code from Internet Explorer, or reveal code only to Internet Explorer. The conditional comment code consists of Internet Explorer's proprietary code within HTML comments. Since the proprietary code is within conditional comments, it is hidden from all other browsers. IE Conditional Comments does not cause a page to become invalid.

Example 1:
<!--[if IE]>
<p>You are an Internet Explorer user.</p>
<![endif]-->

In the above example, the p element only appears in Internet Explorer. All other browsers treat the entire piece of code as an HTML comment.

Specific versions of Internet Explorer or all versions above or below a particular version can be targeted using operators

Example 2:
<!--[if lte IE 7]>
<p>You are using an outdated version of Internet Explorer.</p>
<![endif]-->

In the above example, lte is the operator. It stands for "less than or equal to".

Here is a list of Operators and their meanings

Operator	Meaning	Example
!	The NOT operator	<!--[if !(IE 9)]>
lt	The less-than operator	<!--[if lt IE 9]>
lte	The less-than-or equal to operator	<!--[if lte IE 8]>
gt	The greater-than operator	<!--[if gt IE 8]>
gte	The greater-than-or equal to operator	<!--[if gte IE 8]>
&	The AND operator	<!--[if (lte IE 8)&(gte IE 6)]>
|	The OR operator	<!--[if (IE 8)|(IE 6)]>

To hide HTML code from Internet Explorer, use the format shown below:

Example 3:
<!--[if !IE]><!-->
<p>You are not using Internet Explorer.</p>
<!--><![endif]-->

To hide HTML code from only certain versions of Internet Explorer, use the format shown below:

Example 4:
<!--[if IE 9]><!-->
<p>You are using a modern browser.</p>
<!--><![endif]-->

More information can be found at MSDN.

The <embed> and <noembed> Elements

The embed element is a non-standard element that is used to embed multimedia content into a webpage. Often, the multimedia content will require browser plugins like Flash Player, QuickTime Player etc.

The embed element is not part of any current (X)HTML standard except the unfinalized HTML 5. The recommended element for embedding media objects is the object element, which is part of the HTML 4.01 and XHTML 1.0 Standard.

The embed element can have a block or inline parent element.

Attributes

align

This attribute can take the values left, right, top and bottom. However, it is perferable to use CSS instead of this attribute.

height and width

Specifies the height and width of the element. It is perferable to use CSS instead of these attributes.

name and id

These attributes specify a name for the embedded object. However, it is better to use only the id attribute because name is deprecated in XHTML.

hidden

This attribute can take the values yes or no. A value of yes hides the object. This is not a well supported attribute and must therefore be avoided.

pluginspage

The value of this attribute is a URL of a page that contains instructions on how to download and install the plugin required to render the embedded content. This attribute is obsolete.

hspace and vspace

These attributes were used to specify the amount of horizontal and vertical space that should be left clear of the embedded object. It is preferable to use CSS instead of these attributes.

src

The value of this attribute is the URL of the file or object to be embedded.

type

The value of this attribute is the MIME type of the embedded object. However, the browser can also determine the type of object by the file extension of the file specified by src or by the header sent by the server when the object is accessed.

HTML 5 allows any other attributes that are specific to the kind of object embedded.

The noembed Element

This is a nonstandard child element of the embed element. It contains text, images or objects that are displayed when the embedded object cannot be displayed.

The <em> and <strong> Elements

The em element is used to indicate text that is emphasized. All major browsers render emphasized text in italics.

Example 1:
<p>This is <em>the</em> website for web design information.</p>

The strong element is used to strongly emphasize the enclosed text. All major browsers render the text within this element with a boldface font.

Example 2:
<p>This product has a <strong>lifetime</strong> warranty.</p>

Attributes

Core Attributes

The core attributes can be applied to this element.

The <div> Element

The div element is used to structurally divide a document into sections. A div contains elements that are semantically related. A div can contain any element that is normally found in the body element.

A div is a block-level element. However, it can also contain text and inline child elements.

A beneficial side effect of grouping semantically related elements is they can be styled as one unit using CSS. The best way of doing this is by using a div with an id or classattribute. These attributes are used to identify the div when applying CSS.

Example:
<div class="body_content">
<p> ... </p>
...
</div>

Attributes

Core Attributes

The core attributes can be applied to this element.

align

This attribute can take the values center, left, and right. However, this attribute is deprecated in favor of the CSS text-align property.

The <dir> Element

The dir element was originally intended for multi-column lists. However, this element has now been deprecated. The ul and the ol elements can be used instead.

The <dfn> tag

The dfn element is used to indicate the defining instance of the special term or phrase. A defining instance is the first occurrence of a term or phrase.

It is an inline element.

Most browsers render the enclosed text in italics. However, Chrome and Safari render the text normally.

Example:
<p>The <dfn>386</dfn> was Intel's first 32-bit processor.</p>

Attributes

Core Attributes

The core attributes can be applied to this element.

The <ins> and <del> Elements

These two elements are useful when editing HTML documents.

The ins Element

This element is used to contain inline or block-level content that have been added to a pre-existing document. It indicates that the content was added sometime after the creation of the original document. When used with inline text or inline child elements, browsers underline the inserted text. With block-level elements, Firefox renders them as usual whereas IE7, Safari and Opera underline them.

The del Element

This element is used to contain inline or block-level content that should be deleted or content that should be considered deleted. When used with inline elements, all major browsers render the enclosed text with a line through. When used with child block elements, Firefox renders the text as usual whereas IE7, Safari and Opera render it with a line through.

Attributes

Core Attributes

The core attributes can be applied to these elements.

cite

This attribute's value is a URL of a document that explains the reason for insertion or deletion.

datetime

This attribute's value contains the date, time and timezone of the insertion or deletion. The format of the value is YYYY-MM-DDThh:mm:ssTZD

Example: <del datetime="2008-08-06T16:32+5:30">

The format for the date is YYYY-MM-DD. This is followed by the capital letter "T". After this is the time in 24-hour format - hh:mm:ss. This is followed by the time zone. If the time zone is GMT then the code is "Z". Example: "2008-08-06T16:32Z". For all other time zones, there is a positive or negative time in the format hh:mm to indicate how many hours and minutes it is ahead or behind GMT. Example: "2008-08-06T16:32+5:30"

Definition Lists: the <dl>, <dt>, and <dd> Elements

A Definition List contains one or more terms and their definitions. However, they can be used for any data that consists of a word or phrase and a longer description of it. For example, the names of people in a conversation can be the definition term and the words they speak can be the description. Or the ingredients of a recipe can be the terms and the details of preparation the descriptions.

http://www.w3.org/TR/html401/struct/lists.html has a good description of Definition Lists

General Form of a Definition List

<dl>
<dt>Definition Term</dt>
<dd>Definition Description</dd>

...

</dl>

A definition list consists of the following elements:

The dl Element

This is the parent element of the definition term and definition description elements. Therefore this element can only contain dt and dd elements.

The dt Element

This element contains the term of the definition. It can only contain inline elements

The dd Element

This element contains the definition description. It can have block or inline child elements.

Attributes

Core Attributes

The core attributes can be applied to the dl, dt, and dd elements.

Most web browsers render the definition description indented from the left margin (when the language is English).

There can be more than one dt element (more than one term) with one dd element and vice versa.

Example:
<dl>
<dt>HTML</dt>
<dt>XHTML</dt>
<dd><p>A language that provides a semantic description (meaning) for the content of a document.</p></dd>
</dl>

The <col> and <colgroup> Elements

The col element is used to define columns in a table. It is an empty element and can only be used within the table element where is should appear before any tr elements. In (X)HTML, tables are constructed with rows, therefore the col element is useful because it allows one to define and then style columns instead of rows or individual cells.

According to the w3.org specification, the col element does not group columns structurally (semantically). Structural grouping is specified by the colgroup element. A table can have more than one colgroup elements.

The colgroup element specifies structural (semantic) columns in a table. This element may contain col child elements. The colgroup element is always found in the table element, and should appear before any tr elements.

Using this element, it is possible to apply attributes and styles to groups of columns.

Attributes

Both col and colgroup elements can have the following attributes.

Core Attributes

The core attributes can be applied to this element.

align

This attribute specifies the horizontal text alignment in the column. It can take the values left, right, center, justify, or char. When align="char", the text is, by default, aligned around the decimal point character for the current language, or the character specified in the "char" attribute.

Note: Though this attribute is not deprecated, to set text alignment, the CSS property text-align is preferred.

char

The value of this attribute is a single character around which the text is aligned when align="char".

charoff

When present, this attribute specifies the offset to the first occurrence of the alignment character on each line. Source: w3.org

span

The value of this attribute is a number. This specifies how many columns are spanned by the current col element.

valign

Specifies the vertical alignment of the text in the cells of the column. It can take the values of top, middle, bottom, and baseline.

Though this attribute has not been deprecated, the CSS property vertical-align is preferred.

width

This attribute can take pixel values, percentage values, or values in the form n*, where n is a number. This attribute specifies the width of the column. When the value is in the form of n*, for example 3*, the current column is n-times wider than the other columns. 0* sets the column width to the minimum necessary to accommodate the contents.

Though this attribute has not been deprecated, using the CSS width property.

Example 1:
<table>
<caption>the table caption</caption>
<col style="background-color:red" />
<col />
<col style="background-color:navajowhite" />
<col span="2" style="background-color:darkslategray" />
<tr><th>heading</th> <th>heading2</th> <th>heading3</th></tr>
<tr><td>col1</td><td>col2</td><td>col3</td><td>col4</td><td>col5</td></tr>
<tr><td>col1</td><td>col2</td><td>col3</td><td>col4</td><td>col5</td></tr>
<tr><td>col1</td><td>col2</td><td>col3</td><td>col4</td><td>col5</td></tr>
<tr><td>col1</td><td>col2</td><td>col3</td><td>col4</td><td>col5</td></tr>
<tr><td>col1</td><td>col2</td><td>col3</td><td>col4</td><td>col5</td></tr>
<tr><td>col1</td><td>col2</td><td>col3</td><td>col4</td><td>col5</td></tr>
</table>

Example 2:
<table>
<caption>the table caption 2</caption>
<colgroup>
<col span="2" style="background-color:red" />
</colgroup>
<colgroup span="3" style="background-color:cornsilk"></colgroup>
<tr><th>heading</th> <th>heading2</th> <th>heading3</th></tr>
<tr><td>col1</td><td>col2</td><td>col3</td><td>col4</td><td>col5</td></tr>
<tr><td>col1</td><td>col2</td><td>col3</td><td>col4</td><td>col5</td></tr>
<tr><td>col</td><td>col2</td><td>col3</td><td>col4</td><td>col5</td></tr>
<tr><td>col1</td><td>col2</td><td>col3</td><td>col4</td><td>col5</td></tr>
<tr><td>col1</td><td>col2</td><td>col3</td><td>col4</td><td>col5</td></tr>
<tr><td>col1</td><td>col2</td><td>col3</td><td>col4</td><td>col5</td></tr>
</table>

The <code> Element

The code element is meant to contain text that represents computer code such as programming code or html code. It is an inline element. Browsers render this element in a monospace font such as Courier.

Attributes

Core Attributes

The core attributes can be applied to this element.

The <cite> Element

The cite element is used to indicate citations. It is an inline element. Citations can be from websites, magazines, books etc. The citation text is rendered in italics in most browsers.

When citing a web page, you can nest the cite element in an a element.

Example: <p>The best beginner's book on HTML and CSS that I have read is <cite>Head First HTML</cite></p>

Attributes

Core Attributes

The core attributes can be applied to this element.

The <center> Element

The center element horizontally centers its contents. It is a block element. This element is deprecated. Use CSS instead.

The <caption> Element

The caption element is used to caption tables. A caption is a short description of the contents of the table. The caption element must appear immediately after the <table> tag, there should be no other elements or text in between.

Example: <table><caption>the table caption</caption><tr><th>heading</th></tr><tr><td>row 1</td></tr></table>

Attributes

Core Attributes

The core attributes can be applied to this element.

align

This deprecated attribute specifies the position of the caption. Takes the values top,bottom,left,and right. The CSS property caption-side is preferred instead of this attribute.

The <button> Element

The button element is used to submit or clear forms, or to perform an action using Javascript. Unlike input element, which is also used to create buttons, button is not an empty element and therefore all its content serves as the button. The button element can contain almost any element, inline or block. The exceptions are the a, form, fieldset, input, select, textarea, label and button.

The button element, like inline elements, needs to have a block parent element such as p or div. Unlike inline elements, however, it can contain child block elements.

Example: <form action="form.php"><div><button><p>the quick brown</p></button></div></form>

Attributes

disabled="disabled"

With this attribute, the button is disabled (grayed-out).

type

The value of this attribute can be submit, which submits the form that the button is contained in, reset, which clears all the form's entries, or button which is used when the action is defined by Javascript. Without the type attribute, button functions like a submit button.

name

This specifies the control name of the button.

value

The value of this attribute is sent together with the control name of the button.

Example: <form action="test.php"><p><button name="somename" value="somevalue">the quick brown</button></p></form>

When the button is clicked it will send test.php?somename=somevalue

The <br> Element

The br tag is used to indicate a semantic break in a paragraph. The browser inserts a line break when it encounters this element. Therefore, it continues rendering the content on the next line. This is an empty tag. This element can appear in any element that can contain text.

A paragraph is used to introduce a new idea in a text. The br element can be used when a new idea needs to be introduced, but a new paragraph is not warranted.

Attributes

Apart from the Core Attributes, there is only the clear attribute, which is deprecated in favor of CSS.

clear

This attribute can take the values none, left, right and all. This specifies if the content after the br tag should be rendered in a new line that starts vertically below any floated elements.

The <body> Element

The body element contains all the displayed content of the document. Its parent element is html and it appears after the head element. It can contains block-level elements and the script element.

Attributes

Apart from the Core Attributes, there are a number of presentational attributes the body can have. However, all the presentational attributes are deprecated in favor of CSS. These deprecated attributes are:

background

The value of this is a URL of an image which will be used as a tiled background to the entire page

bgcolor

The value of this is a color name or a color specified in hexadecimal notation. This sets the background color of the page.

text

The value of this is a color name or a color specified in hexadecimal notation. This sets the color of the text in the page.

link

The value of this is a color name or a color specified in hexadecimal notation. This sets the color of links in the document.

alink

Sets the color of links when they are in the active state.

vlink

Sets the color of visited links.

The <blockquote> Element

The blockquote tag is used to indicate a quotation that is lengthy or that consists of one or more paragraphs. It can only contain block-elements (and the script element) as child elements. It cannot contain text directly.

Example: <blockquote cite="The Michigan School Moderator"><p>The quick brown fox jumps over the lazy dog</p></blockquote>

Attributes

cite

Indicates the source of the quotation

The <big> Element

The big element makes its text content's font size larger than the inherited font size. However, this a presentational element and even though it hasn't been deprecated, shouldn't be used. CSS should be used instead.

The <bdo> Element

The bdo element is used to change the direction of rendering of characters of text. That is, characters that would be rendered one after another from left to right would instead be rendered from right to left and vice versa. It is an inline element.

Attributes

dir

This is a required attribute. It can take the values ltr or rtl which stand for left-to-right and right-to-left

Example: <p>The quick <bdo dir="rtl">brown</bdo> fox</p>

lang and xml:lang

This specifies the language of the text content of the bdo tag. See Core Attributes

The <basefont> Element

This element is used to specify certain font attributes such as color, size etc. However, this element is deprecated. Use CSS to style text instead.

The <base> element

base is an empty element, which means that it does not have any content. However it does have attributes. It is only found in the head element. This element must appear before any element that contains URLs.

Attributes

href

This is a required attribute whose value is a URL which is added on to all relative URLs in the document. The url specified must end with a forward slash. Note that the base url specified affects all relative URLs - those contained in <link>, <form>, <a>, <img>, <iframe>, etc.

Example 1: <base href="http://destination-code.blogspot.com/" />

Example: 2 <base href="/pages/" />

target

All links in the page (<a> elements) load in a new window with the internal name specified in target.

Example: <base href= "/images/" target="_blank" />

Note that the default target can be overridden by the target attribute in an a tag.

The <b> Element

This text content of the b element is rendered in boldface. It is an inline element. Though this element's purpose is purely presentational, it hasn't been deprecated, probably because of its earlier widespread use. It is preferable to use the strong element instead of b

Example: It is better <b>not</b> to use the b element.

The <area> element

The area element is always a child element of the map element. It is an empty element. Its function is similar to a element in that it is used to create hyperlinks. However, area defines hyperlinks in imagemaps only. It does so by means of the href, coords and shape attributes.

Attributes of <area>

alt

This is a required attribute. Its function here is similar as in the img element. Here it provides a short description of the defined area.

coords

This attribute specifies a series of comma separated values whose meaning depends on the value of the shape attribute. All coordinates are with respect to the top left corner of the image box.

shape="rect"

This indicates that the defined area is a rectangle. In this case, the coords attribute will have four values. The first two values are the x and y coordinates, in pixels, of the top left corner of the rectangle, and the following two values are the coordinates of the bottom right corner.

Example: <area alt="garden" shape="rect" coords="10,50,80,20">

shape="circle"

This indicates that the defined area is a circle. In this case, the coords attribute will have three values. The first two values are the x and y coordinates, in pixels, of the center of the circle. The next value is the radius, also in pixels.

Example: <area alt="pool" shape="circle" coords="20,40,10">

shape="poly"

This indicates that the defined area is a polygon. Triangles, rectangles, pentagons, etc. are polygons. In this case, there is no limit on the number of values. Each pair of values is the coordinate of one of the vertices of the polygon. The last pair of values should be the same as the first.

Example: <area alt="house" shape="poly" coords="35,75,42,82,73,93,20,30">

href

Specifies the URL or the file that is linked to the clickable area

nohref="nohref"

This attribute is used to indicate that the area is not hyperlinked.

target

Specifies the name of the window or frame that the linked document should open in.

The <applet> element

The applet element is used to place a Java applet in a web page. This element is deprecated and has been replaced by the object element.

(X)HTML Core Attributes - dir, class, id, lang, xml:lang, style and title

There are a few attributes that are considered "core attributes" because they can be applied to nearly every element. They are:

dir

It can take the values rtl or ltr which stand for right-to-left and left-to-right. This attribute specifies base direction of directionally neutral text (i.e., text that doesn't have inherent directionality as defined in Unicode). It also specifies the directionality of tables. Source: W3C.

Example: <p dir="rtl">The quick brown fox</p> In this example, the text is aligned to the right in the same way that text-align:right would. This attribute is inherited by child elements.

This attribute can be applied to all elements except applet, base, basefont, bdo, br, frame, frameset, iframe, param, script.

class

A class is a name under which multiple (X)HTML elements can be grouped for the purpose of styling using CSS or scripting using Javascript. A single element can be associated with multiple classes, each class name being separated by spaces.

Example: <p class="products floated">the quick brown fox jumps</p>

In the above example, the p belongs to two classes: products and floated.

The class attribute can be applied to all elements except base, basefont, head, html, meta, param, script, style, title.

id

An id is a name assigned to a single element in an (X)HTML document for the purpose of styling using CSS and scripting using Javascript and it is also used for creating fragments. An element can have only one id. No two elements should have the same id value.

Example: <p id="tagline">the quick brown fox</p>

The id attribute can be applied to all elements except base, head, html, meta, script, style, title.

lang

The lang attribute identifies the language (human languages, not computer languages) of the text content and attribute values of an element. The language is specified using a two-letter code specified in ISO 639-1. The lang attribute helps screen readers to pronounce words correctly, helps browsers to choose the correct fonts and the punctuation such as correct quotation marks, and helps search engines to identify the language of a web page.

Example: <p>The French word for apple is <span lang="fr">pomme</span>.</p>

This attribute can be applied to any element except applet, base, basefont, br, frame, frameset, iframe, param, script.

This attribute is inherited by child elements. The lang attribute is often applied to the html element to specify the language of the document.

xml:lang

This attribute is similar to the lang attribute, but is used only in XHTML documents.

Example: <p xml:lang="fr">Bonjour! Comment allez-vous?</p>

style

The style attribute is used to apply CSS a rule to an element. The value of the style attribute is one or more CSS declarations separated by semicolons and, optionally, spaces. Curly brace limiters ({ and }) are not allowed. It cannot contain CSS selectors.

The CSS declarations in the style attribute have the highest specificity and are known as inline styles.

Example: <p style="background-color:navajowhite;color:indianred">the quick brown fox</p>

The style attribute can be applied to all elements except base, basefont, head, html, meta, param, script, style, title.

title

The title attribute contains additional information about an element. If the element is displayed, browsers display the value of the title attribute as a tool tip when the mouse hovers over it.

Example: <p><img src="photo1.jpg" alt="Photo of the Himalayas"></p>

The title attribute can be applied to all elements except base, basefont, head, html, meta, param, script, title.

The a Element

The <a> element defines an anchor. It is used for two purposes: to create a hyperlink and to create a fragment. A hyperlink is a clickable area that when clicked, will take the user to another document or to a particular element in the same document.

The <a> element is an inline element, therefore it must have a block element as an ancestor. It can contain text or child inline elements. Therefore, text, images, inline elements, and line breaks can be made hyperlinks. The href attribute of the <a> element contains the destination of the hyperlink. The destination can be another webpage or file, or it can be a fragment in the same or a different page.

Below is an example of a hyperlink to an HTML document.

Example 1: <a href="about.html">About Us</a>

Below is an example of an image hyperlink.

Example 2: <a href="large.jpg"><img src="small.jpg" alt="an image"></a>

A fragment is an element in a document that has been labelled using the name or the id attribute.

The W3C HTML 4.01 specification for links states "Destination anchors in HTML documents may be specified either by the a element (naming it with the name attribute), or by any other element (naming with the id attribute)". The name and id specification for XHTML 1.0 states "XHTML 1.0 documents MUST use the id attribute when defining fragment identifiers".

Therefore, the name attribute should never be used in XHTML 1.0 documents (except in form control elements where they are allowed). In HTML 4.01 documents, either the name or the id attribute can be used to specify fragments. To conclude, it is best to use only the id attribute irrespective of document type (HTML or XHTML).

Example 3: <p name="product_1">The five boxing wizards jump quickly.</p>

Example 4: <p id="product_1">The five boxing wizards jump quickly.</p>

The first example shows a fragment in an HTML 4.01 document. The second example shows the same fragment in an XHTML 1.0 or HTML 4.01 document, created using the id attribute. In both cases, the fragment can be referenced from within the same document by a hyperlink as shown in the example below.

Example 5: <a href="#product_1">Go to Product 1</a>

The fragment shown in Example 3 and Example 4 can be accessed from another document by including the filename followed by the hash symbol and fragment name, as shown below.

Example 6: <a href="products.html#product_1">Go to Product 1</a>

The id value must begin with a letter and can contain numbers, hyphens, underscores, colons and periods. An id must be unique in a page.

The a element can have one title attribute that specifies a description of the hyperlink. It is displayed as a tooltip when the mouse moves over the link.

Transitional DTD's allow the a tag to have the target attribute. With this attribute, you can specify the name of the window in which the link should open.

Example 7: <a href="news.html" title="news.html" target="stuff">

This will cause news.html to open in a new window. This window will have the internal name "stuff". If a window with the internal name "stuff" is already open, then news.html will open in it.

The target attribute is also useful in frame documents. Using this attribute links in one frame can open in another.

Special Targets

There are four special target values - _blank , _self , _parent and _top .

_blank

This target causes the linked document to always open in a new window. The new window will not have an internal name.

_self

This target causes the linked document to always load in the same window or frame as the link. This is the default behavior of links. This target value is useful to override the target specified in the base tag of the document. _parent

This causes the linked document to open in the parent of the document that contains the link. This is useful when using iframes. The document in the iframe can have links that when clicked, cause the linked document to open in the entire window rather than in the frame.

_top

This causes the linked document to open in the topmost frame in the hierarchy. In a framed document, it is useful to include this attribute in all links that lead to other websites. This prevents outside websites from loading within the same frameset.

(X)HTML Minimum Document Structure

Every (X)HTML document must have a Document Type Declaration, html as the root element, head and body as the child elements, and title as the child element of head. In XHTML documents, the html element must have the attribute xmlns and xml:lang and lang.

Example 1: <!DOCTYPE HTML "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>some title</title>
</head>
<body>
body content
</body>
</html>

Example 2: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>some title</title>
</head>
<body>
body content
</body>
</html>

The lang attribute's value specifies the language of the content of the body tag. This attribute can also be used on other elements. The xml:lang attribute has the same function as lang, but it is used only in XHTML documents. The value of these attributes is a two-letter code specified in ISO 639-1 .

A webpage can also include a meta tag that specifies the character encoding of the page.

Example: <meta http-equiv="content-type" content="text/html; charset=utf-8">

The http-equiv attribute is used by HTTP servers to gather information for HTTP response headers. Therefore, in the above example, the HTTP response header will have content-type: text/html; charset=utf-8

The example below includes a meta tag that specifies the HTTP response header.

Example 3: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title><i>some title</i></title>
</head>
<body>
<i>body content</i>
</body>
</html>

Document Type Declaration

A Document Type Declaration, or DOCTYPE, is an instruction that associates a particular SGML (HTML) or XML (XHTML) document with a Document Type Definition (DTD). (Source Wikipedia)

Example: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

The general syntax of Document Type Declaration of (X)HTML documents is: <!DOCTYPE root-element [SYSTEM OR PUBLIC FPI] "uri">

In web pages the root element is always html. The keywords SYSTEM or PUBLIC indicate whether the DTD is stored in a private computer or a public one. If public, then the keyword is followed by a Formal Public Identifier (FPI). An FPI is a specially formatted string of text that uniquely identifies the DTD. If the SYSTEM keyword is chosen, an FPI is not necessary. The FPI in the above example is "//W3C//DTD HTML 4.01//EN". And the last item found in (X)HTML Document Type Declarations is the URI of the DTD. In the above example, it is "http://www.w3.org/TR/html4/strict.dtd"

A Document Type Definition (DTD) is a set of markup declarations that define a document type for SGML-family markup languages (SGML, XML, HTML). Source: Wikipedia)

A DTD defines what elements are in the document, the attributes the elements can have, the contents of the elements etc.

These are the current Document Type Declarations used in (X)HTML pages:

HTML 4.01 Declarations

HTML 4.01 Strict

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

HTML 4.01 Transitional

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

HTML 4.01 Frameset

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

XHTML 1.0 Declarations

XHTML 1.0 Strict

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

XHTML 1.0 Transitional

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

XHTML 1.0 Frameset

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

HTML 5

<!DOCTYPE HTML>

The root element (HTML) in the declaration can be lower case or upper case for HTML 4.01.

Definition of HTML, XHTML and CSS

HTML stands for HyperText Markup Language. It is a language that provides a semantic description (meaning) for the content of a document. It also specifies a structure for the document in the form of a hierarchy of elements.

Hypertext is text displayed on a computer or other electronic device with references (hyperlinks) to other text that the reader can immediately access, usually by a mouse click or keypress sequence. (Source: Wikipedia)

A markup language is a modern system for annotating a text in a way that is syntactically distinguishable from that text. (Source: Wikipedia)

XHTML stands for Extensible HyperText Markup Language. It is "a reformulation of the three HTML 4 document types as applications of XML 1.0". (Source: W3C)

XHTML provides the following benefits:

• Extensiblity: The language allows for future growth
• Interoperablity: XHTML documents can be transformed for constrained devices such as mobile phones
• Namespaces: Fragments from other XML-based languages could be included by specifying the namespace using the xmlns attribute.
• Modularization: HTML could be divided into reusable components.

CSS stands for Cascading Style Sheets.

CSS is a style sheet language used to describe the presentation semantics (the look and formatting) of HTML and XHTML pages. A style sheet language is a computer language used to describe the presentation of structured documents. (source: Wikipedia)

The float Property

The float property is used to specify whether an element is floated or not and the direction (left or right) that it is floated. The float property can be applied to any element. It is not an inherited property. It can take the values left, right, none, and inherit. Its initial value is none.

A floated element does not affect the positioning of other block elements. However, inline boxes are shortened to make room for the margin box of a floted element.

Margins on floated elements never collapse. How a floated element behaves is described in the W3C specification of floated elements. The description consists of nine rules.

Rule 1 states that the left outer edge (outer edge of the left margin) of a left-floating box may not be to the left of the left edge (outer edge of the padding) of its containing block. An analogous rule holds for right-floating elements.

What this means is that the outer edge of the left margin of a left-floated element will be aligned with the inner edge of the left padding of the containing block. Similarly, the outer edge of the right margin of a right-floated element will be aligned with the inner edge of the right padding of the containing block.

Example 1: <p style="font-size:35px;font-family:'Times New Roman';padding:10px;border:dashed 10px steelblue"><span>the</span> five boxin<img src="image4.png" alt="image 4" style="float:left;margin:5px;padding:10px;border:solid 5px slategray; background-color:palegreen">g wizards jump quickly, the quick brown fox jumps over the lazy dog</p>

In the above example, the gap between the left border outer edge of the image and left border inner edge of the <p> is 15px. This is because the left margin of the image is 5px and the left padding of the <p> is 10px and, after the image is aligned according to the rule, the margins are next to each other. Internet Explorer 6 and 7 render the image in the second line of the <p>. This is a bug.

Rule 2 states that if the current box is left-floating, and there are any left-floating boxes generated by elements earlier in the source document, then for each such earlier box, either the left outer edge (the outer edge of the left margin) of the current box must be to the right of the right outer edge (the outer edge of the right margin) of the earlier box, or its top must be lower than the bottom of the earlier box. Analogous rules hold for right-floating boxes.

What this means is that the outer edge of the margin of a left-floated element will be aligned to the outer margin edge of an earlier-occuring left-floated element. If there is insufficient space for the later-occuring floated element's box, it's top margin's outer edge will be aligned to the earlier-occuring left-floated element's bottom margin's outer edge. Right-floated elements are handled in a similar way, but aligned to the right.

Therefore, elements that are floated to the same side will not overlap each other.

Example 2: <p style="font-size:35px;font-family:'Times New Roman';padding:10px;border:dashed 10px steelblue"><span>the</span> five boxin<img src="image3.png" alt="image 3" style="padding:10px;border:solid 5px slategray; background-color:palegreen;margin:5px;float:left">g w<img src="image3.png" alt="image 3" style="padding:10px;border:solid 5px slategray; background-color:palegreen;margin:5px;float:left">izards jump quickly, the quick brown fox jumps over the lazy dog</p>

In the above example, the second left-floated image is to the right of the first left-floated image. The margin between them is 10px (5px + 5px). Internet Explorer 6 and 7 render the image in the second line of the <p>. This is a bug.

Example 3: <p style="font-size:35px;font-family:'Times New Roman';float:left">the quick brown fox jumps over the lazy dog</p> <p class="test" style="float:left">the quick brown fox jumps over the lazy dog</p>

In the above example, there is insufficient space to render the second floated <p> next to the first floated <p>. Therefore it is rendered below it.

Rule 3 states that the right outer edge of a left-floating box may not be to the right of the left outer edge of any right-floating box that is to the right of it. Analogous rules hold for right-floating elements.

Therefore, elements that are floated to opposite sides will never overlap each other.

What this means is that the outer edge of the right margin of a left floated element will be next to the outer edge of the left margin of a right floated element when there is just sufficient horizontal space for the floated elements. If there is extra space, it will appear between the margins of the two floated elements. When there is insufficient space, the second floated element's margin box will be rendered just below the first floated element's margin box.

Example 4: <p style="font-size:35px;font-family:'Times New Roman';padding:10px;border:dashed 10px steelblue"><img src="image4.png" alt="image 4" style="float:right;padding:10px;border:solid 5px saddlebrown; background-color:bisque;margin:5px"><img src="image4.png" alt="image 4" style="float:left;padding:10px;border:solid 5px yellowgreen; background-color:darkseagreen;margin:5px"></p>

In the above example, the space available in the <p> depends on the width of the viewport. The first picture shows how the floated images are positioned when there is sufficient space in the <p> for each image's margin box. The second picture shows how the floated images are positioned when there is insufficient space in the <p> — the second floated image is rendered below the first floated image.

Rule 4 states that a floating box's outer top may not be higher than the top of its containing block. When the float occurs between two collapsing margins, the float is positioned as if it had an otherwise empty anonymous block parent taking part in the flow.

What this means is that the outer edge of the top margin of a floated element cannot be higher than the inner edge of the top margin of its containing block. However, if the preceding element has a bottom margin and the succeeding element has a top margin, these margins will collapse because they will be adjoining to each other. In such a case, the floated element will behave as if it had another block level parent.

Since the margins of inline elements never collapse, the second part of Rule 4 does not apply to inline elements.

Example 5: <p style="font-size:35px;font-family:'Times New Roman';margin:5px;padding:0">the quick brown fox jumps over the lazy dog.</p> <p style="font-size:35px;font-family:'Times New Roman';float:left;margin:5px;padding:0;background: none peru"> the five</p> <p style="font-size:35px;font-family:'Times New Roman';margin:5px;padding:0"><span>the quick brown fox jumps</span> over the lazy dog.</p>

Rule 5 states that the outer top of a floating box may not be higher than the outer top of any block or floated box generated by an element earlier in the source document.

Example 6: <p style="font-size:35px;font-family:'Times New Roman';width:160px;height: 200px;padding:10px;border:dashed 10px steelblue"><img src="image3.png" alt="image 3" style="float:right;vertical-align:bottom;padding:10px;border:solid 5px slategray; background-color:palegreen;margin:5px"><img src="image3.png" alt="image 3" style="float:left;vertical-align:bottom;padding:10px;border:solid 5px palevioletred; background-color:darkorchid;margin:5px"></p>

In the above example, because there is insufficient horizontal space, the second float is rendered below the first, even though the second float appears at the left. This demonstrates Rule 5.

Example 7: <p style="font-size:35px;font-family:'Times New Roman';width:160px;height:190px"><img src="image3.png" alt="50x50 image" style="float:left;padding:10px;background-color:orangered"> <img src="image4.png" alt="100x100 image" style="float:left;padding:5px;background-color:aquamarine"> <img src="image3.png" alt="50x50 image" style="float:left"></p>

In the above example, the third image's outer top is in line with the margin box of the second floated image even though there is enough place for it next to the first image. This is in accordance with Rule 5.

Rule 6: The outer top of an element's floating box may not be higher than the top of any line-box containing a box generated by an element earlier in the source document.

Another way of putting it is: The outer edge of the margin of a floated element must be at the same height or lower than the inner edge of the padding of any line box that has content whose source code appears earlier than the floated element's.

Content whose source code appears earlier than a particular element's source code is usually on the same line as the element. However, when there is insufficient space for an element, it is rendered on the next line. In this case, if the element is floated, it will float on the next line.

Rule 7: A left-floating box that has another left-floating box to its left may not have its right outer edge to the right of its containing block's right edge. An analogous rule holds for right-floating elements.

Example 8: <p style="font-size:35px;font-family:'Times New Roman';width:100px;height:100px"><img src="image3.png" alt="50x50 image" style="float:left;margin:5px;"><img src="image3.png" alt="50x50 image" style="float:left;margin:5px;"></p>

Rule 8: A floating box must be placed as high as possible.

Rule 8 specifies that floated elements that have been positioned according to Rule 2, Rule 5 and Rule 6 have to be positioned as high as possible. Rule 2 specifies two possible positions for a floated box — one lower than the other, Rule 5 specifies that the float be positioned at the same height or lower than a particular margin and Rule 6 specifies that a float must be positioned at the same height or lower than a particular padding. Therefore, Rule 8 specifies that the highest possible position must be chosen.

Rule 9: A left-floating box must be put as far to the left as possible, a right-floating box as far to the right as possible. A higher position is preferred over one that is further to the left/right.

Rule 1, Rule 2, and Rule 3 specify the specify the limit of how much to the right or left a floated element can be positioned. Rule 9 specifies that elements positioned according to those rules must be positoned as left as possible (for left floated elements) or as right as possible (for right floated elements) while not going beyond the limits specified.

Also, Rule 9 specifies that a floated element must be positioned higher but less to the left or right instead of lower but more to the left or right if those are the two available positions.

Example 9: <p style="font-size:35px;font-family:'Times New Roman'"><img src="image3.png" alt="50x50 image" style="float:left;margin:5px;"><img src="image3.png" alt="50x50 image" style="float:left;margin:5px;"></p>

In the above example, the second floated image can also be placed below the first without violating rules 1 to 8. But because of rule 9, it is placed next to the first floated image.

Nested Floats

A floated element can contain floated descendants. A floated element will expand its height and width to accomodate a floated descendant's height. Internet Explorer 6 and 7 do not obey this rule when rendering a floated element that contains floated descendants.

Negative Margins

Floated elements with negative margins obey all of the float rules. However, the outer edge of the margin box of a floated element with negative margins will be within the padding box of the element.

Floated Elements With Negative Margins Overlapping Other Elements

When a floated element has a negative top margin, it may overlap a preceding element. In such a case, the floated element's text and the preceding element's text overlap and the background color of the floated element appears behind the text.

Example 10: <p style="font-size:35px;font-family:'Times New Roman'" >the quick brown fox jumps over the lazy dog</p><p style="margin-top:-40px;float:left;background:none cornsilk;font-size:35px;font-family:'Times New Roman'">the five boxing wizards jump quickly</p>

When a floated element overlaps an element that appears after it in the source, the inline content of that element moves away so as not to overlap the floated content. The background color of the floated element appears behind the text.

Example 11: <p style="float:left;background:none cornsilk;font-size:35px;font-family:'Times New Roman'">the quick</p> <p style="font-size:35px;font-family:'Times New Roman'">the five boxing wizards jump quickly</p>

According to the CSS 2.1 specification, when a float overlaps inline boxes (using negative margins), the inline boxes are rendered on top of the floated element's box.

Example 12: <p style="width:580px;font-size:35px;font-family:'Times New Roman'">the quick brown fox jumps <span style="background:none blueviolet">over the lazy</span> dog. the five boxing <span style="background:none gold">wizards.</span> <span style="float:right;margin-top:-20px;margin-left:-50px">jump quickly</span></p>

A floated element's box is rendered on top of block boxes that it overlaps. However, if the contents of the block box are inline boxes, then the inline boxes will be rendered on top of the floated element's box.

float:none

Since none is the initial value of float, the declaration float:none is only useful to override another float declaration that was applied to an element.

float:inherit

float is not an inherited property. However, using the float:inherit declaration, an element can be made to inherit its parent element's float value.

Internet Explorer 6 and Internet Explorer 7 ignore the float:inherit declaration.

The Background Properties

The background of an element is the area over which the content area, padding and borders are drawn. Note that an element's background does not appear in its margin.

There are six background properties in CSS — background-color, background-image, background-attachment, background-repeat, background-position, and background.

The background-color Property

This property specifies the color of the background of an element. It can accept as values, color keywords, system color keywords, hexadecimal color notation, decimal functional rgb notation, percentage functional rgb notation and the keywords transparent and inherit; See Specifying Color in CSS. Its initial value is transparent. The background-color property can be applied to any element. It is not an inherited property.

Below is an example of background-color applied to a block element.

Example 1: <p style="margin:10px;border: 5px black dashed;padding:15px;height:80px;background-color:aqua;font-size:35px;font-family:'TimesNew Roman'"> the quick brown fox jumps over the lazy dog</p>

In the above example, the background color can be seen behind the content area, padding and border (but not the margin). In Internet Explorer 6 and 7, due to a bug, the background color does not appear behind the border. This buggy behavior is seen on all elements that have hasLayout.

Below is an example of background-color applied to an inline non-replaced element (a span).

Example 2: <p style="font-size:35px;font-family:'TimesNew Roman'">the five boxing <span style="background-color:royalblue">wizards jump</span> quickly. the quick brown <span style="margin:10px;border: 5px lightblue dashed;padding:15px;height:80px;background-color:rgb(205,92,92)">fox jumps</span> over the lazy dog. the five <span style="background-color:hotpink">boxing wizards</span> jump quickly</p>

In the above example, since the browser does not allocate extra space for the second span's top and bottom border and padding, they overlap the text that is above and below. The background color of the second span covers the first span's backround color. This is because text that appears later in an (X)HTML document is higher in the stacking order. For the same reason, the background color of the third span covers the background color of the second span. Note, however, that the second span's background color appears behind the text below that does not have a background color specified. This is because, by default, text has a transparent background.

Below is an example of what happens when block elements with background colors overlap each other.

Example 3: <p style="font-size:35px;font-family:'TimesNew Roman';background-color:orchid;width: 200px">abcdefg hijkl</p>
<p style="font-size:35px;font-family:'TimesNew Roman';margin-top:-35px;margin-bottom:-35px;background-color:palegoldenrod">the five boxing wizards jump quickly. the quick brown fox jumps over the lazy dog</p>
<p style="font-size:35px;font-family:'TimesNew Roman';background-color:lightsalmon;width: 200px">abcdefg hijkl</p>

The above example shows that block elements that come later in the (X)HTML document are higher in the stacking order. Because of this, the last <p>'s background color cover the second's and the second's covers the first's. However, unlike in inline elements, the text of any of the three <p>s is not covered by a background color. In Internet Explorer 6 and 7, the text is also covered by the background color. This is a bug.

Below is an example of background-color applied to an inline replaced element (an image).

Example 4: <p style="font-size:35px;font-family:'TimesNew Roman'">the quick <img src="20x50.jpg" alt="20x50 image" style="background-color:mediumspringgreen;padding:5px">brown fox jumps over the lazy dog</p>

The background color on the image can only be seen when the image has padding.

background-color:transparent

transparent is the initial value of background-color, therefore all elements have a transparent background unless otherwise specified. Therefore, the background-color:transparent declaration can be used to override a background color that has been already applied to an element.

background-color:inherit

background-color is not, by default, an inherited property. However, the background color of an element appears in its child elements because the initial value of background-color is transparent. Since the background color of an element is, by default, transparent, the specified background color of an ancestor element will show through.

Internet Explorer 6 and 7 ignore CSS declarations containing the inherit value.

The background-color:inherit causes an element to inherit its parent's background color. The effect of the background-color:inherit can only be observed in certain situations — two examples are shown below.

Example 5: <p style="font-size:35px;font-family:'Times New Roman';color:red;background-color:white;background-image:url('pattern.bmp')">the quick <span style="background-color:inherit">brown</span> fox jumps over the lazy dog.</p>

Example 6: <p style="font-size:35px;font-family:'Times New Roman';background-color:white">the quick brown fox jumps over the lazy dog. the five <span style="background-color:inherit;padding-top:20px">boxing wizards</span> jump quickly. the quick brown fox jumps over the lazy dog.</p>

The background-image Property

This property specifies an image that will appear as the background of the content area, padding and border of an element. This property can be applied to any element. An element can have only one background image. background-image can take as values a URL, the keyword none and the keyword inherit. Here, URL is the address of an image file. The URL is within quotes and the whole expression is within parentheses, prefixed with url . Putting the URL withing single or double quotes is optional. The initial value of background-image is none. It is not an inherited property.

Example 7: <p style="font-size:35px;font-family:'Times New Roman';background-image:url('star.gif');padding:0">the quick brown fox jumps over the lazy dog.</p>

(Image taken from Google Chrome)

In the above example, the background image is aligned to the top left corner of the content area of the <p>, and then tiled horizontally and vertically. By default, background images are vertically and horizontally tiled.

Example 8: <p style="font-size:35px;font-family:'Times New Roman';background-image:url('star.gif');background-attachment:scroll;padding:10px;border: dashed powderblue 10px">the quick brown fox jumps over the lazy dog.</p>

In the above example, the <p> has both padding and a border. Therefore, the image is aligned to the top left corner of the padding (the outer edge of the padding), and then tiled vertically and horizontally. Internet Explorer 6 and 7 align the background image to the top left corner of the border (the outer edge of the border).

Inline replaced and non-replaced elements can also have background images. Only when an image has padding or a border, or when the image fails to load, can its background image be seen.

Example 9: <p style="font-size:35px;font-family:'Times New Roman'">the <img src="20x50.jpg" alt="20x50 image" style="background-image:url(star.gif);padding:10px;border: 10px dotted darkseagreen">quick brown fox jumps over the lazy dog</p>

background-image:none

none is the default value of the background-image property. Therefore, it is only useful to override another background-image declaration that matches an element.

background-image:inherit

background-image is not an inherited property. However, since an element's background is by default transparent, any background image of an ancestor element can be seen within it. The background-image:inherit declaration causes the background image of an element's parent to appear within it, aligned to the top left corner of the element's box.

Internet Explorer 6 and 7 ignore background-image:inherit declarations.

Example 10: <p style="font-size:35px;font-family:'Times New Roman';background-image:url(star.gif)">five <span style="background-image:inherit">quick</span> brown foxes jump over the lazy dog</p>

The background-repeat Property

This property specifies whether or not a background image is tiled or not and, if it is, whether it is tiled vertically, horizontally or both. The background-repeat property can take the values repeat, repeat-x, repeat-y, no-repeat and inherit. The initial value is repeat.This is not an inherited property.

background-repeat:repeat-x

This declaration causes the background image to be tiled horizontally (the x-axis) only.

Example 11: <p style="font-size:35px;font-family:'Times New Roman';background-image:url(star.gif);background-repeat:repeat-x;border:10px limegreen double">the quick brown fox jumps over the lazy dog</p>

In the above example, note how the background image in the border is vertically aligned with the background images of the content area of the <p>. In Internet Explorer 6 and 7 the background image is aligned to the outer top left edge of the border. This is a bug.

background-repeat:repeat-y

This declaration causes the background image to be tiled vertically (the y-axis) only.

Example 12: <p style="font-size:35px;font-family:'Times New Roman';background-image:url(star.gif);background-repeat:repeat-y;border:10px cadetblue double">the quick brown fox jumps over the lazy dog</p>

In the above example, note how the background image in the border is horizontally aligned with the background images of the content area of the <p>. In Internet Explorer 6 and 7, the background image is aligned to the outer top left edge of the border. This is a bug.

background-repeat:no-repeat

With this declaration, the background image is not tiled at all.

Example 13: <p style="font-size:35px;font-family:'Times New Roman';background-image:url(star.gif);background-repeat:no-repeat;border: 10px rosybrown double">the quick brown fox jumps over the lazy dog</p>

In the above example, note that the background image does not appear in the border at all. Internet Explorer 6 and 7, the background image is aligned to the outer top left edge of the border. This is a bug.

background-repeat:repeat

This declaration is causes the background image to tile both horizontally and vertically. Since this is the initial value of the background-repeat property, this declaration is only useful to override another background-repeat declaration that matches an element.

background-repeat:inherit

Since background-repeat is not an inherited property, the background-repeat:inherit declaration can be used to make an element inherit its parent's background-repeat value. Internet Explorer 6 and 7 ignore this declaration.

Example 14: <p style="font-size:35px;font-family:'Times New Roman';background-image:url(star.gif);background-repeat:repeat-y">the <span style="background-image:url(star_i.gif);background-repeat:inherit">quick</span> brown fox jumps over the lazy dog</p>

The background-attachment Property

This property controls whether or not the background image scrolls when the web page is scrolled by the user. This property takes the values scroll, fixed and inherit. The initial value is scroll. background-attachment is not an inherited property.

background-attachment:fixed

This declaration causes the background image of an element to be aligned with the top left corner of the viewport. The alignment can be changed using the background-position property.

With background-attachment:fixed, the background image in an element appears in the position that it would have if it was tiled from the top left corner of the viewport. However, if the background-repeat property is set to no-repeat, the background image will not be tiled. Therefore, in such a case, the background image will be visible only when the element's box is close to the top left corner of the viewport. Similarly, if the background-repeat property has a value of repeat-x the background image will be visible only when the element's box appears towards the top of the viewport. With repeat-y, the background image will be visible only when the element is close to the left side of the viewport. Since the background image is aligned with the viewport, it does not move unless the viewport is resized. Therefore, when the user scrolls the web page, a fixed background image does not move with the rest of the element.

Internet Explorer 6 renders background-attachment:fixed correctly on the html element. background-attachment:fixed is rendered correctly only when the body element is the same size as the viewport.

Example 15: <p style="font-size:35px;font-family:'Times New Roman';background-image:url(star.gif);background-attachment:fixed">the quick brown fox jumps over the lazy dog</p>

Internet Explorer 6 does not render the background image's position fixed to the viewport. This is a bug. Internet Explorer 7 vertically misalignes the background image by 1px — it renders the background image one pixel lower than it should.

Example 16: <p style="font-size:35px;font-family:'Times New Roman';background-image:url(star.gif);background-attachment:fixed;background-repeat:repeat-x">the quick brown fox jumps over the lazy dog</p>

In the above example, the background image of the <p> can be seen only when the element is scrolled to the top of the viewport. Internet Explorer 6 does not render the background image's position fixed to the viewport. This is a bug. Internet Explorer 7 does not render the background image at all — the background image cannot be seen even when the <p> is scrolled to the top of the viewport. This is a bug.

Example 17: <p style="font-size:35px;font-family:'Times New Roman';background-image:url(star.gif);background-attachment:fixed;background-repeat:repeat-y">the quick brown fox jumps over the lazy dog. the five boxing wizards jump quickly</p>

In the above example, the background image can be seen on the left side of the <p>. It is aligned to the left edge of the viewport. Internet Explorer 6 does not render the background image's position fixed to the viewport. This is a bug.

Example 18: <p style="font-size:35px;font-family:'Times New Roman';background-image:url(star.gif);background-attachment:fixed;background-repeat:no-repeat">the quick brown fox jumps over the lazy dog</p>

In the above example, the background image of the <p> can be seen only when the element is scrolled to the top of the viewport. Internet Explorer 6 does not render the background image's position fixed to the viewport. This is a bug. Internet Explorer 7 does not render the background image at all — the background image cannot be seen even when the <p> is scrolled to the top of the viewport. This is a bug.

background-attachment:scroll

scroll is the initial value of background-attachment. Therefore, the background-attachment:scroll declaration is only useful to override another background-attachment declaration that matches an element.

background-attachment:inherit

background-attachment is not an inherited property. However, the background-attachment:inherit will cause an element to inherit its parent element's background-attachment value.

Internet Explorer 6 and 7 ignore the inherit value.

Example 19: <p style="font-size:35px;font-family:'Times New Roman';background-image:url(star.gif);background-attachment:scroll">the <span style="background-image:url(star_i.gif);background-attachment:inherit">quick</span> brown fox jumps over the lazy dog</p>

The background-position Property

This property specifies the position of the background image with respect to the top left corner of an element's padding box (in the case of background-attachment:scroll) or with respect to the top left corner of the viewport (in the case of background-attachment:fixed). This property can only be applied on block-level and replaced elements (inline or block). It is not an inherited property. Its inital value is 0% 0%. It can take length values, percentages and the keywords top, bottom, left, right, center and inherit. The background-position property can take either one or two space-separated values.

Internet Explorer 6 and 7 position the background image with respect to the outer edge of the border instead of the outer edge of the padding. This is a bug.

background-position with Keywords

The keywords applicable to background-position are top, bottom, left, right, center. background-position can take either one or two keyword values. If a background-position declaration has only one keyword value, the other keyword value is assumed to be center.

With keywords, the starting position of a background image is the position at which the background image is located after aligning its top left corner to the point specified. If the element has the declaration background-repeat:repeat then the background image is tiled in all four directions starting from the starting position. If the element has the declaration background-repeat:repeat-x or background-repeat:repeat-y, then the image is tiled left and right or up and down, respectively, from the starting position. If the element has background-repeat:no-repeat, then the background image is displayed at the starting position without tiling.The top and bottom keywords specify the starting alignment of the background image on the y-axis (vertical axis), left and right specify the starting alignment of the background image on the x-axis (horizontal axis) and center refers to a point that is equidistant from the x and y axes (the horizontal and vertical center of an element's padding box).

Example 20: <p style="font-size:35px;font-family:'Times New Roman';background-image:url(star.gif);background-position:top right">the quick brown fox jumps over the lazy dog</p>

In the above example, the background image is truncated at the left and at the bottom. This indicates top right alignment.

The order of the keywords is not important — background-position:top right and background-position: right top are equivalent.

Example 21: <p style="font-size:35px;font-family:'Times New Roman';background-image:url(star.gif);background-position:top right;background-repeat:repeat-x">the quick brown fox jumps over the lazy dog</p>

In the above example, the background image is truncated at the left and aligned to the top. This indicates top right alignment.

The keyword center can refer either to the vertical alignment or the horizontal alignment of the background image. center refers to vertical alignment when paired with horizontal alignment keywords right or left. center refers to horizontal alignment when paired with vertical alignment keywords top or bottom.

Example 22: <p style="font-size:35px;font-family:'Times New Roman';background-image:url(star.gif);background-position: center top">the quick brown fox jumps over the lazy dog</p>

In the above example, the background image is truncated at the left, right and bottom. This indicates center top alignment.

When the background-position property has only a single keyword, the second keyword is assumed to be center.

Example 23: <p style="font-size:35px;font-family:'Times New Roman';background-position:left;background-image:url(star.gif);background-repeat:no-repeat">the quick brown fox jumps over the lazy dog</p>

In the above example, the background image is positioned as if the <p> had the declaration background-position:left center.

Below is a diagram showing all the combinations of background-position keywords (except inherit) with the resulting starting position of the background image.

Example 24:

Internet Explorer 6 and 7 position the background image with respect to the outer edge of the border instead of the outer edge of the padding. This is a bug.

Position keyword-valued background-position declarations with the declaration background-attachment:fixed cause the background image to be positioned with respect to the viewport. However, the background image is visible only in the border box of the element.

background-position with Length Values

A background-position declaration with length values specifies the horizontal and vertical offset of the background image. The background-position property can take a pair of length values or a single value. When this property has only one value, that value is considered to be the horizontal offset and the vertical position is considered to be center.With two values, the first length value specifies the horizontal offset and the second length value specifies the vertical offset from the top left corner of the padding box (in case of background-attachement:scroll) or from the top left corner of the viewport (in case of background-attachment:fixed).

Example 25: <p style="font-size:35px;font-family:'Times New Roman';background-position:5px 15px;background-repeat: no-repeat;background-image:url(star.gif)">the quick brown fox jumps over the lazy dog</p>

Mixing length values and position keywords is allowed. When the value of a background-declaration contains at least one length value, the first sub-value specifies the horizontal position or offset and the second sub-value specifies the vertical position or offset. In such cases, the first sub-value can be left, right, center or a length value and the second sub-value can be top, bottom, center or a length value.

Example 26: <p style="font-size:35px;font-family:'Times New Roman';background-position:5px bottom;background-repeat: no-repeat;background-image:url(star.gif)">the quick brown fox jumps over the lazy dog</p>

Negative length values are permitted in background-position declarations. Large negative length values may cause a background image to be not visible at all.

Example 27: <p style="font-size:35px;font-family:'Times New Roman';background-position: -5px -5px;background-repeat:no-repeat;background-image:url(star.gif)"> the quick brown fox jumps over the lazy dog</p>

Internet Explorer 6 and 7 position the background image with respect to the outer edge of the border instead of the outer edge of the padding. This is a bug.

Length-valued background-position declarations with the declaration background-attachment:fixed cause the background image to be positioned with respect to the viewport. However, the background image is visible only in the border box of the element.

background-position with percentage values

A background-position declaration with percentage values specifies two points — a point on the background image and a point in the paddding box with which the point on the background image is made to coincide.

The first percentage sub-value determines the two horizontal coordinates — one calculated with respect to the width of the background image which determines the horizontal coordinate of the point on the background image, and the other calculated with respect to the width of the padding box of the element in which the background image appears which determines the horizontal coordinate of the point in the padding box with which the point on the background image is made to coincide.
The second percentage sub-value determines the two vertical coordinates — one calculated with respect to the height of the background image which determines the vertical coordinate of the point on the background image, and the other calculated with respect to the height of the padding box of the element in which the background image appears which determines the vertical coordinate of the point in the padding box with which the point on the background image is made to coincide.
The points are determined from the top left corner of the padding box and the top left corner of the background image

In case of an element with background-attachment:fixed, the offset is determined with respect to the top left corner of the image and the top left corner of the viewport.

Example 28: <div style="width:600px"><p style="font-size:35px;font-family:'Times New Roman';margin:5px;background-image:url(image3.png);background-position:10% 60%; background-repeat:no-repeat;background-color:transparent;color:yellow;padding:0"> the quick brown fox jumps over the lazy dog. the five boxing wizards jump quickly</p></div>

In the above example, the image is 50px by 50px and the padding box's width is 590px (because of the left and right 5px) and its height is 82px. The point on the image and the padding box can be found in this way:

• The value of the background-position declaration is 10% 60%
• The horizontal sub-value is 10% and the vertical sub-value is 60%
• The image's width and height is 50px. 10% of 50px is 5px and 60% of 50px is 30px. Therefore the point on the image is (5px,30px)
• The width of the element's padding box is 590px and the height is 82px. 10% of 590px is 59px and 60% of 82px is 49.2px. Therefore, the point on the padding box is (59px, 49px) — 49.2px is rounded off to 49px

The point on the image is made to coincide with the point on the padding box. The horizontal and vertical distance of the top left corner of the image from the top and left outer edge of the padding box can be calculated by subtracting the background image's point from the padding box's point — (59px, 49px) - (5px, 30px) = (54px, 19px). Therefore, the top left corner of the image will be located at a horizontal distance of  54px from the outer edge of the left padding and a vertical distance of 19px from the outer edge of the top padding.

Below is an image showing different percentage values of background-position that have keyword equivalents:

Example 29:

Internet Explorer 6 and 7 position the background image with respect to the outer edge of the border instead of the outer edge the padding. This is a bug.

Percentages greater than 100 are allowed. — they cause the background image to be partially visible or to be not visible at all. When a background image is positioned such that a part of it is outside the padding box, it will be visible behind borders, but it will not be visible in the margins of the element.

A value that is greater than 100% causes the padding box alignment point to be outside the padding box. It also causes the background image alignment point to be outside the image — it is as if the image is larger than it really is. When the two alignment points coincide, the background image will be partially visible or not visible at all.

Example 30: <div style="width:200px;"><p style="font-size:35px;font-family:'Times New Roman';background-image:url(image3.png);background-repeat:no-repeat; background-position:0% 120%;margin:0;padding:0;border:dashed 35px skyblue">the five boxing wizards jump quickly</p></div>

In the above example, the height of the <p>'s padding box is 205px. The vertical sub-value of the background-position declaration is 120%. Therefore the vertical coordinate of the padding box alignment point is 120% of 205px, which is 246px. The horizontal coordinate is zero. Therefore, the padding box alignment point will be 246px - 205px = 41px below the outer edge of the padding. The size of the image is 50px by 50px. The vertical sub-value of the background-position declaration is 120%. Therefore the vertical coordinate of the background image alignment point is 120% of 50px, which is 60px. The horizontal coordinate is zero. Therefore the alignment point will be 10px below the left edge of the background image. The image will therefore behave as if it is 60px tall. The vertical height of the image that is outside the padding box will be 41px - 10px = 31px and the part visible in the padding box is 50px - 31px = 19px.

Internet Explorer 6 and 7 position the background image with respect to the outer edge of the border instead of the outer edge of the padding. This is a bug.

Example 31: The picture below shows a background image of height and width 50px positioned in a padding box of height and width 200px. The picture shows the positions of the background image for the declarations background-position:10% 20%, background-position:90% 120% and background-position:50% -20%.

The number of pixels that the background image is moved can be calculated by subtracting the horizontal and vertical positions of the background image from the corresponding positions of the padding box. For example, if the padding box is 100px by 75px and the background image is 50px by 25px, and the declaration is background-position: 10% 10%, then the horizontal distance moved will be 10px - 5px = 5px and the vertical distance moved will be 7.5px - 2.5px = 5px. The direction of movement depends on whether the background image is larger or smaller than the padding box.

When the background image is smaller than the padding box, positive percentages less than 100 in a background-position declaration cause the background image to move towards the right and the bottom. With positive percentages greater than 100, the bottom right of the background image may move out of the padding box. The greater the size difference between the image and the padding box, the greater is the chance that a part of the (or the entire) background image moves out of the padding box.With negative percentages, the background image moves towards the left and top.

When the background image is the same size as the padding box, it cannot be moved with background-position.

When the background image is larger than the padding box, positive percentages less than 100 in a background-position declaration cause the background image to move towards the left and top. With negative percentages greater than 100, the top left of the background image may move out of the padding box. The greater the size difference between the image and the padding box, the greater the chance that a part of the (or the entire) background image moves out of the padding box. With negative percentages, the background images moves towards the bottom and right.

Internet Explorer 8 and below ignore the decimal portion of percentage values. Therefore, in Internet Explorer 7 and below, background-position: 10.4% 25.9% is the same as background-position: 10% 25%. This prevents precision positioning of the background image. To overcome this limitation, the background image should be only slightly smaller or slightly larger than its padding box.

Percentage-valued background-position declarations with the declaration background-attachment:fixed cause the background image to be positioned with respect to the viewport. However, the background image is visible only in the border box of the element.

background-position:inherit

background-position is not an inherited property. However, the background-position:inherit will cause an element to inherit its parent element's background-position value.

Internet Explorer 6 and 7 ignore the inherit value.

The background Property

background is a shorthand property. That is, it allows specifying the values of background-color, background-image, background-repeat, background-attachment and background-position in a single declaration.

Example 32: background: fixed url(image.gif) peachpuff 10% 10% no-repeat

The order of the sub-values is not important. A background declaration must have at least one sub-value. Those values that are not specified are given the default value by the browser. The defalut values of the properties of a background declaration are the same as the initial values of each of the individual properties. They are: for background-color, transparent; for background-image, none; for background-repeat, repeat; for background-attachment, scroll and for background-position, 0% 0%.

Example 33: background: skyblue;

The above declaration is equivalent to background: skyblue scroll none 0% 0% repeat;