Show/Hide Block Elements

The Show/Hide Block Level Elements icon on the WYSIWYG Toolbar enables the ability to toggle the view of the WYSIWYG Editor. Click the icon to show the view or to hide it. Toggling displays block elements encapsulated within rectangles defined with thin, dashed lines and identified them with the label of the HTML element being used.

Show/Hide Block Level Elements Icon

Show or Hide Toggle for Block Level Elements

Location of Icon on the WYSIWYG Toolbar

Toolbar with Show/Hide Block Elements

Using Show/Hide Block Elements

The encapsulation rectangles show the applied format element; for example, a P label identifies the paragraph element, <p></p>, and HGROUP represents the application of a Heading Group.

Styling can be applied by using the Format or the Styles drop-down; however, only elements listed on the Format drop-down are shown in the block element view. The Styles drop-down applies classes. Elements listed on the Format drop-down are built-in; elements listed on the Styles drop-down can be added to reflect what has been defined in a style sheet. The list available on the Format drop-down also depends upon the schema used. For example, when enabling HTML5 Schema for a site, the following are available on the Format drop-down:

  • Paragraph
  • Address
  • Pre
  • H1 – H6
  • Block Quote
  • Section
  • Article
  • Heading Group
  • DIV
  • Aside
  • Figure

When HTML5 Schema is not enabled, the WYSIWYG defaults to XHTML. The following are available on the Format drop-down:

  • Paragraph
  • Address
  • Preformatted
  • H1 – H6

In both cases, when the Show/Hide view is toggled to show, the corresponding block elements are shown in the encapsulated and labeled view.

For more information about the Format drop-down and the usage for HTML5 Schema:

Format Drop-Down

Example of Show/Hide Block Elements

Show Hide Block Elements




Was this page helpful?

Additional Comments:

(Include your email address if you would like a reply)