The img Element

The img element is used to insert an image into an (X)HTML page. It is an inline replaced element. It is an empty element. The URI of the image is defined by the src attribute. Any image format that the browser supports can be used. Common formats are JPEG, PNG and GIF.

The src and alt attributes are required.

Attributes

Core Attributes

The core attributes can be applied to this element.

align

This is a deprecated attribute. It specifies the alignment of the image. Its value can be bottom, or left, or middle, or right, or top. Since this a presentational attribute, it is preferable to use CSS instead.

bottom

Aligns the image to the baseline

middle

Aligns the vertical middle of the image to the baseline

top

Aligns the top of the image to the top of the line box.

left

Aligns the image to left edge of the line box

right

Aligns the image to the right edge of the line box

alt

This is a required attribute. The value of this attribute is a short description of the image. It is displayed when the image cannot be loaded. It may also be used by non-visual browsers.

border

This is a deprecated attribute. Its value is a number that specifies the width of the border in pixels that surrounds the image. Since this is a presentational attribute, it is preferable to use the CSS border property instead.

height

This attribute specifies the height of the image. Using this attribute may speed up the rendering of the page because the browser can allocate space for the image before it is fully loaded. Since this is a presentational attribute, it is preferable to use the CSS height property instead.

hspace

This is a deprecated attribute. Its value is a number that specifies the width in pixels of the right and left margins of the image. Since this is a presentational attribute, it is preferable to use the CSS margin property instead.

ismap

This attribute takes only one value and is specified as follows: ismap="ismap". It indicates that the image is part of an server-side image map.

longdesc

The value of this attribute is a URL to a document that has a description of the image. This will help those who are browsing the document non-visually. However, visual browsers such as Firefox, Internet Explorer, etc. do not provide any method to view the document specified in longdesc.

name

This attribute is deprecated in XHTML. It is better to use the id or class attribute in both HTML and (X)HTML documents.

src

This is a required attribute. Its value is the URI of the image that is to be embedded.

usemap

This attribute is used to specify the map element that contains the client-side image map information of the iamge. The value of this attribute is the name (in case of HTML) or the id (in case of XHTML), prefixed with a hash (#) of the map element.

vspace

This is a deprecated attribute. Its value is a number that specifies the width in pixels of the top and bottom margins of the image. Since this is a presentational attribute, it is preferable to use the CSS margin property instead.

width

This attribute specifies the width of the image. Using this attribute may speed up the rendering of the page because the browser can allocate space for the image before it is fully loaded. Since this is a presentational attribute, it is preferable to use the CSS width property instead.

Inline Frames

Inline Frames, specified by the iframe element allow one to display files within an (X)HTML document. The inserted file can be another (X)HTML document or an image or text file etc. The inserted file, specified by the src attribute, is displayed in a rectangular frame.

iframe is an inline replaced element. It is also a flow element, therefore it can have block or inline child elements. The child elements and/or text content of the Inline Frame are displayed by browsers that do not support Inline Frames.

Only the transitional doctypes allow Inline Frames.

Attributes

Core Attributes

The core attributes can be applied to this element.

align

This is a deprecated attribute. It specifies the alignment of the Inline Frame within its parent element. It can have a value of top, or middle, or bottom, or left, or right. Since it is a presentational attribute, CSS should be used instead.

frameborder

This attribute can have a value of 1 or 0 which specifies if there should be a border around the frame or not. Since this is a presentational attribute, it is preferable to use the CSS border property instead.

height and width

This attribute can have a number or a percentage value. Number values specify the height (or width) of the Inline Frame in pixels and percentage values refer to the height (or width) of the parent element. Since this is a presentational attribute, it is preferable to use the CSS height or width property instead.

longdesc

The value of this attribute is a URL to a document that has a description of the content of the Inline Frame. This will help those who are browsing the frameset document non-visually. However, visual browsers such as Firefox, Internet Explorer, etc. do not provide any method to view the document specified in longdesc.

Example: <iframe src="fr.html" longdesc="frdesc.html">

marginheight

The value of this attribute, a number, specifies the top and bottom margins between the displayed contents of the source file of the Inline Frame and its inner edge.

marginwidth

The value of this attribute, a number, specifies the left and right margins between the displayed contents of the source file of the Inline Frame and its inner edge.

name

This attribute assigns a name to the Inline Frame so that it can be targetted by links having the target attribute.

scrolling

This attribute can take one of these values: yes,no or auto. With yes, scrollbars are always show whether they are needed or not. With no, scrollbars are never shown. With auto, scrollbars are shown when needed, this is the default.

src

The value of this attribute is a URL that specifies the initial file that will be displayed in the frame. The src attribute can refer to any file, even to another frameset document.

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

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

The <sub> tag and the <sup> tag

The sub tag causes the enclosed text to be rendered as a subscript. The text is lowered by half a character's height, in the same font size as the surrounding text.
The sup tag renders the enclosed text as a superscript. The text is raised by half a character's height, in the same font size as the surrounding text.

The <q> tag

The q tag is used for enclosing short quotes. All major browsers, except Internet Explorer, render quote text within inverted commas.
The cite attribute lets you indicate a URL as the source of the quote.

The <samp> tag

This tag is used to indicate that the enclosed tag is a "sample" and therefore has to be understood literally and not in the context that it is found.
Example: <p>There are many inline content tags like <samp>kbd</samp>.</p>
All major browsers render the sample element in a monospace font.

The <kbd> and the <var> tag

The <kbd> tag
This is used to indicate text that is typed on the keyboard. Most browsers render the enclosed text in monospace font.
Example: <p>Enter the following text at the command prompt: <kbd>ping -n 1 -l 0 www.yourserver.com</kbd></p>
The <var> tag
This is used to indicate a variable. This element can be nested in the code element. The enclosed text is rendered in italics.

The <acronym> tag

The acronym element is a phrase element. This means that it is an inline element that adds semantic information to strings of text.

This tag is used to indicate that the enclosed text is an acronym. An acronym is a word made up of the the initial letters of a phrase - for example, HTML.

Just like the abbr element, Firefox and Opera render the acronym with a dotted underline, IE7 and Safari render them normally.

The title attribute is useful here because it can contain the expanded form of the acronym. This expanded form will then be displayed when the user hovers the mouse over the acronym.

Example: <acronym title="internet service provider">ISP</acronym>

The <abbr> tag

The abbr element is a phrase element. This means that it is an inline element that adds semantic information to strings of text.

This tag is used to indicate that the enclosed text is an abbreviation. Firefox and Opera render the abbreviation text with a dotted underline, but IE7 and Safari don't.

Note: An abbreviation is a shortened form of a word or phrase. Whereas an acronym is a word formed of the first letters of a phrase. Example: OPEC

title attribute

The title attribute can contain the expanded form of the abbreviation.

Example: <abbr title="modulator-demodulator">modem</abbr>

When the mouse hovers over the abbreviation, the browser displays the expanded form as a tool-tip.

The <legend> tag

The legend tag creates a label for a fieldset in a form. The legend tag can only be contained in a fieldset.

The above legend was created with the following code:
<fieldset>
<legend>Compulsory Info</legend>

The select tag

The select tag can be used to either create a pull-down menu or a multiple-selection menu.
Example:
<select name="country">
<optgroup label="big_five">
<option value="india" >India</option>
<option value="usa" >USA</option>
<option value=""uk" >UK</option>
<option value="canada">Canada</option>
<option value="australia">Australia</option>
</optgroup>
<optgroup label="others">
<option value="pakistan">Pakistan</option>
<option value="france">France</option>
<option value="spain">Spain</option>
<option value="italy">Italy</option>
</optgroup>
</select>


Pull-down menu
<select name="country">
<option value="india" >India</option>
<option value="usa" >USA</option>
<opton value="uk" >UK</option>
</select>

You can organize the items of a pull-down menu using the optgroup tag.

Multiple-selection menu
The attribute multiple="multiple" makes the above code function as a multiple-selection menu.

You can set the number of items displayed using the size="x",where x is the number of items.

The <textarea> Tag

<textarea name="comment" cols="50" rows="5">Type your comment here</textarea>
This tag creates a multi-line text-entry area. The text content of the element is the default text that the text-area will contain. cols and rows specify the number of columns and rows. The default text should not contain any HTML.
It makes more sense to use the post method to submit a form if it has a text-area. Because unlike get, post does not have the 2048-characters-in-URL limit.
Non-standard attribute: wrap
By default, the text-area wraps lines to fit in the box. To disable this put the attribute wrap=off in the textarea tag.
Note that though by default the text-area wraps lines, it transmits the text exactly the way the user entered it. To have the virtual wrapping transmitted, use wrap=physical. To prevent the transmission of virtual wrapping use wrap=virtual.

Forms - Action Buttons

These are buttons that perform an action on the entire form. There are four types of action buttons - submit, reset, regular and image.
Submit and image buttons submit all the form's parameters to the form application.
A regular button can be used to perform an action using Javascript.
The reset button erases all user input from the form.

Submit Button
The submit button's default name is "Submit Query". However, Opera and Amaya display just "Submit". To rename the button, include the value="somename" attribute.
If there is a name attribute, then it's value is included as a parameter in the form data, with the value of value as the data.
Example:
<input type="submit" name="button1" value="test" />
if the form uses get, the url will look like this
form.php?spice=pepper&button1=test
the button will look like this


Reset Button
<input type="reset" value="clear all">
The above code creates a button that clears all user-entered data in the form and restores the defaults.
If, in a group of radio buttons, there is no default choice (using the checked=checked attribute), then on pressing the reset button, all the radio buttons are cleared.
The code above creates the following button:



Image Buttons
<input type="image" src="images/button1.gif" name="map"/>
This is what it looks like:
Using the code above, you can make an image of your choice a button. When the user clicks it, the form is submitted to the form application along with the X and Y coordinates of the mouse pointer when the button was clicked. The X and Y coordinates are with respect to the top-left corner of the button.
Here is what will be submitted if the method is get :
form.php?spice=pepper&map.x=10&map.y=14

Regular Buttons
<input type="button" value="Send" />
This type of button does nothing unless used along with a Javascript on-event.

Note: When you have a group of buttons, it is useful to give all the buttons the same names but different values. Thus, the form program will know which button was clicked by the name=clickedbuttonname parameter.