Basic Formatting

A guide for formatting content.

How to Force a Line Break (a Soft Return)

Both hard and soft returns move the text cursor to the next line of text. A hard return is created by hitting the Enter or Return key on the keyboard.  This not only drops the cursor to the next line of text, it also starts a new paragraph.  Paragraphs by default are styled with extra spacing between them so that text is easier to read.  So what if you want to start a new line of text but without the extra spacing?  Simple, use a soft return.  To insert a soft return, hold down the Shift key on the keyboard and hit the Enter or Return key. The soft return, or line break, is particularly useful when adding address and contact information to your site.

Here is an example that uses soft returns (line breaks):

OIS Web Support
webhelp@med.unc.edu
(919) 966-3519

Headings and Normal Text

Why you should use Headers

  • Headers help to define your page's organizational structure and simplify page readability. Well-selected headers inform visitors and help them navigate your page.
  • Web site visitors use headings to scan the page for interesting content. They can easily determine where new topics are introduced and find what they're interested in.
  • Header content describes what's on your page, so make sure it's descriptive and compelling.
  • The proper use of headings aids accessibility by allowing screen-reading devices to follow the logical flow of your content. Such a device can inform the sight-impaired of the main headings, and allow them to tab from header to header on a page. If you merely make text big and bold, instead of using a header, a screen reader will read it as regular text, not as a designated heading.
  • Proper use of headers and styles creates a consistent look and feel not only through your site but through all School of Medicine sites.  

How to use Headers

  • Styling HeadersHeaders can be found in the "Style..." drop-down list.
  • There are five heading sizes: Heading 1 – Heading 5. The series of numbered headers represents the level of priority, with a Heading 1 having the highest priority and the Heading 5 having the lowest.
  • For consistency, start with the highest level header and work your way down.
  • Each page title is automatically styled as a heading level 1. No other heading on the page should carry as much weight. Because of this, the Heading 1 style has been removed from the "Styles..." drop-down list.
  • Don't use headers just to make text look bigger. There are other pre-defined styles such as XXX-large Font, XX-large Font, X-large Font, etc. that should be used for those purposes.
  • Please do not add additional formatting such as italicizing, bolding, and underlining to headers as this will conflict with the standard look and feel of the School of Medicine web system.
  • A heading style cannot be applied to part of a paragraph.  Even if you select / highlight part of a paragraph and apply a heading style, the heading style will be applied to the entire paragraph.  To prevent too much text from being styled as a header, ensure that your text is appropriately separated with hard returns (not soft returns).
  • The following heading presets are accessible from the Style drop-down menu that is visible when editing a page:

Heading 2 (h2) (also called Heading)

Heading 3 (h3) (also called Sbubheading)

Heading 4 (h4)

Heading 5 (h5)

 

How to remove a Heading Style

To remove a heading style from some text, simply highlight the text and select Normal paragraph from the Styles drop down list.

 

Bold, Italic, Underlined, and Strike Through  Emphasis

If you have highlighted the text you want to format and select a formatting button, the selected text will have that format applied to it. If the text is not selected, all text which is entered after the button is selected will have the formatting applied to it. Just like a word processor, multiple formats can be applied.

Subscript and Superscript  Superscript

Highlight the text you want to subscript or superscript and select the either the subscript or superscript button.

Unordered (Bulleted) List / Ordered (Numbered) List  Lists

Select the text you wish to format (each paragraph of the selected text will become its own bulleted item) and select either the Unordered List button to create a bulleted list.  Or, select the Ordered List button to create a numbered list. To create secondary and tertiary levels in the list, select the portion of the list you want to indent and click on the Indent button (see next).

Increase and Decrease Indent  Indent

Increase or decrease and selected lines of text. This tool can also be used to control indents in numbered or bulleted lists.

Quotes

It is possible to style fancy block quotes and pull quotes (callouts) with the visual editor.  See Styling Quotes for more information.

Alignment  Paragraph

Click any of the alignment options to align the text on the page. The default is left aligned and is recommended for most content.

Links  Link

Select some text or an image, and then click the solid link icon to link to something within your site (such as another page), to an external web site, or email address. The button on the right removes a link. When creating a link to a page outside of the School of Medicine, you may want to select to "Open in a new window." This makes the link open in a new browser window so that the user can continue browsing your site at the same time.

Anchors  Anchor

Once you've placed an anchor at a specific spot on a page, you can later link to that anchor to make traveling there a breeze. When creating an anchor, you'll be prompted to name it so you can target it specifically. Anchors are often used to create navigation for long pages with lots of content.  However, a better option would be to enable a table of contents for the page

Images  Image

Click to insert an image. You'll prompted to browse to the image's location, as well as select border, spacing, and alignment properties. By placing a short description in the alternative text field, you make such information accessible to users with disabilities, or who are otherwise unable to view images.  

Tables  Table

Tables are handy containers for information that must be aligned in rows and columns. They can be formatted to your liking, and edited after creation by right-clicking (or control+clicking on a Mac). See Working with Tables for more information.

Horizontal Rule  hr

Inserts a simple divider line as shown below:


Insert Special Character  Characters

Inserts symbols and special characters (trademark, currency, etc.). Place your cursor in the location you want to insert the special character. Click on the Insert Special Character button and choose the character you want to insert. Once you click on the special character, the Select Special Character window will close automatically.

Style  Style

The Style drop-down menu contains lots of optional and useful styles that can be applied to text and images.  Select the text or image you want to format and choose a style from the drop down menu.  You can only apply one style at a time. To remove styles, select the styled text and choose Normal from the drop down menu. 

Discreet Text

Discreet text is located in the "Style..." drop-down menu that's visible when editing a page.

This is an example of discreet text. This style should be used sparingly and only to clarify or reference other content, like a photo caption.

Text Color  Text

To change the color of text, select the text and click on the text color button. You can choose from the basic color choices that appear, or choose More Colors. More colors contains a color picker with more color choices. If you know the color hex value that you want to use, enter it in the dialog box and hit ‘OK’.

Background Color  Background

Select the text you want to add a background color to and click on the Background Color button. This tool should be used sparingly.

Remove Format  Erase

Click this icon to remove formatting such as bold, italic, underline, etc. that is applied to text.  (Note: This button won't remove styles chosen from the Style drop-down menu.)