Web Development Guidelines Resources for Creating a Web Site at Johns Hopkins


Web Guidelines Site Map

Web Publishing Style Tips

Below are just a few basic style tips that help create a professional and consistent look and feel to a web site. Web designers can find many additional resources online, through text books, and courses offered at JHU and elsewhere.

Style Guide | Hyperlinks Guide | On-line and Text Resources | JHU Course Offerings

Basic Style Guide

Main heading (H1) is used only once per document.
Main Heading should be the same as the page title. <title>
H1 headings should never wrap onto two lines.
Solution: Either edit heading to shorten, or break into 2 lines, and make the second line 1 size smaller.
Minor headings (second level) use H3 (H2 is too large)
Avoid following an H1 directly with an H3 heading.
Solution: Either place a short paragraph between them, or an index, like the one at the top of this page.
Never use H4 or H5.
Headings should never have bullets in front of them.
Avoid ALL CAPITAL LETTERS because they are difficult to read
Bold is used for emphasis.
Italics are used for de-emphasis.
Tables: used to line up columns of information because there is no tab equivalent in HTML.
Tables usually use border=0 unless it creates confusion.
Clickable images (e.g. banner) use border=0.
Text that users should type, e.g. in instructions should use <preformatted> style. (courier)
Use horizontal rules (lines) sparingly.
Never say <a href=" ">click here.</a>
Solution: Create a short sentence with a link.

Hyperlinks Guide

Linking your Web page to other Web pages is critical in creating a useful and well-organized web site. Rather than duplicating information that already exists on another Web page or an external site, you can link directly to those pages. Below are a few linking tips:

Link to another section of the same file
Anchors are like bookmarks, or place holders. Anchors are created using <a name=anchor-name>anchor to this</a> and linked to using <a href="#anchor-name">another part of this file</a> where the anchor is located.

Link to another file in the same directory
Link to <a href="another-file.html">another file</a> in the same directory as your file. To link to a specific part of the file, you can add #anchor-name to the link, e.g. <a href="another-file.html#specific-part">another file, particular section</a>.

Linking to another directory
Link to <a href="/another-dir/">another directory</a> on the site. There is no need to include a file name; the default file will automatically be loaded. (It is incorrect to specify the file name if you wish to link to the default file.)

Tip: When linking to the default file in a directory, you should always include the slash (/) after the directory name. Although links appear to work without the slash, omitting the slash can cause problems.

Hyperlinks to other pages on your site or to an external site:
Links to other files on your own site should never use the full URL; rather use just the path, e.g. /services/help/. Only links to other sites use the full URL. Starting a hyperlink with a / (slash) tells the server to insert www.xxx.jhu.edu (your full URL) and then navigate to the directory you requested by specifying /dir-name/.

On-line and Text Resources

Listed below are a few basic on-line HTML tutorials and other useful resources to help you design and develop a web site:

JHU Course Offerings

Hopkins offers a variety of courses in web design and development throughout its schools:

Before beginning any Johns Hopkins Institutions web project, please contact the appropriate office in your area for assistance with guidelines, standards or existing programs.

If there is any doubt about the methods for collecting, storing, or displaying sensitive information on web sites, the Johns Hopkins legal departments (410-516-8128) should be contacted for a definitive answer about Hopkins' liability and responsibility.