Union Theological Seminary President Welcome
 

About Us

Page Formatting Style Guide <h1>

This document serves as an example for well "formed" documents throughout your website. Following these simple guidelines will help your user to find information in a quick and simple fashion as well as help to optimize your site for search engines.

Using Headers Effectively <h2>

Dividing pages by using section headers helps to turn your content into easily digestible chucks. This page structure allows visitors to quickly scan a page for the information they are looking for. (bodyEmphasis)

Every page should include a page header or <h1> line at the top that represents what the page is about; the <h1> should also match the page title which is defined in the "display name" field of page properties. It is helpful to include a brief page summary after the page header. The rest of the page should follow a descending structure of <h1> through <h6>.

Content Styles <h2>

Additional styles and tags can also help to improve access to information across your site.

Links <h3>

When creating links in your content it is important to give them as much context as possible. It is best for the link to contain words directly related to the page being linked to. For example saying, "Update your contact information through our profile update form," instead of, "To update your profile click here" for a page linking to a profile update form. To take that even a step further the words "profile", "update", and maybe even "form" would be included in both the page heading <h1> and in the page display name under page properties for the page being linked to.

Blockquotes <h3>

If a blockquote or indention to set off a section of text is needed, you may use either the "Indent Text" button or the tag BLOCKQUOTE to render text in such a manner. It indents the text by 25 pixels on the left and right and retained the other font styles of the normal text paragraphs. Other header styles may be used in conjunction with the blockquote to render headlines within the indent text, as demonstrated above. All spacing has been defined using the CSS, so no other styling are spacing should be applied manually.

Unordered Lists <h3>

Unordered lists are simply bulleted lists. All styles for bulleted list have been set using the CSS. You may use the HTML editor's bulleted list button (like Word) to create bulleted lists. Hit return once to create a new bulleted item and hit return twice to close the bulleted list and create a new paragraph below the list. You may insert a bulleted list inside of another list to create a secondary level and outline effect. All spacing has been defined using the CSS, so no other styling are spacing should be applied manually.

List Title <h4>

  • Sample list item one
  • Sample list item two that is longer than the first
  • Good style recommends having at least three bullets per list
  • But you can have more

Ordered Lists <h3>

Ordered lists are numbered bulleted lists. All styles for the ordered list have been set using the CSS. You may use the HTML editor's numbered list button (like Word) to create an ordered list. Hit return once to create a new numbered item and hit return twice to close the list and create a new paragraph below the list. Ordered lists default to Numerals for the first level and lowercase alphabet for second level.  Ordered lists are useful for creating directions. All spacing has been defined using the CSS, so no other styling are spacing should be applied manually.

List Title <h4>

  1. Sample list item one
  2. Sample list item two that is longer than the first
  3. Good style recommends having at least three bullets per list
  4. But you can have more

Images<h3>

There are several classes which can be applied to images to help formate your pages.

Float Left<h4>

In this example the image had a class of imagefloatLeft. This will float the image to the left so that text will wrap around it on the page. The image should be place in the text where you would like the top of the image to line up with vertically.

Float Right<h4>

In this example the image had a class of imagefloatRight. This will float the image to the right so that text will wrap around it on the page. The image should be place in the text where you would like the top of the image to line up with vertically.

sample h5

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc rhoncus pede quis dui. Etiam eget eros ac justo ultricies imperdiet. Morbi vitae dolor id eros mattis ultrices. Cras lobortis rutrum quam. Aliquam pellentesque, neque vitae sodales rhoncus, leo orci hendrerit metus, ac placerat odio lorem sit amet elit. Cras luctus elementum massa. Vivamus rutrum, libero quis bibendum facilisis, felis tellus facilisis nibh, ut hendrerit neque turpis vel velit.

sample h6

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc rhoncus pede quis dui. Etiam eget eros ac justo ultricies imperdiet. Morbi vitae dolor id eros mattis ultrices. Cras lobortis rutrum quam. Aliquam pellentesque, neque vitae sodales rhoncus, leo orci hendrerit metus, ac placerat odio lorem sit amet elit. Cras luctus elementum massa. Vivamus rutrum, libero quis bibendum facilisis, felis tellus facilisis nibh, ut hendrerit neque turpis vel velit.

©Union Theological Seminary in the City of New York

3041 Broadway at 121st Street, New York, NY 10027 | Tel: (212) 662-7100

online@uts.columbia.edu