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.

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