The hr Element

The hr element creates a horizontal rule. It is a block element. It is an empty element, that is, it cannot contain any other element or text. This is a presentational (X)HTML element. Therefore, it is preferable to use CSS borders to create horizontal rules instead of using the hr element.

Attributes

Core Attributes

The core attributes can be applied to this element.

align

This is a deprecated attribute. It can take the value center or left or right. This attribute is used to align the horizontal rule when its length is less than the content area of its parent element. Since it is a presentational attribute, CSS should be used instead.

noshade

This is a deprecated attribute. This attribute is specified as noshade="noshade". It displays the rule with one solid color, instead of the default 3D shade.

size

This is a deprecated attribute. Its value, a number, specifies the height (thickness) of the rule.

width

This is a deprecated attribute. Its value is a number or a percentage. If the value is a number, it specifies the width (length) of the rule in pixels. If the value is a percentage, it calculates the the width (length) of the rule as a percentage of the width of the parent element.

The h1, h2, h3, h4, h5 and h6 Elements

The h1, h2, h3, h4, h5 and h6 elements are used on headings. A heading is a short description of the document section it is in. Since a document can have many headings and sub-headings, HTML provides six elements from h1 to h6. h1 is at the top most of the hierarchy and h6 is at the lowest.

These are block elements that can only have inline elements as their child elements.

Since the various heading elements are used to indicate a hierarchy of headings and content, it doesn't make sense to skip levels. For example, after an h1 element, the next heading element should be h2 not any other heading element like h3.

An heading element can contain an image if the image's content describes the content of the document section.

Attributes

Core Attributes

The core attributes can be applied to this element.

align

This is a deprecated attribute. It can take as values either center, left, and right. The CSS property text-align should be used instead of this property.

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 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.

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 <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

Ordered Lists - The <ol> tag

The ol tag is used to create a list when the sequence of the items are important. The browser numbers each item of the ordered list sequentially.
Each item of the ordered list must be enclosed in the li element. The ol element must not be inside a p element. It can be within the body element, the blockquote element or the div element.
All browsers indent the list from the left.
Ordered and unordered lists can be nested within each other. The li element can contain another ordered or unordered list. Actually, the li tag can contain virtually any element that the body element can contain.
Example:
<ol>
<li>Super item</a>
<ul class="sub">
<li><a href="sub1.html">Sub-item 1</a></li>
<li><a href="sub2.html">Sub-item 2</a></li>
<li><a href="sub3.htm">Sub-item 3</a></li>
</ul>
</li>
<li>Item 2
<ol>
<li>Sub-item1</li>
<li>Sub-item 2</li>
<li>Sub-item 3</li>
</ol>
</li>
<li>
<table border="border"><tr><td>row1item1</td><td>row1Item2</td></tr><tr><td>row2Item1</td><td>row2item2</td></tr></table>
</li>
</ol>
This is rendered by all major browsers like this:

Unordered Lists - the <ul> tag

An unordered list is one which is not numbered. This implies that the order of the items in the list is not important. Ordered lists are also useful in navigation bars - they are used to present a collection of site-navigation links.
The ul element contains the items of an unordered list. The ul tag is a block element that cannot be contained within p elements. It can, however, be contained in blockquote and div elements. Each item of the list is contained in li tags. The ul tag can only contain li tags - no other content is allowed.
All major browsers render unordered lists as bulleted lists. Bullets are, by default, small solid discs that are displayed to the left of each item in the list. All major browsers indent the bullets from the left. The exact amount of indentation is not specified by any standard.
Example: <ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
This is rendered in Firefox 3 as below:

Note that unordered lists can be nested. Thus, you can have sub-items in a list. The following example shows an unordered list where the first item, "Item 1", has three sub-items. We first enter the name of the sub-list in the li element. This is then followed by the ul tag and the rest of the code of the sub-list.
Example:
<ul>
<li>Item 1
<ul>
<li>Sub-item 1</li>
<li>Sub-item 2</li>
<li>Sub-item 3</li>
</ul>
</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>

The <pre> tag

All the text inside a pre element is rendered exactly as it is in the HTML document, ignoring normal HTML whitespace and line wrapping rules. The text is rendered in monospace font. Use this tag when you want the text to appear exactly the way it was entered in the document, or when you want the columns and rows of characters to always lineup in a particular way. Tab stops are defined at every eighth character position but using tabs is unreliable. Therefore, it is better to use spaces to lineup characters.
The pre element can contain any inline elements but not block-level elements. All special characters must be substituted with entity equivalents (example: < , > etc.).

The <p> tag

The p element is used to contain a paragraph of inline content such as text or images. The p element can be contained in the body element, in lists (li elements), in form elements and certain other block-level elements.