Creating Divisions and Spans in an HTML Document

The HTML editor provides you with an easy way to insert divisions and spans in your HTML document. Divisions are sections of the document that allow you to define a collection of elements to which you want to apply attributes. A span is like a division, but a division is always set off from the rest of the document as a separate paragraph, while a span can include subset of a paragraph. In both divisions and spans, the elements included must be sequential in the document.

You can use divisions and spans to apply these types of attributes to collections of elements:

  • Style information   You can define a division and then apply formatting information, including a style sheet class or a style attribute to all the elements enclosed in the division. For example, if you set the division's paragraph alignment or font, all the paragraphs in the division will reflect that setting.

  • Absolute positioning   If you are working with a browser that supports Dynamic HTML (DHTML), you can define a division, and then specify absolute positioning for the division. You can then position all the elements in the division together by simply moving the division.

Divisions appear in the HTML document as <DIV> and </DIV> tags. All the HTML elements between these two tags are considered part of the division. Spans appear between the <SPAN> and </SPAN> tags.

To create a division

  1. Switch to Design view.

  2. Select the portion of the HTML document that you want to include in the division. The division can include text as well as elements such as images and so on.

  3. From the HTML menu, choose Div.

  4. In the Insert Div dialog box, choose a positioning option:

    • Absolute   Choose this option if you are using the division to contain a collection of elements to be positioned absolutely. Absolute positioning works only with browsers that support DHTML.

    • In-line   Choose this option if you are using the division to apply styles and do not want to use position the division's elements absolutely.

Tip   To make it easier to work with absolutely positioned divisions in Design view, choose the Visible Borders button from the Design toolbar.

To create a span

  1. Switch to Design view.

  2. Select the portion of the HTML document that you want to include in the span. The span can include text as well as elements such as images and so on.

  3. From the HTML menu, choose Span.

Tip   To make it easier to work with spans in Design view, choose the Visible Borders button from the Design toolbar.

After you have defined a division or span, you can add elements to it.

To add elements to a division or span

  • In Design view, select the division or span, place the insertion point inside the division, and then add the element.