pageoneresults - 6:32 pm on Jan 16, 2006 (gmt 0)

Block Level Elements and Inline Elements

Over the past 10 years of using FrontPage, I've been onsite with clients training their internal staff how to use Office programs in general with FrontPage being one of them. Many are using FrontPage to manage their Intranets. Some have upgraded to SharePoint Services.

When watching users interact with their programs, especially during creation/editing of documents, I see things that can be done more efficiently or I know of a shortcut to do it quicker. One of those is styling content.

When working in FrontPage's WYSIWYG mode (or most document creation programs), you are dealing with two distinct elements for styling. You have ¶ block level elements and you have a inline elements. For those who are following along and are not familiar with the terms block level elements or inline level elements, please refer to the W3 and The global structure of an HTML document, 7.5.3 Block-level and inline elements [w3.org].

In the Style Menu for FrontPage, you will see block level elements preceded with ¶ and inline elements (specific) preceded with a.

¶ = Block Level Elements
a = Inline Elements

One of the most prolific styling actions that I've seen most users do in an editing environment is to highlight an entire line, or block of text to give it style. There are certain styles (inline) that require you to highlight entire lines or blocks of text. Examples of those would be <b>, <strong>, <i>, <em>, etc.

Styling of ¶ block level elements (<h>, <p>, etc.) do not require this. All you need to do is position your cursor anywhere within the block level element you wish to style and then select it from your Style Menu.

For example, you want to turn what you just typed in WYSIWYG mode into an <h> tag. Click anywhere within the line you just typed, select <h1> from the Style Menu. That will take that line and automatically wrap it in <h1></h1>. It will also apply whatever styling you've done with that <h1> in your external or embedded style sheet.

So, for all of you who continue to highlight in the above manner, take a shortcut and just click and apply the block level style. It's a second or two saved and it makes working in WYSIWYG a little more efficient.