2021.1

Table Of Contents
Span
The Span element (<span> in HTML code) is used to group inline elements, such as text in a
paragraph. A Span doesn't provide any visual change by itself, but it provides a way to target its
content in a script or in a style sheet.
To wrap content in a span, select the text and other inline elements and click Insert > Wrap in
Span on the menu. Give the span an ID if you are going to add a style rule or script for it that is
unique to this span; or give the span a class if this span can be targeted by a style or script
along with other pieces of content. Now you can use the wrapper's ID or class as a script's or
style's selector; see "Using the Text Script Wizard" on page799 and "Styling and formatting"
on page736.
Div
The Div is the element used to create both Positioned Boxes and Inline Boxes. By default, a
Div element reacts pretty much like a paragraph (<p>) or an inline box set to 'no float' except
that it can be resized directly. Just like Positioned Boxes and Inline Boxes, Div elements can be
styled using the Format > Box menu item, through the CTRL+M keyboard shortcut or through
the CSS files; see "Styling and formatting" on page736 and "Styling templates with CSS files"
on page738.
Adding a Div element
To add a Div, select Insert > Structural Elements > Div on the menu. For an explanation of
the options, see "Inserting an element" on page628.
HTML tag: div, span
When you add elements, such as text, images or a table, to the content of a template, you are
actually constructing an HTML file. It is possible to edit the source of the HTML file directly in
the Designer; see "Editing HTML" on page626.
In HTML, boxes are <div> elements. Spans are <span> elements. To learn how to change the
attributes of elements, see "Attributes" on page627.
Business graphics
Business graphics are a great way to visualize data in your documents. Connect Designer lets
you create three types of grapics:Bar Charts, Line Charts and Pie Charts. The charts are
generated by the integrated amCharts library (https://www.amcharts.com/javascript-charts/).
Page 690