Grouping HTML Elements

You group sections of an HTML page when you want to perform an action on multiple elements. For example, you might group a series of paragraphs in order to apply a single style to the entire section, instead of to each paragraph individually. You use the HTML tags DIV and SPAN to group your elements in this way:

• DIV is used to group a series of elements into a larger group. For example, you can group multiple paragraphs and headings or several elements on a form together using the DIV tag. DIV is used to offset a group of elements; that is, when you insert a DIV tag in a page, the DIV tag adds a paragraph break after its closing tag. DIV should not be used within a paragraph of text for this reason.
  
  
• SPAN is used within an element to group a part of it that is too small to capture with regular HTML tags. For example, you can use the SPAN tag to group a few sentences from within a paragraph, so you can perform actions that affect only that text. SPAN does not make formatting changes to the document as does the DIV tag, and is therefore better suited for use within paragraphs and in other elements where you do not want to introduce more white space.

You can add DIV and SPAN tags to the page designer by highlighting the elements you want to group, then choosing the DIV or SPAN icon from the toolbar. Visual Basic automatically inserts the appropriate opening and closing tags in the HTML for your page. The resulting DIV and SPAN elements appear in the treeview, and you can assign IDs and write code for them.

Grouping elements in DIV and SPAN tags can be an important part of your coding efforts, because it allows you to manipulate precise portions of the page. The following HTML code shows an example of DIV and SPAN tags used to manipulate parts of a Web page:

<DIV id="client-fullname" class="client">
   <SPAN class="client-lastname">Last name:</SPAN>
   <SPAN class="client-firstname">First name:</SPAN>
</DIV>

In this example, a DIV tag with the ID "client-fullname" groups the fields that specify the client's first and last name. Each label is part of a SPAN tag. If you wanted to perform an operation on all of the fields on the form, you could use the DIV tag to do so. If you wanted to perform an operation on just one item in the form, you could use the appropriate SPAN tag.

To add a DIV or SPAN tag to your page

1. Select the elements on your HTML page that you want to enclose in a DIV or SPAN tag.

   Note   You can highlight the elements in either the drawing surface or in the treeview.

2. Click the Wrap Selection in <DIV>…</DIV> toolbar icon to add a DIV tag, or the Wrap Selection in <SPAN>…</SPAN> toolbar icon to add a SPAN tag.

   Visual Basic inserts opening and closing tags around your selection.

3. If you want to program the DIV or SPAN elements, add a unique ID for each element by selecting it in the treeview panel, then setting its ID property in the Properties window.

For More Information   For more information on DIV and SPAN tags, see the W3C documentation at http://www.w3.org.