Monday, August 30, 2010

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.

Tuesday, August 3, 2010

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>

Monday, August 2, 2010

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>

col and colgroup example